import { router } from '@inertiajs/react';
import { AlertTriangle, Loader2 } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { destroy as destroyRecurringTask } from '@/routes/recurring-tasks';

interface RecurringTask {
    id: number;
    title: string;
}

interface DeleteRecurringTaskDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    task: RecurringTask | null;
}

export function DeleteRecurringTaskDialog({
    open,
    onOpenChange,
    task,
}: DeleteRecurringTaskDialogProps) {
    const [processing, setProcessing] = useState(false);

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

        setProcessing(true);
        router.delete(destroyRecurringTask(task.id).url, {
            onSuccess: () => {
                setProcessing(false);
                toast.success('Automation deleted successfully');
                onOpenChange(false);
            },
            onError: () => {
                setProcessing(false);
                toast.error('Failed to delete automation');
            },
        });
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="overflow-hidden rounded-2xl border-none p-0 sm:max-w-100 [&>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-50 text-red-600 dark:bg-red-900/20">
                        <AlertTriangle size={24} />
                    </div>
                    <DialogHeader className="text-left">
                        <DialogTitle className="text-xl font-bold">
                            Delete Automation?
                        </DialogTitle>
                        <DialogDescription className="text-sm text-muted-foreground">
                            Are you sure you want to delete{' '}
                            <span className="font-bold text-foreground">
                                "{task?.title}"
                            </span>
                            ? This action will stop all future task generation
                            for this schedule.
                        </DialogDescription>
                    </DialogHeader>
                </div>
                <DialogFooter className="flex-row gap-3 bg-muted/30 p-6 sm:justify-end">
                    <Button
                        variant="ghost"
                        onClick={() => onOpenChange(false)}
                        className="flex-1 rounded-xl sm:flex-none"
                        disabled={processing}
                    >
                        Keep Automation
                    </Button>
                    <Button
                        variant="destructive"
                        className="flex-1 rounded-xl font-bold shadow-lg shadow-red-500/20 sm:flex-none"
                        onClick={(e) => {
                            e.preventDefault();
                            handleDelete();
                        }}
                        disabled={processing}
                    >
                        {processing ? (
                            <>
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                Deleting...
                            </>
                        ) : (
                            'Delete Automation'
                        )}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}