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 { Label } from '@/components/ui/label';
import { useTranslation } from '@/hooks/use-translation';
import { useForm } from '@inertiajs/react';
import * as React from 'react';
import type { RetenueLigne } from './types';

interface Props {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    ligne: RetenueLigne | null;
}

/**
 * LA DATE DE FACTURE, SUR N'IMPORTE QUELLE LIGNE (2026-09-30).
 *
 * « Laisse-moi la main pour modifier au moins la date. » Les ~240 lignes
 * importées de TEJ n'ont pas de date de facture — TEJ ne la connaît pas — et
 * elles sont toutes FIGÉES : « Modifier » n'existe plus sur elles. Ce dialogue
 * n'envoie QUE `facture_date`, que le serveur accepte même sur une ligne dont la
 * DGI détient le fichier (`RetenueLigne::CHAMPS_INFORMATIFS`) : elle n'est
 * jamais déclarée, montants et bénéficiaire restent figés.
 */
export function DateFactureDialog({ open, onOpenChange, ligne }: Props) {
    const { t } = useTranslation();

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

    // Dialogue monté en permanence : ré-hydratation à l'ouverture.
    React.useEffect(() => {
        if (!open) return;
        clearErrors();
        setData({ facture_date: ligne?.facture_date ?? '' });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, ligne?.id]);

    const envoyer = (valeur: string | null) => {
        if (!ligne) return;

        form.transform(() => ({ facture_date: valeur }));
        // La déclaration de la LIGNE — sur une plage, la page n'en a pas.
        form.patch(route('retenue.lignes.update', { id: ligne.declaration_id, ligne: ligne.id }), {
            preserveScroll: true,
            onSuccess: () => onOpenChange(false),
        });
    };

    const submit = (event: React.FormEvent) => {
        event.preventDefault();
        envoyer(data.facture_date === '' ? null : data.facture_date);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md">
                <form onSubmit={submit} className="flex flex-col gap-4">
                    <DialogHeader>
                        <DialogTitle>{t('retenue', 'invoice_date', 'Date de facture')}</DialogTitle>
                        <DialogDescription>
                            {ligne?.beneficiaire_nom ? `${ligne.beneficiaire_nom} — ` : ''}
                            {t('retenue', 'invoice_date_help', 'Une information pour vous : elle ne part jamais à la DGI.')}
                        </DialogDescription>
                    </DialogHeader>

                    <div className="flex flex-col gap-1.5">
                        <Label>{t('retenue', 'invoice_date', 'Date de facture')}</Label>
                        <FrDateInput value={data.facture_date} onChange={(iso) => setData('facture_date', iso)} inputClassName="h-9" />
                        {errors.facture_date && <p className="text-destructive text-xs">{errors.facture_date}</p>}
                    </div>

                    <DialogFooter className="gap-2 sm:justify-between">
                        <Button type="button" variant="ghost" disabled={processing || !ligne?.facture_date} onClick={() => envoyer(null)}>
                            {t('retenue', 'invoice_date_clear', 'Effacer la date')}
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {t('retenue', 'save', 'Enregistrer')}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}