import { useForm } from '@inertiajs/react';
import { AlertTriangle } from 'lucide-react';

import { destroy as projectDestroy } from '@/actions/App/Domains/Project/Http/Controllers/ProjectController';

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

interface DeleteProjectDialogProps {
    project: ProjectDeleteTarget | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function DeleteProjectDialog({
    project,
    open,
    onOpenChange,
}: DeleteProjectDialogProps) {
    const { delete: destroy, processing } = useForm();

    const handleDelete = () => {
        if (!project) {
            return;
        }

        destroy(projectDestroy({ project: project.id }).url, {
            onSuccess: () => {
                onOpenChange(false);
            },
        });
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="overflow-hidden border-none bg-white p-0 shadow-2xl sm:max-w-105 dark:bg-neutral-900 [&>button:last-child]:hidden">
                <div className="p-6">
                    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
                        <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="mt-2 text-neutral-500 dark:text-neutral-400">
                            Are you sure you want to delete{' '}
                            <span className="font-semibold text-foreground">
                                "{project?.projectName}"
                            </span>
                            ? This action cannot be undone and all associated
                            data will be removed.
                        </DialogDescription>
                    </DialogHeader>
                </div>

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