import { Search } from 'lucide-react';
import { useMemo, useState } from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';

type ElementoCatalogo = {
    id: number;
    nombre: string;
    categoria: string;
    sort_order: number;
};

type ElementoSelectorProps = {
    catalogo: Record<string, ElementoCatalogo[]>;
    selectedIds: number[];
    onToggle: (id: number, checked: boolean) => void;
    loading: boolean;
};

export function ElementoSelector({
    catalogo,
    selectedIds,
    onToggle,
    loading,
}: ElementoSelectorProps) {
    const [search, setSearch] = useState('');

    const categorias = Object.entries(catalogo);

    const filteredCategorias = useMemo(() => {
        if (!search.trim()) { return categorias; }
        const q = search.toLowerCase();
        return categorias
            .map(([cat, items]) => [
                cat,
                items.filter((item) => item.nombre.toLowerCase().includes(q)),
            ])
            .filter(([, items]) => (items as ElementoCatalogo[]).length > 0) as [
            string,
            ElementoCatalogo[],
        ][];
    }, [search, categorias]);

    const selectedCount = selectedIds.length;

    if (loading) {
        return (
            <div className="flex flex-col gap-3 p-4 text-sm text-muted-foreground">
                Cargando catálogo...
            </div>
        );
    }

    return (
        <div className="flex flex-col gap-3">
            <div className="relative">
                <Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder="Buscar elemento..."
                    className="pl-8"
                />
            </div>

            <span className="text-xs text-muted-foreground">
                {selectedCount} seleccionado{selectedCount !== 1 ? 's' : ''}
            </span>

            <div className="h-[calc(100vh-20rem)] overflow-auto">
                <Accordion type="multiple" defaultValue={categorias.map(([cat]) => cat)}>
                    {filteredCategorias.map(([categoria, items]) => (
                        <AccordionItem key={categoria} value={categoria}>
                            <AccordionTrigger className="text-sm">
                                {categoria} ({items.length})
                            </AccordionTrigger>
                            <AccordionContent>
                                <div className="flex flex-col gap-2">
                                    {items.map((item) => {
                                        const checked = selectedIds.includes(item.id);
                                        return (
                                            <label
                                                key={item.id}
                                                className="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5"
                                            >
                                                <Checkbox
                                                    checked={checked}
                                                    onCheckedChange={(v) =>
                                                        onToggle(item.id, v === true)
                                                    }
                                                />
                                                <span>{item.nombre}</span>
                                            </label>
                                        );
                                    })}
                                </div>
                            </AccordionContent>
                        </AccordionItem>
                    ))}
                </Accordion>
            </div>
        </div>
    );
}