import { FrDateInput } from '@/components/fr-date-input';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useTranslation } from '@/hooks/use-translation';
import { useForm } from '@inertiajs/react';
import * as React from 'react';
import type { BeneficiaireOption } from './types';

interface Props {
    /** Fiche à compléter ; `null` = fermé. */
    fiche: BeneficiaireOption | null;
    onOpenChange: (open: boolean) => void;
}

/**
 * « Compléter l'identité » — le strict manquant, depuis la saisie d'une ligne.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POURQUOI PAS `supplier-dialog` RÉUTILISÉ ICI
 * ─────────────────────────────────────────────────────────────────────────────
 * Parce qu'il EFFACERAIT des données. Son `transform` envoie TOUS les champs à
 * chaque enregistrement — `adresse`, `email`, `telephone` compris — et la liste
 * des fournisseurs que reçoit l'écran de retenue ne porte que l'id, la raison
 * sociale, les deux identifiants et le type. Le formulaire s'ouvrirait donc vide
 * sur ces trois champs et les remettrait à `null` en base, sur une fiche que
 * l'utilisateur croyait seulement compléter.
 *
 * Élargir la prop pour transporter la fiche entière était l'autre issue : elle
 * alourdit chaque chargement de l'écran pour un cas rare, et laisse la même
 * chausse-trappe en place pour le prochain qui réutilisera le formulaire.
 *
 * Ce dialogue n'envoie QUE ce qu'il affiche. Les règles du `PATCH` l'autorisent :
 * `raison_sociale` et `type_personne` y sont `sometimes`, et la date de
 * naissance n'est exigée qu'à la création.
 */
export function IdentiteDialog({ fiche, onOpenChange }: Props) {
    const { t } = useTranslation();

    // Le CIN identifie une personne physique, le matricule une personne morale.
    // Même ordre de repli que `TejBeneficiaireService::typeIdentifierPour()`.
    const auCin = fiche?.type_personne !== 'morale';

    const form = useForm({ matricule_fiscal: '', cin: '', date_naissance: '' });
    const { data, setData, processing, clearErrors } = form;
    const errors = form.errors as Record<string, string | undefined>;

    React.useEffect(() => {
        if (fiche === null) return;
        clearErrors();
        setData({ matricule_fiscal: fiche.matricule_fiscal ?? '', cin: fiche.cin ?? '', date_naissance: '' });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [fiche?.id]);

    const submit = (event: React.FormEvent) => {
        event.preventDefault();
        if (fiche === null) return;

        const optionnel = (value: string) => (value.trim() === '' ? null : value.trim());

        form.transform((current) => ({
            ...(auCin ? { cin: optionnel(current.cin) } : { matricule_fiscal: optionnel(current.matricule_fiscal) }),
            // Envoyée par ABSENCE quand elle est vide : un `null` effacerait une
            // date déjà enregistrée que ce formulaire n'affiche même pas.
            ...(current.date_naissance !== '' ? { date_naissance: current.date_naissance } : {}),
        }));

        form.patch(route('fournisseurs.update', { supplier: fiche.id }), {
            preserveScroll: true,
            onSuccess: () => onOpenChange(false),
        });
    };

    return (
        <Dialog open={fiche !== null} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md" onInteractOutside={(e) => e.preventDefault()}>
                <DialogHeader>
                    <DialogTitle>{t('retenue', 'completer_identite', 'Compléter l’identité fiscale')}</DialogTitle>
                    <DialogDescription>{fiche?.raison_sociale}</DialogDescription>
                </DialogHeader>

                <form onSubmit={submit} className="flex flex-col gap-4">
                    <div className="flex flex-col gap-1.5">
                        <Label htmlFor="identite-champ">
                            {auCin ? t('fournisseurs', 'cin', 'CIN') : t('fournisseurs', 'matricule_fiscal', 'Matricule fiscal')}
                        </Label>
                        <Input
                            id="identite-champ"
                            autoFocus
                            value={auCin ? data.cin : data.matricule_fiscal}
                            onChange={(e) => setData(auCin ? 'cin' : 'matricule_fiscal', e.target.value)}
                            maxLength={auCin ? 20 : 40}
                            className="tabular-nums"
                        />
                        <FieldError message={auCin ? errors.cin : errors.matricule_fiscal} />
                    </div>

                    {auCin && (
                        <div className="flex flex-col gap-1.5">
                            <Label>{t('fournisseurs', 'date_naissance', 'Date de naissance')}</Label>
                            <FrDateInput value={data.date_naissance} onChange={(iso) => setData('date_naissance', iso)} inputClassName="h-9" />
                            <p className="text-muted-foreground text-xs">
                                {t(
                                    'retenue',
                                    'date_naissance_tej',
                                    'TEJ l’exige d’un tiers identifié par son CIN. Laissez vide pour garder celle déjà enregistrée.',
                                )}
                            </p>
                            <FieldError message={errors.date_naissance} />
                        </div>
                    )}

                    <DialogFooter>
                        <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                            {t('retenue', 'cancel')}
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {t('retenue', 'save')}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}

function FieldError({ message }: { message?: string }) {
    if (!message) return null;
    return <p className="text-destructive text-xs">{message}</p>;
}