import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { router, usePage } from '@inertiajs/react';
import { Bookmark, Loader2 } from 'lucide-react';
import * as React from 'react';
import { toast } from 'sonner';

interface SaveAsTemplateDialogProps {
    bodyHtml: string;
    defaultName?: string;
    category?: string | null;
    disabled?: boolean;
}

export function SaveAsTemplateDialog({
    bodyHtml,
    defaultName,
    category,
    disabled,
}: SaveAsTemplateDialogProps) {
    const isHeadquarters = usePage<{ auth: { isHeadquarters?: boolean } }>().props.auth?.isHeadquarters ?? false;
    const [open, setOpen] = React.useState(false);
    const [name, setName] = React.useState(defaultName ?? '');
    const [shared, setShared] = React.useState(false);
    const [submitting, setSubmitting] = React.useState(false);

    React.useEffect(() => {
        if (open) {
            setName(defaultName ?? '');
            setShared(false);
        }
    }, [open, defaultName]);

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        if (!name.trim()) {
            toast.error('Le nom du modèle est requis.');
            return;
        }
        if (!bodyHtml || bodyHtml.trim() === '') {
            toast.error('Le corps du document est vide.');
            return;
        }
        setSubmitting(true);
        router.post(
            '/crm/documents/templates',
            { name: name.trim(), category: category ?? null, body_html: bodyHtml, is_shared: isHeadquarters && shared },
            {
                preserveScroll: true,
                onSuccess: () => {
                    setOpen(false);
                    toast.success('Modèle enregistré.');
                },
                onError: () => toast.error("Échec de l'enregistrement."),
                onFinish: () => setSubmitting(false),
            },
        );
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button type="button" variant="outline" disabled={disabled}>
                    <Bookmark className="mr-1 h-4 w-4" />
                    Enregistrer comme modèle
                </Button>
            </DialogTrigger>
            <DialogContent>
                <form onSubmit={submit}>
                    <DialogHeader>
                        <DialogTitle>Enregistrer comme modèle</DialogTitle>
                        <DialogDescription>
                            Le contenu actuel sera réutilisable lors de la création d'un prochain document.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="space-y-3 py-4">
                        <div>
                            <Label htmlFor="template-name">Nom du modèle</Label>
                            <Input
                                id="template-name"
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                                placeholder="Ex. NDA Freelance — modèle 2026"
                                autoFocus
                                maxLength={120}
                            />
                        </div>
                        {category && (
                            <p className="text-xs text-muted-foreground">
                                Catégorie associée : <span className="font-medium">{category}</span>
                            </p>
                        )}
                        {isHeadquarters && (
                            <label className="flex items-start gap-2 rounded-md border p-2.5">
                                <input
                                    type="checkbox"
                                    className="mt-0.5"
                                    checked={shared}
                                    onChange={(e) => setShared(e.target.checked)}
                                />
                                <span className="text-sm">
                                    <span className="block font-medium">Partager avec toute l'équipe The Landlord</span>
                                    <span className="block text-xs text-muted-foreground">
                                        Visible par tous les comptes The Landlord. Les franchisés ne le voient pas.
                                    </span>
                                </span>
                            </label>
                        )}
                    </div>
                    <DialogFooter>
                        <Button type="button" variant="ghost" onClick={() => setOpen(false)} disabled={submitting}>
                            Annuler
                        </Button>
                        <Button type="submit" disabled={submitting}>
                            {submitting ? (
                                <>
                                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
                                    Enregistrement…
                                </>
                            ) : (
                                'Enregistrer'
                            )}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}