"use client"

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

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

export function DeleteDialog({
    open,
    onOpenChange,
    onConfirm,
    title = "Are you sure?",
    description = "This action cannot be undone. This will permanently delete the item.",
    confirmText = "Delete",
    cancelText = "Cancel",
    isLoading = false,
}: DeleteDialogProps) {
    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-[425px]">
                <AlertDialogHeader>
                    <div className="flex items-center gap-3 mb-2">
                        <div className="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center shrink-0">
                            <AlertTriangle size={20} className="text-red-600" />
                        </div>
                        <AlertDialogTitle className="text-[18px] font-bold">
                            {title}
                        </AlertDialogTitle>
                    </div>
                    <AlertDialogDescription className="text-[14px] text-gray-600 leading-relaxed">
                        {description}
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter className="gap-2 sm:gap-2">
                    <AlertDialogCancel
                        disabled={isLoading}
                        className="rounded-xl"
                    >
                        {cancelText}
                    </AlertDialogCancel>
                    <Button
                        type="button"
                        onClick={() => void handleConfirm()}
                        disabled={isLoading}
                        className="rounded-xl bg-red-600 hover:bg-red-700 text-white"
                    >
                        {isLoading ? "Deleting..." : confirmText}
                    </Button>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    )
}