"use client"

import * as React from "react"
import { AlertTriangle, Loader2 } from "lucide-react"
import {
    AlertDialog,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface DeleteConfirmationAlertProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    onConfirm: () => void | Promise<void>
    title?: string
    description?: string
    confirmText?: string
    cancelText?: string
    isLoading?: boolean
}

export function DeleteConfirmationAlert({
    open,
    onOpenChange,
    onConfirm,
    title = "Delete Confirmation",
    description = "Are you sure you want to delete this item?",
    confirmText = "Delete",
    cancelText = "Cancel",
    isLoading = false,
}: DeleteConfirmationAlertProps) {
    const handleOpenChange = (next: boolean) => {
        if (!next && isLoading) return
        onOpenChange(next)
    }

    const handleConfirm = async () => {
        try {
            await onConfirm()
            onOpenChange(false)
        } catch {
            // Caller shows error toast; keep dialog open for retry
        }
    }

    return (
        <AlertDialog open={open} onOpenChange={handleOpenChange}>
            <AlertDialogContent className="sm:max-w-[420px] border-none p-0 overflow-hidden bg-white  shadow-2xl">
                <AlertDialogHeader className="px-6 pt-6 pb-2">
                    <div className="flex items-center gap-4">
                        <div className="h-10 w-10 rounded-xl bg-red-50 flex items-center justify-center shrink-0 border border-red-100 shadow-sm">
                            <AlertTriangle size={20} className="text-red-500" />
                        </div>
                        <div className="flex-1 min-w-0">
                            <AlertDialogTitle className="text-[17px] font-bold text-gray-900 font-['Lexend'] tracking-tight">
                                {title}
                            </AlertDialogTitle>
                            <AlertDialogDescription className="text-[13px] text-gray-500 font-medium mt-0.5 leading-relaxed">
                                {description}
                            </AlertDialogDescription>
                        </div>
                    </div>
                </AlertDialogHeader>

                <AlertDialogFooter className="px-6 py-4 bg-gray-50/50 gap-2.5 border-t border-gray-100">
                    <AlertDialogCancel
                        disabled={isLoading}
                        className="h-9 px-4 rounded-lg border-gray-200 text-gray-600 font-bold hover:bg-white hover:text-gray-900 transition-all text-[12px]"
                    >
                        {cancelText}
                    </AlertDialogCancel>
                    <Button
                        type="button"
                        onClick={() => void handleConfirm()}
                        disabled={isLoading}
                        className={cn(
                            "h-9 px-6 rounded-lg bg-red-600 hover:bg-red-700 text-white font-extrabold shadow-md shadow-red-100 transition-all flex items-center gap-2 text-[12px]",
                            isLoading && "opacity-80 cursor-not-allowed",
                        )}
                    >
                        {isLoading ? (
                            <>
                                <Loader2 size={14} className="animate-spin" />
                                Deleting...
                            </>
                        ) : (
                            confirmText
                        )}
                    </Button>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    )
}