import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import type { PropertyOption } from '@/types/automatisations';
import { Search } from 'lucide-react';
import { useMemo, useState } from 'react';
import { fill, filterProperties } from './automatisations-format';
import type { Translate } from './labels';

const NS = 'automatisations';

interface Props {
    properties: PropertyOption[];
    selected: number[];
    onChange: (ids: number[]) => void;
    t: Translate;
}

/**
 * Liste cochable des logements du siège, avec recherche. Pas de popover : la
 * liste vit dans la feuille de la règle (une modale), et un popover imbriqué
 * dans une modale se referme seul sous Safari (TL-291).
 */
export function PropertyChecklist({ properties, selected, onChange, t }: Props) {
    const [search, setSearch] = useState('');

    const visible = useMemo(() => filterProperties(properties, search), [properties, search]);

    const toggle = (id: number, checked: boolean) => {
        onChange(checked ? [...selected, id] : selected.filter((value) => value !== id));
    };

    return (
        <div className="flex flex-col gap-2 rounded-md border p-2">
            <div className="flex items-center gap-2">
                <div className="relative flex-1">
                    <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2" aria-hidden="true" />
                    <Input
                        value={search}
                        onChange={(event) => setSearch(event.target.value)}
                        placeholder={t(NS, 'properties_search', 'Rechercher un logement ou un nom interne')}
                        className="h-8 pl-8"
                    />
                </div>
                <span className="text-muted-foreground shrink-0 text-xs tabular-nums">
                    {fill(t(NS, 'properties_selected', ':count sélectionné(s)'), { count: selected.length })}
                </span>
                {selected.length > 0 && (
                    <button
                        type="button"
                        className="text-muted-foreground hover:text-foreground shrink-0 text-xs underline"
                        onClick={() => onChange([])}
                    >
                        {t(NS, 'properties_clear', 'Tout décocher')}
                    </button>
                )}
            </div>
            <ul className="max-h-56 overflow-y-auto">
                {visible.length === 0 ? (
                    <li className="text-muted-foreground px-2 py-3 text-center text-xs">
                        {t(NS, 'properties_none', 'Aucun logement ne correspond.')}
                    </li>
                ) : (
                    visible.map((property) => {
                        const checked = selected.includes(property.id);
                        const id = `automation-property-${property.id}`;

                        return (
                            <li key={property.id}>
                                <label htmlFor={id} className="hover:bg-muted/60 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm">
                                    <Checkbox id={id} checked={checked} onCheckedChange={(value) => toggle(property.id, value === true)} />
                                    <span className="min-w-0 truncate">{property.name}</span>
                                    {property.internalName && (
                                        <span className="text-muted-foreground shrink-0 text-xs">({property.internalName})</span>
                                    )}
                                </label>
                            </li>
                        );
                    })
                )}
            </ul>
        </div>
    );
}