import { Link } from '@inertiajs/react';
import { AlertTriangle, PencilLine } from 'lucide-react';
import type { LigneNonDeposable } from './types';

/**
 * « Ces lignes ne peuvent pas être déposées » — et pourquoi, ligne par ligne.
 *
 * ═════════════════════════════════════════════════════════════════════════════
 * CE BANDEAU DISAIT « RIEN À SIGNALER » SUR DES LIGNES INDÉPOSABLES
 * ═════════════════════════════════════════════════════════════════════════════
 * Il s'appelait « Identités fiscales incomplètes » et n'affichait que des NOMS,
 * sur un contrôle serveur qui ne regardait que le CIN ou le matricule. Le dépôt,
 * lui, exige cinq champs de plus. L'utilisateur voyait donc un écran serein,
 * lançait le dépôt, se prenait un refus, allait vérifier la fiche — et la
 * trouvait complète, parce que le champ manquant n'était pas celui-là. Puis
 * recommençait, un refus à la fois, dans une fenêtre verrouillée qui n'offrait
 * aucun moyen de corriger.
 *
 * Trois choses ont changé, et les trois viennent de ce récit :
 *
 *   les RAISONS sont affichées .. toutes, mot pour mot celles que le dépôt
 *       rendrait, produites par le même code (`TejDeclarationXml::blocagesDe()`) ;
 *   le LIEN va au bon écran . `ou` dit si le champ manquant vit sur la fiche du
 *       bénéficiaire ou sur la ligne de la déclaration. Ce ne sont pas les mêmes
 *       formulaires, et rien à l'écran ne permettait de le deviner ;
 *   c'est CLIQUABLE ........ une ligne à corriger ouvre son propre formulaire.
 *
 * `onCorrigerLigne` est optionnel : sans lui, l'entrée reste informative plutôt
 * que de promettre un clic qui ne fait rien.
 */
export function FiscalWarning({ lignes, onCorrigerLigne }: { lignes: LigneNonDeposable[]; onCorrigerLigne?: (ligneId: number) => void }) {
    if (lignes.length === 0) return null;

    return (
        <div className="flex flex-col gap-2 rounded-md border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900">
            <div className="flex items-center gap-2 font-medium">
                <AlertTriangle className="h-4 w-4 shrink-0" />
                {lignes.length === 1
                    ? '1 ligne ne peut pas encore être déposée sur TEJ'
                    : `${lignes.length} lignes ne peuvent pas encore être déposées sur TEJ`}
            </div>
            <p className="text-xs text-amber-800">
                Voici exactement ce que la plateforme refuserait, et où le corriger. Le reste de la déclaration n’est pas concerné.
            </p>

            <ul className="flex flex-col gap-1.5 pt-1">
                {lignes.map((ligne) => (
                    <li key={ligne.ligne_id} className="flex flex-col gap-0.5 rounded border border-amber-200 bg-white/60 px-2.5 py-1.5">
                        <span className="text-xs font-medium">
                            {ligne.beneficiaire_nom ?? `Ligne #${ligne.ligne_id}`}
                            {ligne.property_nom && <span className="font-normal text-amber-700"> — {ligne.property_nom}</span>}
                        </span>
                        {/* TOUS les manques, listés d'un coup. N'en montrer
                            qu'un obligeait à corriger et relancer autant de fois
                            qu'il en restait, sans jamais savoir combien. */}
                        <ul className="flex flex-col gap-0.5">
                            {ligne.raisons.map((raison, i) => (
                                <li key={i} className="text-xs text-amber-800">
                                    {raison}
                                </li>
                            ))}
                        </ul>

                        {/* Le champ manquant vit sur la FICHE du bénéficiaire :
                            adresse, e-mail, téléphone. Elle se corrige sur
                            « Fournisseurs & fiches fiscales », qu'il s'agisse
                            d'un propriétaire ou d'un fournisseur — le nom
                            pré-rempli dans la recherche y mène directement. */}
                        {ligne.ou === 'fiche' ? (
                            <Link
                                href={`/fournisseurs?search=${encodeURIComponent(ligne.beneficiaire_nom ?? '')}`}
                                className="flex w-fit items-center gap-1 text-xs font-medium underline underline-offset-2 hover:text-amber-950"
                            >
                                <PencilLine className="h-3 w-3" />
                                Corriger sa fiche fiscale
                            </Link>
                        ) : onCorrigerLigne ? (
                            <button
                                type="button"
                                onClick={() => onCorrigerLigne(ligne.ligne_id)}
                                className="flex w-fit items-center gap-1 text-xs font-medium underline underline-offset-2 hover:text-amber-950"
                            >
                                <PencilLine className="h-3 w-3" />
                                Corriger cette ligne
                            </button>
                        ) : null}
                    </li>
                ))}
            </ul>
        </div>
    );
}