import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
import { IconChevronDown } from '@/Components/Icons';

/**
 * Remplace le `<select>` natif dans toute l'app (2026-08-31, retour d'usage
 * capture à l'appui) : le menu déroulant d'un `<select>` HTML ne peut pas
 * être stylé — rectangle brut, surbrillance grise du système, ombre dure —
 * et détonne avec le reste de l'app, exactement comme le calendrier natif
 * détonnait avant `DatePicker` (2026-08-29). `Listbox` de Headless UI avec
 * `anchor` gère lui-même le portail + le repositionnement dans le viewport
 * (mêmes soucis que `Dropdown`/`DatePicker` ont dû résoudre à la main),
 * donc pas de risque de le voir coupé dans une modale.
 *
 * Contrat volontairement proche d'un `<select>` contrôlé pour rester un
 * remplacement quasi direct : `options` est un tableau `[{value, label}]`
 * (la place vide "Tous les centres"/"— Choisir —" est un élément normal du
 * tableau, comme un `<option value="">` l'était) ; `onChange(valeur)` reçoit
 * directement la nouvelle valeur en chaîne — pas un évènement — donc un
 * appelant passe de `(e) => setData('x', e.target.value)` à
 * `(valeur) => setData('x', valeur)`.
 */
export default function Select({ value, onChange, options, placeholder = '— Choisir —', id, className = '', disabled = false }) {
    const valeurCourante = value === null || value === undefined ? '' : String(value);
    const selection = options.find((o) => String(o.value) === valeurCourante);

    return (
        <Listbox value={valeurCourante} onChange={onChange} disabled={disabled}>
            <div className={`relative ${className}`}>
                <ListboxButton
                    id={id}
                    className="flex w-full items-center justify-between gap-2 rounded-lg border border-slate-300 bg-white px-3.5 py-2.5 text-start text-base shadow-sm sm:text-sm transition-colors hover:border-slate-400 focus:border-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"
                >
                    <span className={`truncate ${selection ? 'text-slate-800' : 'text-slate-400'}`}>
                        {selection ? selection.label : placeholder}
                    </span>
                    <IconChevronDown className="h-4 w-4 shrink-0 text-slate-400" />
                </ListboxButton>

                <ListboxOptions
                    anchor="bottom start"
                    transition
                    className="z-50 mt-1 max-h-60 w-[var(--button-width)] overflow-auto rounded-lg border border-slate-100 bg-white py-1 text-sm shadow-lg [--anchor-gap:4px] focus:outline-none data-[closed]:opacity-0 data-[closed]:scale-95 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in transition"
                >
                    {options.map((option) => (
                        <ListboxOption
                            key={option.value}
                            value={String(option.value)}
                            className="cursor-pointer select-none px-3.5 py-2 text-slate-700 data-[focus]:bg-brand-50 data-[focus]:text-brand-700 data-[selected]:font-semibold data-[selected]:text-brand-600"
                        >
                            {option.label}
                        </ListboxOption>
                    ))}
                </ListboxOptions>
            </div>
        </Listbox>
    );
}