import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { useTranslation } from '@/hooks/use-translation';
import { barreFinance, type FinanceAcces } from '@/lib/finance-navigation';
import { cn } from '@/lib/utils';
import { Link, usePage } from '@inertiajs/react';
import { Check, ChevronDown } from 'lucide-react';

/** La typographie du titre de la barre sur tous les autres écrans (Breadcrumbs). */
const TITRE = 'text-lg font-semibold sm:text-xl';

/**
 * Onglets d'un groupe « Finances & Caisse » dans la BARRE DU HAUT, à la place
 * du titre et avec sa typographie : même position sur chaque écran du groupe,
 * quelle que soit la mise en page de l'écran. Rien ne se rend quand l'écran
 * n'est pas dans un groupe, ou qu'un seul écran y est permis : la barre garde
 * alors son titre (AppSidebarHeader).
 *
 * À partir de 1280 px, les onglets ; en dessous (téléphone, tablette, petit
 * portable), le titre de l'écran devient un menu des écrans du groupe. Le
 * choix est fait en CSS — pas de saut au changement d'écran — et l'étape de
 * visite (`<visite>-onglets`) vise l'enveloppe, visible dans les deux cas.
 */
export function FinanceBarre() {
    const { props, url } = usePage<{ financeAcces: FinanceAcces | null }>();
    const { t } = useTranslation();

    const barre = barreFinance(url, props.financeAcces);
    if (!barre) return null;

    const { groupe, actif, onglets } = barre;
    const libelle = (cle: string) => t('sidebar', cle);

    return (
        <div data-tour={actif.ancre} className="flex h-full min-w-0 items-center">
            <nav aria-label={libelle(groupe.libelle)} className="hidden min-w-0 items-center gap-1.5 overflow-x-auto py-1 xl:flex">
                {onglets.map((o) => {
                    const courant = o === actif;
                    return (
                        <Link
                            key={o.ecran}
                            href={o.href}
                            aria-current={courant ? 'page' : undefined}
                            className={cn(
                                // Même graisse et même taille pour tous : l'onglet courant ne décale rien.
                                'flex shrink-0 items-center rounded-full px-4 py-1 whitespace-nowrap transition-colors',
                                TITRE,
                                courant ? 'text-secondary bg-white shadow-sm' : 'text-white/85 hover:bg-white/15 hover:text-white',
                            )}
                        >
                            {libelle(o.libelle)}
                        </Link>
                    );
                })}
            </nav>

            <DropdownMenu modal={false}>
                <DropdownMenuTrigger
                    className={cn(
                        'flex min-w-0 items-center gap-1.5 rounded-lg bg-white/15 px-3 py-1 text-white hover:bg-white/25 focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:outline-none xl:hidden',
                        TITRE,
                    )}
                    aria-label={`${libelle(groupe.libelle)} — ${libelle(actif.libelle)}`}
                >
                    {/* Deux lignes plutôt qu'un nom coupé : « Fournisseurs et fiches fiscales » tient sur un téléphone. */}
                    <span className="line-clamp-2 text-left leading-tight">{libelle(actif.libelle)}</span>
                    <ChevronDown className="size-5 shrink-0 opacity-80" aria-hidden />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="w-64">
                    <DropdownMenuLabel className="text-muted-foreground text-xs font-medium">{libelle(groupe.libelle)}</DropdownMenuLabel>
                    {onglets.map((o) => (
                        <DropdownMenuItem key={o.ecran} asChild>
                            <Link href={o.href} aria-current={o === actif ? 'page' : undefined} className="flex items-center justify-between gap-2">
                                <span className={cn(o === actif && 'font-semibold')}>{libelle(o.libelle)}</span>
                                {o === actif && <Check className="text-secondary size-4" aria-hidden />}
                            </Link>
                        </DropdownMenuItem>
                    ))}
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    );
}