import React from "react";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { AlertTriangle, LoaderCircle } from "lucide-react";
import { __ } from "@wordpress/i18n";

/**
 * DeletePollDialog - Confirmation dialog for deleting polls
 */
export const DeletePollDialog = ({ isOpen, isModalLoading, setIsOpen, pollToDelete, onDelete }) => {
	if (!pollToDelete) return null;

	return (
		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
			<AlertDialogContent>
				<AlertDialogHeader>
					<AlertDialogTitle className="flex items-center gap-2 !my-0">
						<AlertTriangle className="h-5 w-5 text-red-500 mb-2" />
						{__("Confirm Delete Poll", "socialpoll")}
					</AlertDialogTitle>
					<AlertDialogDescription className="!mt-0">
						<p>
							{__("Are you sure you want to delete the poll:", "socialpoll")} <strong>{pollToDelete.name}</strong>?
						</p>
						<p className="mt-2">
							{__(
								"This action cannot be undone. This will permanently delete the poll and all associated votes.",
								"socialpoll"
							)}
						</p>
						<div className="mt-3 p-3 bg-red-50 rounded-md border border-red-200 text-red-800 text-sm">
							<p className="font-semibold !mt-0">{__("Warning:", "socialpoll")}</p>
							<ul className="list-disc pl-5 mt-1">
								<li>{__("All poll options will be removed", "socialpoll")}</li>
								<li>{__("All votes will be deleted", "socialpoll")}</li>
								<li>{__("Any embedded polls using this shortcode will no longer work", "socialpoll")}</li>
							</ul>
						</div>
					</AlertDialogDescription>
				</AlertDialogHeader>
				<AlertDialogFooter>
					<AlertDialogCancel>{__("Cancel", "socialpoll")}</AlertDialogCancel>
					<AlertDialogAction
						onClick={(e) => {
							e.preventDefault();
							onDelete();
						}}
						className="bg-red-600 hover:bg-red-700 focus:ring-red-500"
						disabled={isModalLoading}>
						{isModalLoading && <LoaderCircle className="animate-spin mr-2" />}
						{!isModalLoading && <LoaderCircle className="hidden mr-2" />}
						{isModalLoading ? __("Deleting...", "socialpoll") : __("Delete Poll", "socialpoll")}
					</AlertDialogAction>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
};

export default DeletePollDialog;