import { useEffect } from "react";
import { AlertCircle, X, Trash2, Loader2 } from "lucide-react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export default function DeleteConfirmDialog({
isOpen,
sourceToDelete,
deleting,
chunksCount,
onConfirm,
onCancel
}) {
// Prevent body scroll when modal is open
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}
return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen]);
if (!isOpen) return null;
return (
<div className="fixed top-0 left-0 right-0 bottom-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm flex items-center justify-center z-[9999] p-4 min-h-screen w-full">
<Card className="max-w-md w-full shadow-2xl relative my-auto">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
<AlertCircle className="w-5 h-5" />
Confirm Deletion
</CardTitle>
<CardDescription>
This action cannot be undone.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-3">
<p className="text-sm text-gray-900 dark:text-gray-100">
Are you sure you want to delete <strong>{sourceToDelete}</strong>?
</p>
<p className="text-xs text-gray-700 dark:text-gray-300 mt-2">
This will remove all {chunksCount} chunks from the search index.
</p>
</div>
<div className="flex gap-3">
<Button
onClick={onCancel}
variant="secondary"
className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-100 border border-gray-300 dark:border-gray-600"
disabled={deleting}
>
<X className="w-4 h-4 mr-2" />
Cancel
</Button>
<Button
onClick={onConfirm}
className="flex-1 bg-gray-900 hover:bg-black text-white dark:bg-gray-100 dark:hover:bg-white dark:text-gray-900"
disabled={deleting}
>
{deleting ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
Deleting...
</>
) : (
<>
<Trash2 className="w-4 h-4 mr-2" />
Delete
</>
)}
</Button>
</div>
</CardContent>
</Card>
</div>
);
}
