import { AlertCircle } 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 DeleteTaskDialogProps {
    taskTitle: string;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function DeleteTaskDialog({
    taskTitle,
    open,
    onOpenChange,
}: DeleteTaskDialogProps) {
    const [isLoading, setIsLoading] = useState(false);

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

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="overflow-hidden border-none bg-white p-0 shadow-2xl sm:max-w-[420px] dark:bg-neutral-900">
                <div className="p-6 text-center">
                    <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-100 shadow-lg dark:border-neutral-800 dark:bg-red-900/30">
                        <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-500" />
                    </div>

                    <DialogHeader className="text-center">
                        <DialogTitle className="text-2xl font-bold text-foreground">
                            Delete Task?
                        </DialogTitle>
                        <DialogDescription className="mt-2 text-base text-neutral-500 dark:text-neutral-400">
                            Are you sure you want to remove{' '}
                            <span className="font-bold text-foreground underline decoration-red-500/30">
                                "{taskTitle}"
                            </span>
                            ? This action is permanent and cannot be reversed.
                        </DialogDescription>
                    </DialogHeader>
                </div>

                <DialogFooter className="flex flex-col gap-3 bg-neutral-50 p-6 sm:flex-row dark:bg-neutral-800/50">
                    <Button
                        variant="ghost"
                        onClick={() => onOpenChange(false)}
                        className="h-12 flex-1 rounded-xl font-semibold transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-700"
                    >
                        No, Keep it
                    </Button>
                    <Button
                        variant="destructive"
                        onClick={handleDelete}
                        disabled={isLoading}
                        className="h-12 flex-1 rounded-xl font-bold shadow-xl shadow-red-500/20 transition-all active:scale-95"
                    >
                        {isLoading ? 'Removing...' : 'Yes, Delete Task'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}