"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 { Loader2 } from "lucide-react"

export interface CustomerProjectDeleteDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    projectName: string | null
    onConfirm: () => Promise<void>
    isLoading: boolean
}

export function CustomerProjectDeleteDialog({
    open,
    onOpenChange,
    projectName,
    onConfirm,
    isLoading,
}: CustomerProjectDeleteDialogProps) {
    return (
        <AlertDialog
            open={open}
            onOpenChange={(val) => {
                if (!val && isLoading) return
                onOpenChange(val)
            }}
        >
            <AlertDialogContent className="rounded-2xl border-white/40 bg-white/90 backdrop-blur-xl shadow-premium animate-in fade-in zoom-in-95 duration-200">
                <AlertDialogHeader>
                    <AlertDialogTitle className="text-[18px] font-black text-gray-900 font-['Lexend'] tracking-tight">
                        Delete project?
                    </AlertDialogTitle>
                    <AlertDialogDescription className="text-[13px] text-gray-500 font-medium font-['Lexend_Deca'] leading-relaxed">
                        {projectName
                            ? `This will permanently remove "${projectName}" from this customer. You can always create a new project later, but existing data for this project will be lost.`
                            : "Are you sure you want to delete this project?"}
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter className="gap-2 sm:gap-3">
                    <AlertDialogCancel
                        className="rounded-xl border-gray-200 text-gray-600 hover:bg-gray-50 font-semibold"
                        disabled={isLoading}
                    >
                        Cancel
                    </AlertDialogCancel>
                    <Button
                        type="button"
                        variant="destructive"
                        className="rounded-xl font-bold shadow-md hover:shadow-lg transition-all active:scale-95 px-6"
                        disabled={isLoading}
                        onClick={onConfirm}
                    >
                        {isLoading ? (
                            <div className="flex items-center gap-2">
                                <Loader2 className="size-4 animate-spin" />
                                <span>Deleting…</span>
                            </div>
                        ) : (
                            "Delete Project"
                        )}
                    </Button>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    )
}