import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { useTranslation } from '@/hooks/use-translation';
import { router } from '@inertiajs/react';
import { AlertTriangle, Building2, HelpCircle, Landmark, Trash2 } from 'lucide-react';
import * as React from 'react';
import type { SupplierRow } from './columns';
import { consequenceSuppression } from './suppression';

interface Props {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    /** Fiche à supprimer ; `null` quand le dialogue est fermé (il reste monté). */
    supplier: SupplierRow | null;
}

/**
 * Confirmation de la suppression d'une fiche bénéficiaire.
 *
 * Ce n'est pas un « êtes-vous sûr ? ». Le même bouton déclenche DEUX gestes
 * différents selon la fiche — un effacement définitif doublé d'un retrait chez
 * la Direction générale des impôts, ou un simple masquage qui ne détruit rien —
 * et l'utilisateur ne peut pas deviner lequel. Le dialogue le lui MONTRE :
 * combien de lignes de retenue citent la fiche, si elle est liée à TEJ, ce qui
 * arrive ici, ce qui arrive là-bas. Le bouton lui-même nomme le geste
 * (« Supprimer définitivement » / « Retirer de la liste »), parce qu'un
 * « Confirmer » ne confirme rien.
 *
 * Le calcul des phrases vit dans `./suppression.ts` — il est testé sans DOM, et
 * c'est lui qui porte le contrat des props attendues du serveur.
 *
 * ⚠️ ÉTAT INCONNU. Sans le bloc `suppression`, ce dialogue ne promet rien mais
 * laisse le bouton ACTIF : la suppression fonctionne déjà aujourd'hui, et une
 * prop pas encore sérialisée ne doit pas retirer une capacité existante. Le
 * défaut sûr est ici de se taire, pas de verrouiller — l'inverse du bouton
 * d'envoi vers TEJ, où le défaut sûr est de ne PAS écrire chez l'État.
 *
 * Pièges Radix (errors.md, 2026-08-04) : la fermeture sur clic extérieur est
 * déjà neutralisée par `AlertDialog` lui-même — `@radix-ui/react-alert-dialog`
 * pose `onPointerDownOutside` et `onInteractOutside` en `preventDefault()` sur
 * son `Content` (dist/index.mjs, lignes 75-76). Rien n'est portalisé à
 * l'intérieur de cette boîte (ni `Popover`, ni `Select`, ni calendrier), donc
 * aucun `pointer-events-auto` n'a lieu d'être ; le jour où un champ y entrerait,
 * il en faudrait un.
 */
export function SupplierDeleteDialog({ open, onOpenChange, supplier }: Props) {
    const { t } = useTranslation();

    // Verrou de double-clic : `router.delete` est asynchrone et `AlertDialogAction`
    // ne se ferme pas tout seul ici (l'action est interceptée). Sans ce drapeau,
    // deux clics rapides partiraient deux fois — sur une fiche à effacer
    // définitivement, le second tomberait sur un 404.
    const [processing, setProcessing] = React.useState(false);

    // Dialogue monté en permanence : on repart d'un état propre à chaque
    // ouverture, sinon un `processing` resté vrai après une erreur figerait le
    // bouton de la fiche suivante.
    React.useEffect(() => {
        if (!open) setProcessing(false);
    }, [open]);

    const consequence = React.useMemo(() => consequenceSuppression(supplier?.suppression, t), [supplier?.suppression, t]);

    // Identité fiscale rappelée sous le nom : deux fiches peuvent porter la même
    // raison sociale, et celle qu'on efface définitivement ne se récupère pas.
    const identifiant = supplier?.matricule_fiscal ?? supplier?.cin ?? null;

    const supprimer = () => {
        if (!supplier || processing) return;

        setProcessing(true);
        router.delete(route('fournisseurs.destroy', { supplier: supplier.id }), {
            preserveScroll: true,
            onFinish: () => {
                setProcessing(false);
                onOpenChange(false);
            },
        });
    };

    return (
        <AlertDialog open={open} onOpenChange={(value) => !value && !processing && onOpenChange(false)}>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle className={consequence.irreversible ? 'flex items-center gap-2 text-red-700' : 'flex items-center gap-2'}>
                        {consequence.irreversible ? <AlertTriangle className="h-5 w-5" /> : <Trash2 className="h-5 w-5" />}
                        {consequence.titre}
                    </AlertDialogTitle>
                    <AlertDialogDescription>
                        {supplier?.raison_sociale ?? '—'}
                        {identifiant !== null && <span className="ml-1 font-mono tracking-wide tabular-nums">({identifiant})</span>}
                    </AlertDialogDescription>
                </AlertDialogHeader>

                {/* CE QUI VA SE PASSER — deux systèmes, deux phrases. C'est le
                    cœur de cette boîte : la conséquence AVANT le clic. */}
                <div className="flex flex-col gap-3 text-sm">
                    <div
                        className={
                            consequence.irreversible
                                ? 'flex items-start gap-2 rounded-md border border-red-300 bg-red-50 p-3 text-red-900'
                                : 'flex items-start gap-2 rounded-md border p-3'
                        }
                    >
                        {consequence.effet === 'inconnu' ? (
                            <HelpCircle className="mt-0.5 h-4 w-4 shrink-0" />
                        ) : (
                            <Building2 className="mt-0.5 h-4 w-4 shrink-0" />
                        )}
                        <span>{consequence.ici}</span>
                    </div>

                    {consequence.tej !== null && (
                        <div className="flex items-start gap-2 rounded-md border p-3">
                            <Landmark className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />
                            <span>{consequence.tej}</span>
                        </div>
                    )}

                    {/* Le chiffre nu, sous les phrases : c'est lui qui décide de
                        tout, et le relire d'un coup d'œil vaut mieux que de le
                        chercher au milieu d'un paragraphe. */}
                    {consequence.lignes !== null && (
                        <dl className="bg-muted/40 flex items-baseline justify-between gap-3 rounded-md border p-3 text-xs">
                            <dt className="text-muted-foreground shrink-0">
                                {t('fournisseurs', 'delete_lignes_liees', 'Lignes de retenue qui citent cette fiche')}
                            </dt>
                            <dd className="font-medium tabular-nums">{consequence.lignes}</dd>
                        </dl>
                    )}
                </div>

                <AlertDialogFooter>
                    <AlertDialogCancel disabled={processing}>{t('fournisseurs', 'cancel', 'Annuler')}</AlertDialogCancel>
                    <AlertDialogAction
                        className={consequence.irreversible ? 'bg-red-700 text-white hover:bg-red-800' : undefined}
                        disabled={processing}
                        /* `preventDefault()` NEUTRALISE la fermeture automatique
                           d'`AlertDialogAction` : Radix compose son gestionnaire
                           avec le nôtre via `composeEventHandlers`, qui n'appelle
                           le sien que si l'événement n'a pas été « défaut
                           empêché » (@radix-ui/primitive). La boîte reste donc
                           ouverte le temps de la requête, bouton désactivé, et
                           `onFinish` la ferme — sinon le verrou de double-clic ne
                           servirait à rien, la boîte ayant déjà disparu. */
                        onClick={(event) => {
                            event.preventDefault();
                            supprimer();
                        }}
                    >
                        {consequence.confirmation}
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
}