import { AlertTriangle } from 'lucide-react';
import { useState } from 'react';

import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';

interface DeleteProjectDialogProps {
    projectName: string;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function DeleteProjectDialog({ projectName, open, onOpenChange }: DeleteProjectDialogProps) {
    const [isLoading, setIsLoading] = useState(false);

    const handleDelete = () => {
        setIsLoading(true);
        // Mock deletion
        setTimeout(() => {
            setIsLoading(false);
            onOpenChange(false);
        }, 1200);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[420px] border-none shadow-2xl bg-white dark:bg-neutral-900 overflow-hidden p-0">
                <div className="p-6">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
                        <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-500" />
                    </div>
                    
                    <DialogHeader className="text-left">
                        <DialogTitle className="text-xl font-bold text-foreground">Delete Project</DialogTitle>
                        <DialogDescription className="text-neutral-500 dark:text-neutral-400 mt-2">
                            Are you sure you want to delete <span className="font-semibold text-foreground">"{projectName}"</span>? This action cannot be undone and all associated data will be removed.
                        </DialogDescription>
                    </DialogHeader>
                </div>

                <DialogFooter className="bg-neutral-50 dark:bg-neutral-800/50 p-6 flex flex-col sm:flex-row gap-2">
                    <Button
                        variant="ghost"
                        onClick={() => onOpenChange(false)}
                        className="flex-1 rounded-xl h-11 font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700"
                    >
                        Keep Project
                    </Button>
                    <Button
                        variant="destructive"
                        onClick={handleDelete}
                        disabled={isLoading}
                        className="flex-1 rounded-xl h-11 font-bold shadow-lg shadow-red-500/20"
                    >
                        {isLoading ? 'Deleting...' : 'Yes, Delete Project'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}