import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useTranslation } from '@/hooks/use-translation';
import { formatDateTime } from '@/lib/utils';
import { CheckCircle2, CircleDashed, HelpCircle, Link2 } from 'lucide-react';
import { etatTej, type FicheTej } from './tej';

/**
 * État TEJ d'une fiche, lisible d'un coup d'œil.
 *
 * Trois états réels + un quatrième défensif (`inconnu`, quand le serveur n'a
 * pas encore le bloc `tej` dans sa sérialisation). Un état absent est affiché
 * comme tel : il ne se confond pas avec « jamais envoyé », parce que ces deux
 * situations n'appellent pas la même action.
 *
 * La date d'envoi est la seule information temporelle affichée. `external_id`
 * (l'identifiant de la relation chez TEJ) reste dans l'infobulle : il est utile
 * au rapprochement, il n'a rien à faire dans le scan visuel d'une liste.
 */
export function TejEtatBadge({ fiche }: { fiche: FicheTej | null | undefined }) {
    const { t, locale } = useTranslation();
    const etat = etatTej(fiche);

    if (etat === 'inconnu') {
        return (
            <Badge variant="outline" className="text-muted-foreground gap-1 font-normal">
                <HelpCircle className="h-3 w-3" />
                {t('fournisseurs', 'tej_etat_inconnu', 'État inconnu')}
            </Badge>
        );
    }

    if (etat === 'jamais_envoye') {
        return (
            <Badge variant="outline" className="text-muted-foreground gap-1 font-normal">
                <CircleDashed className="h-3 w-3" />
                {t('fournisseurs', 'tej_jamais_envoye', 'Jamais envoyé')}
            </Badge>
        );
    }

    if (etat === 'deja_connu') {
        return (
            <Tooltip>
                <TooltipTrigger asChild>
                    <Badge variant="outline" className="gap-1 border-sky-300 bg-sky-50 font-normal text-sky-800">
                        <Link2 className="h-3 w-3" />
                        {t('fournisseurs', 'tej_deja_connu', 'Déjà connu de TEJ')}
                    </Badge>
                </TooltipTrigger>
                <TooltipContent>
                    {t(
                        'fournisseurs',
                        'tej_deja_connu_hint',
                        "Cette fiche est rapprochée du registre TEJ, mais aucun envoi n'est parti d'ici. Un envoi la mettrait à jour.",
                    )}
                    {fiche?.external_id !== null && fiche?.external_id !== undefined && (
                        <span className="mt-1 block opacity-80">
                            {t('fournisseurs', 'tej_relation_id', 'Identifiant de relation')} : {fiche.external_id}
                        </span>
                    )}
                </TooltipContent>
            </Tooltip>
        );
    }

    const date = formatDateTime(fiche?.synced_at ?? null, locale);

    return (
        <Tooltip>
            <TooltipTrigger asChild>
                <Badge variant="outline" className="gap-1 border-emerald-300 bg-emerald-50 font-normal text-emerald-800">
                    <CheckCircle2 className="h-3 w-3" />
                    {t('fournisseurs', 'tej_envoye_le', 'Envoyé le')} {date}
                </Badge>
            </TooltipTrigger>
            <TooltipContent>
                {t('fournisseurs', 'tej_envoye_hint', 'Envoyé depuis cet écran. Un nouvel envoi mettrait la fiche à jour chez TEJ.')}
                {fiche?.external_id !== null && fiche?.external_id !== undefined && (
                    <span className="mt-1 block opacity-80">
                        {t('fournisseurs', 'tej_relation_id', 'Identifiant de relation')} : {fiche.external_id}
                    </span>
                )}
            </TooltipContent>
        </Tooltip>
    );
}