import { Link, router } from '@inertiajs/react';
import { Check, ChevronLeft, Plus } from 'lucide-react';
import { useState } from 'react';
import { PageHeader } from '@/components/shared/page-header';
import { SectionCard } from '@/components/shared/section-card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { index as leadCaptureIndex } from '@/routes/catalog/lead-capture';
import type {
    LeadCaptureEventDetailProps,
    LeadCaptureBrandRow,
} from '@/types/catalog';

export function LeadCaptureEventView({
    event,
    brands,
}: LeadCaptureEventDetailProps) {
    const [name, setName] = useState(event.name);
    const [startDate, setStartDate] = useState(event.start_date);
    const [endDate, setEndDate] = useState(event.end_date);
    const [selected, setSelected] = useState<Set<string>>(
        new Set(brands.filter((b) => b.assigned).map((b) => b.code)),
    );

    const toggleBrand = (code: string) => {
        setSelected((prev) => {
            const next = new Set(prev);

            if (next.has(code)) {
                next.delete(code);
            } else {
                next.add(code);
            }

            return next;
        });
    };

    const save = (e: React.FormEvent) => {
        e.preventDefault();
        router.patch(
            `/lead-capture/events/${event.id}`,
            {
                name,
                start_date: startDate,
                end_date: endDate,
                brand_codes: Array.from(selected),
            },
            { preserveScroll: true },
        );
    };

    return (
        <div className="custom-scroll flex-1 overflow-y-auto">
            <PageHeader title={event.name} subtitle="Lead Capture — event">
                <Link
                    href={leadCaptureIndex()}
                    prefetch="hover"
                    className="inline-flex cursor-pointer items-center gap-1 text-[10px] font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-astara-orange"
                >
                    <ChevronLeft size={12} /> Back to Lead Capture
                </Link>
            </PageHeader>

            <div className="space-y-3 p-5">
                <SectionCard title="Event details">
                    <form
                        onSubmit={save}
                        className="flex flex-wrap items-end gap-2 px-4 py-3"
                    >
                        <div>
                            <label className="mb-1 block text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                Name
                            </label>
                            <Input
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                                required
                                className="h-8 w-64 bg-white text-xs"
                            />
                        </div>
                        <div>
                            <label className="mb-1 block text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                Start
                            </label>
                            <Input
                                type="date"
                                value={startDate}
                                onChange={(e) => setStartDate(e.target.value)}
                                required
                                className="h-8 w-36 bg-white text-xs"
                            />
                        </div>
                        <div>
                            <label className="mb-1 block text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                End
                            </label>
                            <Input
                                type="date"
                                value={endDate}
                                onChange={(e) => setEndDate(e.target.value)}
                                required
                                className="h-8 w-36 bg-white text-xs"
                            />
                        </div>
                        <Button type="submit" size="sm">
                            Save
                        </Button>
                    </form>
                </SectionCard>

                <div className="grid grid-cols-2 gap-3">
                    <SectionCard
                        title="Brands"
                        titleRight={
                            <span className="text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                {selected.size} selected
                            </span>
                        }
                    >
                        <div className="max-h-[420px] divide-y divide-gray-50 overflow-y-auto">
                            {brands.map((brand) => (
                                <BrandToggleRow
                                    key={brand.id}
                                    brand={brand}
                                    checked={selected.has(brand.code)}
                                    onToggle={() => toggleBrand(brand.code)}
                                />
                            ))}
                        </div>
                        <div className="border-t border-gray-50 px-4 py-2.5">
                            <Button type="button" size="sm" onClick={save}>
                                <Plus size={14} /> Apply brands
                            </Button>
                        </div>
                    </SectionCard>

                    <SectionCard
                        title="Selected brands"
                        titleRight={
                            <span className="text-[9px] font-bold tracking-widest text-gray-400 uppercase">
                                will appear in the PWA
                            </span>
                        }
                    >
                        <div className="max-h-[420px] space-y-2 overflow-y-auto p-4">
                            {brands
                                .filter((b) => selected.has(b.code))
                                .map((brand) => (
                                    <div
                                        key={brand.id}
                                        className="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2"
                                    >
                                        <span className="truncate text-[11px] font-bold text-gray-700">
                                            {brand.name}
                                        </span>
                                        <span className="shrink-0 text-[10px] font-bold text-gray-400">
                                            {brand.models_count} models
                                        </span>
                                    </div>
                                ))}
                            {brands.filter((b) => selected.has(b.code))
                                .length === 0 && (
                                <p className="text-[11px] text-gray-400">
                                    No brands selected — tick brands on the
                                    left, then press "Apply brands" to save.
                                </p>
                            )}
                            <div className="pt-1">
                                <Button type="button" size="sm" onClick={save}>
                                    <Plus size={14} /> Apply brands
                                </Button>
                            </div>
                        </div>
                    </SectionCard>
                </div>
            </div>
        </div>
    );
}

function BrandToggleRow({
    brand,
    checked,
    onToggle,
}: {
    brand: LeadCaptureBrandRow;
    checked: boolean;
    onToggle: () => void;
}) {
    return (
        <button
            type="button"
            onClick={onToggle}
            className="flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-gray-50"
            aria-pressed={checked}
        >
            <span
                className={cn(
                    'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded border transition-colors',
                    checked
                        ? 'border-astara-purple bg-astara-purple text-white'
                        : 'border-gray-300 bg-white text-transparent',
                )}
            >
                <Check size={12} />
            </span>
            <img
                src={brand.logo_url ?? undefined}
                alt={brand.name}
                className="h-6 w-6 shrink-0 rounded object-contain"
                onError={(e) => {
                    (e.currentTarget as HTMLImageElement).style.display =
                        'none';
                }}
            />
            <span className="min-w-0 flex-1 truncate text-[11px] font-bold text-gray-700">
                {brand.name}
            </span>
            <span className="text-[10px] font-bold text-gray-400">
                {brand.models_count} models
            </span>
        </button>
    );
}