import React from "react";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Loader2, AlertTriangle, Info, AlertCircle } from "lucide-react";

export type AlertDialogVariant = "danger" | "warning" | "info";

interface ConfirmDeleteDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: () => void;
    title?: string;
    itemName?: string; // <-- Prop baru untuk nama item yang akan dihapus/dikonfirmasi
    description?: React.ReactNode; // Menggunakan ReactNode agar bisa merender elemen JSX/bold
    confirmText?: string;
    loadingText?: string;
    loading?: boolean;
    variant?: AlertDialogVariant;
    icon?: React.ReactNode;
}

export function ConfirmDeleteDialog({
    open,
    onOpenChange,
    onConfirm,
    title = "Hapus Data ?",
    itemName,
    description,
    confirmText = "Ya, Hapus",
    loadingText = "Menghapus...",
    loading = false,
    variant = "danger",
    icon,
}: ConfirmDeleteDialogProps) {
    const variantConfig = {
        danger: {
            iconWrapper:
                "bg-red-50 text-red-600 border-red-100 dark:bg-red-950/50 dark:text-red-400 dark:border-red-900/50",
            buttonBg:
                "bg-red-600 hover:bg-red-700 text-white shadow-xs shadow-red-600/20",
            defaultIcon: <AlertTriangle className="w-5 h-5" />,
        },
        warning: {
            iconWrapper:
                "bg-amber-50 text-amber-600 border-amber-100 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-900/50",
            buttonBg:
                "bg-amber-600 hover:bg-amber-700 text-white shadow-xs shadow-amber-600/20",
            defaultIcon: <AlertCircle className="w-5 h-5" />,
        },
        info: {
            iconWrapper:
                "bg-indigo-50 text-indigo-600 border-indigo-100 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-900/50",
            buttonBg:
                "bg-indigo-600 hover:bg-indigo-700 text-white shadow-xs shadow-indigo-600/20",
            defaultIcon: <Info className="w-5 h-5" />,
        },
    };

    const currentVariant = variantConfig[variant] || variantConfig.danger;

    // Menentukan teks deskripsi fallback jika `description` tidak diisi manual
    const renderDescription = () => {
        if (description) return description;

        if (itemName) {
            return (
                <span className="block space-y-1">
                    <span className="block">
                        Apakah Anda yakin ingin menghapus{" "}
                        <strong className="font-bold text-foreground dark:text-slate-200">
                            "{itemName}"
                        </strong>{" "}
                        ?
                    </span>
                    <span className="block text-muted-foreground/80">
                        Tindakan ini tidak dapat dibatalkan.
                    </span>
                </span>
            );
        }

        return "Tindakan ini tidak dapat dibatalkan. Data yang dihapus akan hilang secara permanen.";
    };

    return (
        <AlertDialog open={open} onOpenChange={onOpenChange}>
            <AlertDialogContent className="z-50 w-90! max-w-90! !sm:max-w-[360px] rounded-2xl p-4 bg-card dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-2xl transition-all">
                <AlertDialogHeader className="flex flex-col items-center justify-center text-center p-0 space-y-2">
                    <div
                        className={`mx-auto flex h-10 w-10 items-center justify-center rounded-xl border shadow-xs transition-transform ${currentVariant.iconWrapper}`}
                    >
                        {icon || currentVariant.defaultIcon}
                    </div>

                    <div className="space-y-1 w-full">
                        <AlertDialogTitle className="text-sm font-bold text-foreground dark:text-slate-100 leading-tight">
                            {title}
                        </AlertDialogTitle>
                        <AlertDialogDescription className="text-[11px] leading-relaxed text-muted-foreground dark:text-muted-foreground/80 font-medium">
                            {renderDescription()}
                        </AlertDialogDescription>
                    </div>
                </AlertDialogHeader>

                <AlertDialogFooter className="mt-4 flex flex-row items-center justify-center gap-2 sm:justify-center">
                    <AlertDialogCancel
                        disabled={loading}
                        className="flex-1 rounded-lg border border-border dark:border-slate-800 bg-muted/50 dark:bg-slate-800/50 text-foreground/80 dark:text-muted-foreground/60 font-semibold text-[11px] h-8 hover:bg-muted dark:hover:bg-slate-800 transition-all cursor-pointer m-0 px-2"
                    >
                        Batal
                    </AlertDialogCancel>
                    <AlertDialogAction
                        onClick={(e) => {
                            e.preventDefault();
                            onConfirm();
                        }}
                        disabled={loading}
                        className={`flex-1 rounded-lg font-bold text-[11px] h-8 transition-all cursor-pointer border-0 m-0 px-2 ${currentVariant.buttonBg}`}
                    >
                        {loading ? (
                            <span className="flex items-center justify-center gap-1">
                                <Loader2 className="w-3 h-3 animate-spin" />
                                <span>{loadingText}</span>
                            </span>
                        ) : (
                            confirmText
                        )}
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
}