import { BadgeAlert, BadgeCheck, Clock3, ExternalLink } from 'lucide-react';

export type CheckinStatus = 'signed' | 'started' | 'none';

/**
 * État du check-in en ligne → apparence de la pastille (TL-269).
 *
 * **Pleine, pas pâle.** Le vert de la marque (`--secondary`, #31b08f) habille
 * déjà tous les liens de la carte : une pastille en vert clair se lit comme un
 * lien, pas comme un état. D'où des fonds francs, et un vert nettement plus
 * sombre que celui de la marque.
 *
 * **Le neutre est plein lui aussi.** « À relancer » est le cas de 88 % des
 * séjours (mesuré : 148 check-ins pour 1198 arrivées sur 60 jours). Le peindre
 * en rouge transformerait le tableau de bord en mur d'alarme ; le laisser pâle
 * le rendait invisible. Un ardoise plein se voit au balayage et laisse les deux
 * états rares ressortir.
 *
 * Contrastes vérifiés à 12 px (AA exige 4,5:1) : blanc sur emerald-700 ≈ 5,4:1,
 * amber-950 sur amber-500 ≈ 7,5:1, blanc sur slate-600 ≈ 7,2:1.
 */
const CHECKIN_STATES: Record<CheckinStatus, { Icon: React.ComponentType<{ className?: string }>; labelKey: string; className: string }> = {
    signed: { Icon: BadgeCheck, labelKey: 'checkin_signed', className: 'bg-emerald-700 text-white' },
    started: { Icon: Clock3, labelKey: 'checkin_started', className: 'bg-amber-500 text-amber-950' },
    none: { Icon: BadgeAlert, labelKey: 'checkin_none', className: 'bg-slate-600 text-white' },
};

/**
 * La 3ᵉ ligne de la carte du tableau de bord : l'état du check-in du voyageur.
 *
 * Deux dimensions sont FIXES, et c'est tout l'intérêt du composant : la hauteur
 * (`h-6`) et une largeur minimale (`min-w-[10.5rem]`). Les pastilles forment
 * ainsi une colonne d'une carte à l'autre, quel que soit le libellé — sans quoi
 * l'œil ne peut pas balayer une rangée, ce qui était la raison d'afficher
 * l'état.
 *
 * Rend un `<a>` quand le parcours check-in du voyageur est ouvrable, un `<span>`
 * sinon — même boîte dans les deux cas, pour que rien ne bouge.
 */
export default function CheckinBadge({
    status = 'none',
    href,
    translations,
}: {
    status?: CheckinStatus;
    /** Parcours check-in du voyageur ; absent = pastille non cliquable. */
    href?: string | null;
    /** Dictionnaire partagé par Inertia (`translations.dashboard.*`). */
    translations: Record<string, Record<string, string>>;
}) {
    const state = CHECKIN_STATES[status] ?? CHECKIN_STATES.none;
    const Icon = state.Icon;
    const label = `${translations.dashboard.checkin_label}: ${translations.dashboard[state.labelKey]}`;
    const shape = `inline-flex h-6 min-w-[10.5rem] shrink-0 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium ${state.className}`;

    if (!href) {
        return (
            <span className={shape}>
                <Icon className="h-3.5 w-3.5 shrink-0" />
                {label}
            </span>
        );
    }

    return (
        <a
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            title={translations.dashboard.open_checkin}
            className={`${shape} transition hover:brightness-110`}
        >
            <Icon className="h-3.5 w-3.5 shrink-0" />
            {label}
            <ExternalLink className="ml-auto h-3 w-3 shrink-0 opacity-70" />
        </a>
    );
}