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 { Spinner } from '@/components/ui/spinner';
import { Textarea } from '@/components/ui/textarea';
import { useTranslation } from '@/hooks/use-translation';
import { useForm } from '@inertiajs/react';
import { useEffect, type FormEvent } from 'react';

export interface Coordonnees {
    client_adresse: string | null;
    client_email: string | null;
    note_entete: string | null;
    note_pied: string | null;
    echeance_jours: number;
}

interface Props {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    factureId: number;
    numero: string;
    /** Proformas et avoirs n'ont pas d'échéance imprimée : le champ ne s'affiche pas. */
    avecEcheance: boolean;
    valeurs: Coordonnees;
}

/**
 * Coordonnées d'une pièce ÉMISE : adresse, e-mail, notes, échéance. Rien qui
 * touche aux montants ni à l'identité fiscale du client — ceux-là se corrigent
 * par « Corriger » (avoir + brouillon de remplacement).
 */
export function CoordonneesDialog({ open, onOpenChange, factureId, numero, avecEcheance, valeurs }: Props) {
    const { t } = useTranslation();
    const tr = (cle: string, fr: string) => t('factures', cle, fr);

    const form = useForm<{
        client_adresse: string;
        client_email: string;
        note_entete: string;
        note_pied: string;
        echeance_jours: number;
    }>({
        client_adresse: valeurs.client_adresse ?? '',
        client_email: valeurs.client_email ?? '',
        note_entete: valeurs.note_entete ?? '',
        note_pied: valeurs.note_pied ?? '',
        echeance_jours: valeurs.echeance_jours,
    });

    // Chaque ouverture repart des valeurs enregistrées — elles deviennent aussi la
    // référence de `isDirty`, pour que « Enregistrer » ne s'allume qu'au changement.
    useEffect(() => {
        if (!open) return;
        const enregistrees = {
            client_adresse: valeurs.client_adresse ?? '',
            client_email: valeurs.client_email ?? '',
            note_entete: valeurs.note_entete ?? '',
            note_pied: valeurs.note_pied ?? '',
            echeance_jours: valeurs.echeance_jours,
        };
        form.setDefaults(enregistrees);
        form.setData(enregistrees);
        form.clearErrors();
        // eslint-disable-next-line react-hooks/exhaustive-deps -- `form` change à chaque frappe
    }, [open, valeurs]);

    const erreurPiece = (form.errors as Record<string, string | undefined>).facture;

    const enregistrer = (event: FormEvent) => {
        event.preventDefault();
        form.patch(route('factures.coordonnees', factureId), {
            preserveScroll: true,
            onSuccess: () => onOpenChange(false),
        });
    };

    return (
        <Dialog open={open} onOpenChange={(o) => !form.processing && onOpenChange(o)}>
            <DialogContent className="sm:max-w-lg">
                <form onSubmit={enregistrer} className="grid gap-4">
                    <DialogHeader>
                        <DialogTitle>{tr('coordonnees.titre', 'Coordonnées de {numero}').replace('{numero}', numero)}</DialogTitle>
                        <DialogDescription>
                            {tr(
                                'coordonnees.explication',
                                "Ce qui ne touche ni aux montants ni à l'identité fiscale du client. Pour le reste, « Corriger » émet un avoir et ouvre un brouillon de remplacement.",
                            )}
                        </DialogDescription>
                    </DialogHeader>

                    <div className="grid gap-1.5">
                        <Label htmlFor="coord-adresse">{tr('coordonnees.adresse', 'Adresse du client')}</Label>
                        <Textarea
                            id="coord-adresse"
                            rows={2}
                            value={form.data.client_adresse}
                            onChange={(e) => form.setData('client_adresse', e.target.value)}
                            aria-invalid={Boolean(form.errors.client_adresse) || undefined}
                        />
                        {form.errors.client_adresse && <p className="text-xs text-rose-700">{form.errors.client_adresse}</p>}
                    </div>

                    <div className="grid gap-4 sm:grid-cols-[1fr_auto]">
                        <div className="grid gap-1.5">
                            <Label htmlFor="coord-email">{tr('coordonnees.email', 'E-mail du client')}</Label>
                            <Input
                                id="coord-email"
                                type="email"
                                value={form.data.client_email}
                                onChange={(e) => form.setData('client_email', e.target.value)}
                                aria-invalid={Boolean(form.errors.client_email) || undefined}
                            />
                            {form.errors.client_email && <p className="text-xs text-rose-700">{form.errors.client_email}</p>}
                        </div>
                        {avecEcheance && (
                            <div className="grid gap-1.5">
                                <Label htmlFor="coord-echeance">{tr('coordonnees.echeance', 'Échéance (jours)')}</Label>
                                <Input
                                    id="coord-echeance"
                                    type="number"
                                    min={0}
                                    max={365}
                                    className="w-28 tabular-nums"
                                    value={form.data.echeance_jours}
                                    onChange={(e) => form.setData('echeance_jours', Number.parseInt(e.target.value || '0', 10))}
                                    aria-invalid={Boolean(form.errors.echeance_jours) || undefined}
                                />
                                {form.errors.echeance_jours && <p className="text-xs text-rose-700">{form.errors.echeance_jours}</p>}
                            </div>
                        )}
                    </div>

                    <div className="grid gap-1.5">
                        <Label htmlFor="coord-note-entete">{tr('coordonnees.note_entete', "Note d'en-tête")}</Label>
                        <Textarea
                            id="coord-note-entete"
                            rows={2}
                            value={form.data.note_entete}
                            onChange={(e) => form.setData('note_entete', e.target.value)}
                        />
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="coord-note-pied">{tr('coordonnees.note_pied', 'Note de pied')}</Label>
                        <Textarea
                            id="coord-note-pied"
                            rows={2}
                            value={form.data.note_pied}
                            onChange={(e) => form.setData('note_pied', e.target.value)}
                        />
                    </div>
                    {/* Refus du serveur hors champ (pièce annulée, brouillon…) : clé `facture`. */}
                    {erreurPiece && <p className="text-sm text-rose-700">{erreurPiece}</p>}

                    <DialogFooter>
                        <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={form.processing}>
                            {tr('editeur.annuler', 'Annuler')}
                        </Button>
                        <Button type="submit" className="bg-secondary hover:bg-secondary/90" disabled={form.processing || !form.isDirty}>
                            {form.processing && <Spinner size="sm" className="text-white" />}
                            {tr('coordonnees.enregistrer', 'Enregistrer')}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}