import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import { Link } from '@inertiajs/react';
import { Fragment } from 'react';
import { IconDots } from '@/Components/Icons';

/**
 * Menu d'actions (les « ••• » de fin de ligne des listes, les actions
 * secondaires d'une fiche). Construit sur `Menu` de Headless UI : clavier
 * (flèches, Échap, Début/Fin, saisie au clavier), ARIA (`role="menu"`,
 * `aria-haspopup`, `aria-expanded`) et repositionnement dans le viewport
 * gérés nativement — plus besoin du portail + clamp manuels de `Dropdown`
 * (audit design du 2026-09-01).
 *
 * items : tableau de
 *   { label, icon?, href?, download?, onClick?, danger?, separatorBefore?, hidden? }
 * - href + download  -> <a href download> (téléchargement binaire, jamais un
 *   <Link> Inertia qui traiterait la réponse comme une visite)
 * - href seul        -> <Link> Inertia
 * - onClick          -> <button>
 */
export default function MenuActions({ items, label = 'Actions', trigger, triggerClassName, anchor = 'bottom end' }) {
    const visibles = items.filter((i) => i && !i.hidden);

    // Déclencheur par défaut : le « ••• » de fin de ligne. Quand l'appelant
    // fournit son propre `trigger` (un bouton stylé, p. ex. un menu d'export),
    // le <MenuButton> ne porte plus que l'anneau de focus — c'est le contenu
    // fourni qui donne le fond/la bordure/le padding. `triggerClassName`
    // permet d'imposer une classe complète (p. ex. `w-full` pour la carte
    // utilisateur de la sidebar).
    const classeDeclencheur =
        triggerClassName ??
        (trigger
            ? 'inline-flex rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2'
            : 'inline-flex items-center justify-center rounded-md p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 data-[open]:bg-slate-100 data-[open]:text-slate-700');

    return (
        <Menu>
            <MenuButton aria-label={label} className={classeDeclencheur}>
                {trigger ?? <IconDots className="h-5 w-5" />}
            </MenuButton>

            <MenuItems
                anchor={anchor}
                transition
                className="z-50 w-56 rounded-lg border border-slate-100 bg-white py-1 text-sm shadow-lg [--anchor-gap:4px] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75"
            >
                {visibles.map((item, index) => {
                    const classe = `flex w-full items-center gap-2 px-4 py-2 text-start transition-colors data-[focus]:bg-slate-100 ${
                        item.danger ? 'text-red-600 data-[focus]:bg-red-50' : 'text-slate-700'
                    }`;
                    const contenu = (
                        <>
                            {item.icon && <item.icon className="h-4 w-4 shrink-0 text-slate-400" />}
                            {item.label}
                        </>
                    );

                    return (
                        <Fragment key={index}>
                            {item.separatorBefore && <div className="my-1 border-t border-slate-100" />}
                            <MenuItem>
                                {item.href && item.download ? (
                                    <a href={item.href} download className={classe}>
                                        {contenu}
                                    </a>
                                ) : item.href ? (
                                    <Link href={item.href} className={classe}>
                                        {contenu}
                                    </Link>
                                ) : (
                                    <button type="button" onClick={item.onClick} className={classe}>
                                        {contenu}
                                    </button>
                                )}
                            </MenuItem>
                        </Fragment>
                    );
                })}
            </MenuItems>
        </Menu>
    );
}