import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Spinner } from '@/components/ui/spinner';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import { router } from '@inertiajs/react';
import { CloudUpload, FileText, X } from 'lucide-react';
import { useRef, useState, type DragEvent } from 'react';

interface ImportDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

/** Même plafond que `ImportFactureRequest` (config `factures.import.max_kb`). */
const TAILLE_MAX = 10 * 1024 * 1024;

export function ImportDialog({ open, onOpenChange }: ImportDialogProps) {
    const { t } = useTranslation();
    const tr = (cle: string, fr: string) => t('factures', cle, fr);

    const champ = useRef<HTMLInputElement>(null);
    const [fichier, setFichier] = useState<File | null>(null);
    const [erreur, setErreur] = useState<string | null>(null);
    const [survol, setSurvol] = useState(false);
    const [lecture, setLecture] = useState(false);

    const choisir = (f: File | undefined) => {
        if (!f) return;
        const estPdf = f.type === 'application/pdf' || /\.pdf$/i.test(f.name);
        if (!estPdf) {
            setFichier(null);
            setErreur(tr('import.erreur_type', 'Déposez un fichier PDF.'));
            return;
        }
        if (f.size > TAILLE_MAX) {
            setFichier(null);
            setErreur(tr('import.erreur_taille', 'Le PDF dépasse 10 Mo.'));
            return;
        }
        setErreur(null);
        setFichier(f);
    };

    const reinitialiser = () => {
        setFichier(null);
        setErreur(null);
        setSurvol(false);
        if (champ.current) champ.current.value = '';
    };

    // Pendant la lecture, rien ne ferme le dialogue : la requête continuerait
    // sans personne pour voir le brouillon ou l'erreur qu'elle rapporte.
    const fermer = (ouvert: boolean) => {
        if (lecture) return;
        if (!ouvert) reinitialiser();
        onOpenChange(ouvert);
    };

    const deposer = (event: DragEvent<HTMLDivElement>) => {
        event.preventDefault();
        setSurvol(false);
        if (lecture) return;
        choisir(event.dataTransfer.files?.[0]);
    };

    const lire = () => {
        if (!fichier || lecture) return;
        router.post(
            route('factures.import'),
            { fichier },
            {
                forceFormData: true,
                // Réussite = redirection vers l'éditeur ; échec = retour ici, le
                // dialogue reste ouvert avec le fichier choisi pour réessayer.
                preserveState: true,
                preserveScroll: true,
                onStart: () => setLecture(true),
                onFinish: () => setLecture(false),
                onError: (errors) => setErreur(errors.fichier ?? Object.values(errors)[0] ?? null),
            },
        );
    };

    const tailleKo = fichier ? Math.max(1, Math.round(fichier.size / 1024)).toLocaleString('fr-FR') : '';

    return (
        <Dialog open={open} onOpenChange={fermer}>
            <DialogContent
                className="sm:max-w-lg"
                onInteractOutside={(e) => lecture && e.preventDefault()}
                onEscapeKeyDown={(e) => lecture && e.preventDefault()}
            >
                <DialogHeader>
                    <DialogTitle>{tr('import.titre', 'Importer une facture PDF')}</DialogTitle>
                    <DialogDescription>
                        {tr(
                            'import.explication',
                            "Le Manager extrait le texte du PDF, reconnaît chaque ligne, puis recalcule les totaux et les compare à ceux du document. Vous relisez le brouillon avant de l'émettre — il recevra le prochain numéro du Manager, pas celui du document.",
                        )}
                    </DialogDescription>
                </DialogHeader>

                {lecture ? (
                    <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed px-4 py-10 text-center" role="status">
                        <Spinner size="lg" />
                        <div className="text-sm font-medium">{tr('import.lecture', 'Lecture du document…')}</div>
                        <div className="text-muted-foreground text-xs">
                            {tr('import.lecture_duree', 'Cela peut prendre une vingtaine de secondes. Gardez cette fenêtre ouverte.')}
                        </div>
                    </div>
                ) : (
                    <div
                        onDragOver={(e) => {
                            e.preventDefault();
                            setSurvol(true);
                        }}
                        onDragLeave={() => setSurvol(false)}
                        onDrop={deposer}
                        className={cn(
                            'flex flex-col items-center gap-3 rounded-xl border-2 border-dashed px-4 py-8 text-center transition-colors',
                            survol ? 'border-secondary bg-secondary/5' : 'border-border bg-muted/30',
                        )}
                    >
                        <CloudUpload className={cn('size-8', survol ? 'text-secondary' : 'text-muted-foreground')} aria-hidden />
                        <div className="text-sm">
                            <span className="font-medium">{tr('import.deposer', 'Glissez le PDF ici')}</span>{' '}
                            <span className="text-muted-foreground">{tr('import.ou', 'ou')}</span>
                        </div>
                        <Button type="button" variant="outline" size="sm" onClick={() => champ.current?.click()}>
                            {tr('import.parcourir', 'Parcourir')}
                        </Button>
                        <div className="text-muted-foreground text-xs">{tr('import.contraintes', 'PDF uniquement, 10 Mo au plus.')}</div>
                        <input
                            ref={champ}
                            type="file"
                            accept="application/pdf"
                            className="sr-only"
                            tabIndex={-1}
                            onChange={(e) => choisir(e.target.files?.[0])}
                        />
                    </div>
                )}

                {fichier && !lecture && (
                    <div className="flex items-center gap-3 rounded-lg border bg-white px-3 py-2">
                        <FileText className="text-primary size-5 shrink-0" aria-hidden />
                        <div className="min-w-0 flex-1">
                            <div className="truncate text-sm font-medium" title={fichier.name}>
                                {fichier.name}
                            </div>
                            <div className="text-muted-foreground text-xs tabular-nums">{tailleKo} Ko</div>
                        </div>
                        <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="size-7"
                            onClick={reinitialiser}
                            aria-label={tr('import.retirer', 'Retirer le fichier')}
                        >
                            <X className="size-4" />
                        </Button>
                    </div>
                )}

                {erreur && <p className="text-sm text-rose-700">{erreur}</p>}

                <DialogFooter>
                    <Button type="button" variant="outline" onClick={() => fermer(false)} disabled={lecture}>
                        {tr('import.annuler', 'Annuler')}
                    </Button>
                    <Button type="button" className="bg-secondary hover:bg-secondary/90" onClick={lire} disabled={!fichier || lecture}>
                        {lecture && <Spinner size="sm" className="text-white" />}
                        {tr('import.lire', 'Lire le document')}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}