import { router, usePage } from '@inertiajs/react';
import { Plus, Trash2, X } from 'lucide-react';
import { useState } from 'react';
import { EmptyState } from '@/components/shared/empty-state';
import { PageHeader } from '@/components/shared/page-header';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { DisclaimerRow } from '@/components/views/disclaimer-row';

interface DisclaimerRow {
    id: number;
    brand_code: string;
    name: string;
    text_de: string | null;
    text_fr: string | null;
    text_it: string | null;
    position: string;
    targets_count: number;
}

const POSITIONS = [
    'below_category',
    'under_price_table',
    'end_of_page',
] as const;

function CreateForm({ onClose }: { onClose: () => void }) {
    const [form, setForm] = useState({
        name: '',
        text_de: '',
        text_fr: '',
        text_it: '',
        position: 'below_category',
    });

    const submit = (event: React.FormEvent) => {
        event.preventDefault();
        router.post(
            '/disclaimers',
            { ...form, brand_code: 'fiat' },
            { preserveScroll: true, onSuccess: () => onClose() },
        );
    };

    return (
        <form
            onSubmit={submit}
            className="flex flex-wrap items-end gap-2 border-b border-gray-50 px-4 py-3"
        >
            <Input
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                required
                placeholder="Label (e.g. Ab Lager)"
                className="h-8 w-40 bg-white text-xs"
            />
            <Input
                value={form.text_de}
                onChange={(e) => setForm({ ...form, text_de: e.target.value })}
                required
                placeholder="Text DE *"
                className="h-8 w-64 bg-white text-xs"
            />
            <Input
                value={form.text_fr}
                onChange={(e) => setForm({ ...form, text_fr: e.target.value })}
                placeholder="Text FR"
                className="h-8 w-52 bg-white text-xs"
            />
            <Input
                value={form.text_it}
                onChange={(e) => setForm({ ...form, text_it: e.target.value })}
                placeholder="Text IT"
                className="h-8 w-52 bg-white text-xs"
            />
            <Select
                value={form.position}
                onValueChange={(v) => setForm({ ...form, position: v })}
            >
                <SelectTrigger size="sm" className="w-44 bg-white text-xs">
                    <SelectValue />
                </SelectTrigger>
                <SelectContent>
                    {POSITIONS.map((p) => (
                        <SelectItem key={p} value={p}>
                            {p.replaceAll('_', ' ')}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
            <Button type="submit" size="sm">
                Create
            </Button>
            <Button type="button" size="sm" variant="ghost" onClick={onClose}>
                <X size={14} />
            </Button>
        </form>
    );
}

export function DisclaimersIndexView({
    disclaimers,
}: {
    disclaimers: DisclaimerRow[];
}) {
    const [showCreate, setShowCreate] = useState(false);
    const canEdit = usePage().props.auth.can.edit_catalog;

    return (
        <div className="flex flex-1 flex-col overflow-hidden">
            <PageHeader
                title="Disclaimers"
                subtitle="Reusable library — attach to features / categories / trims / engines / variants"
            />

            <div className="custom-scroll flex-1 overflow-y-auto p-4 md:p-6">
                <div className="rounded-xl border border-[rgba(30,25,50,0.06)] bg-white shadow-[0_2px_8px_rgba(30,25,50,0.04)]">
                    <div className="border-b border-gray-50 px-4 py-2">
                        {canEdit && !showCreate && (
                            <Button
                                size="sm"
                                variant="outline"
                                onClick={() => setShowCreate(true)}
                            >
                                <Plus size={14} />
                                New disclaimer
                            </Button>
                        )}
                    </div>

                    {showCreate && (
                        <CreateForm onClose={() => setShowCreate(false)} />
                    )}

                    <div className="divide-y divide-gray-50">
                        {disclaimers.length === 0 && (
                            <EmptyState
                                title="No disclaimers yet"
                                description="Create the first reusable disclaimer for your brand."
                            />
                        )}
                        {disclaimers.map((d) => (
                            <DisclaimerRow
                                key={d.id}
                                disclaimer={d}
                                canEdit={canEdit}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}