import { Checkbox } from '@/components/ui/checkbox';
import { Field, FieldLabel } from '@/components/ui/field';
import type { EspaciosComplementariosData } from '@/generated/types';
import { index as espaciosComplementariosIndex } from '@/routes/espacios-complementarios';
import { useCatalogo } from '../hooks/use-catalogo';
import { useSectionForm } from '../lib/section-form-context';

type EspacioComplementario = {
    id: number;
    nombre: string;
};

export function EspaciosComplementarios() {
    const { data, setData } = useSectionForm<EspaciosComplementariosData>();
    const { data: espacios = [], loading } = useCatalogo<EspacioComplementario[]>(
        espaciosComplementariosIndex.url(),
    );

    const toggle = (id: number, checked: boolean) => {
        const elementoIds = data.elemento_ids ?? [];
        setData(
            'elemento_ids',
            checked
                ? [...elementoIds, id]
                : elementoIds.filter((elementoId) => elementoId !== id),
        );
    };

    return (
        <Field>
            <FieldLabel>Espacios complementarios</FieldLabel>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {(espacios ?? []).map((espacio) => (
                    <label
                        key={espacio.id}
                        className="flex items-center gap-3 rounded-lg border border-border p-4 text-sm font-medium transition-colors hover:bg-accent/50"
                    >
                        <Checkbox
                            checked={(data.elemento_ids ?? []).includes(espacio.id)}
                            onCheckedChange={(value) =>
                                toggle(espacio.id, value === true)
                            }
                        />
                        {espacio.nombre}
                    </label>
                ))}
                {loading && (
                    <p className="text-sm text-muted-foreground">
                        Cargando espacios complementarios...
                    </p>
                )}
            </div>
        </Field>
    );
}