import { useForm } from '@inertiajs/react';
import { AlertTriangle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Spinner } from '@/components/ui/spinner';

type Variant = 'default' | 'destructive';

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    description: string;
    warningText: string;
    confirmButtonText: string;
    /** URL destino de la accion. */
    actionUrl: string;
    /** Metodo HTTP: 'delete' | 'patch' | 'post' | 'put'. */
    method?: 'delete' | 'patch' | 'post' | 'put';
    /** Estilo del dialogo: 'destructive' (eliminar) o 'default' (transiciones de estado). */
    variant?: Variant;
};

const warningBoxClasses: Record<Variant, string> = {
    destructive: 'border-destructive/20 bg-destructive/5',
    default: 'border-amber-500/20 bg-amber-500/5',
};

const warningIconClasses: Record<Variant, string> = {
    destructive: 'text-destructive',
    default: 'text-amber-600',
};

export function ConfirmDialog({
    open,
    onOpenChange,
    title,
    description,
    warningText,
    confirmButtonText,
    actionUrl,
    method = 'patch',
    variant = 'default',
}: Props) {
    const form = useForm({});

    const submit = () => {
        const options = {
            preserveScroll: true,
            onSuccess: () => onOpenChange(false),
        };

        if (method === 'delete') {
            form.delete(actionUrl, options);
        } else if (method === 'patch') {
            form.patch(actionUrl, options);
        } else if (method === 'post') {
            form.post(actionUrl, options);
        } else {
            form.put(actionUrl, options);
        }
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>{description}</DialogDescription>
                </DialogHeader>

                <div
                    className={`rounded-2xl border p-4 text-sm text-muted-foreground ${warningBoxClasses[variant]}`}
                >
                    <div className="flex items-start gap-3">
                        <AlertTriangle
                            className={`mt-0.5 ${warningIconClasses[variant]}`}
                        />
                        <p>{warningText}</p>
                    </div>
                </div>

                <DialogFooter>
                    <Button
                        type="button"
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                    >
                        Cancelar
                    </Button>
                    <Button
                        type="button"
                        variant={variant === 'destructive' ? 'destructive' : 'default'}
                        disabled={form.processing}
                        onClick={submit}
                    >
                        {form.processing ? <Spinner /> : null}
                        {confirmButtonText}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

export type ConfirmDialogProps = Props;