Epicnabbo-Catalogus-Updated-Daily/src/components/admin/confirm-dialog.tsx

"use client";

import { AlertTriangle } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { Button } from "@/components/ui/button";
import { modalContentVariants, modalOverlayVariants } from "@/lib/motion";
import { cn } from "@/lib/utils";

export type ConfirmDialogProps = {
	open: boolean;
	onOpenChange: (open: boolean) => void;
	title: string;
	description: string;
	confirmLabel?: string;
	cancelLabel?: string;
	variant?: "danger" | "default";
	loading?: boolean;
	onConfirm: () => void | Promise<void>;
};

/**
 * Portal-based confirm modal (not Dialog.Root) so it can safely stack
 * above Visual Manager / other Base UI dialogs without nested-root bugs.
 */
export function ConfirmDialog({
	open,
	onOpenChange,
	title,
	description,
	confirmLabel = "Confirm",
	cancelLabel = "Cancel",
	variant = "danger",
	loading,
	onConfirm,
}: ConfirmDialogProps) {
	const [busy, setBusy] = useState(false);
	const [mounted, setMounted] = useState(false);
	const isLoading = loading ?? busy;

	useEffect(() => setMounted(true), []);

	useEffect(() => {
		if (!open) return;
		const onKey = (e: KeyboardEvent) => {
			if (e.key === "Escape" && !isLoading) onOpenChange(false);
		};
		document.addEventListener("keydown", onKey);
		return () => document.removeEventListener("keydown", onKey);
	}, [open, isLoading, onOpenChange]);

	async function handleConfirm() {
		setBusy(true);
		try {
			await onConfirm();
			onOpenChange(false);
		} finally {
			setBusy(false);
		}
	}

	if (!mounted) return null;

	const isOpen = open;

	return createPortal(
		<AnimatePresence>
			{isOpen ? (
				<motion.div
					key="confirm-overlay"
					className="fixed inset-0 z-[200] flex items-center justify-center p-4"
					variants={modalOverlayVariants}
					initial="hidden"
					animate="visible"
					exit="exit"
				>
					<button
						type="button"
						aria-label="Dismiss"
						className="absolute inset-0 bg-black/95"
						disabled={isLoading}
						onClick={() => {
							if (!isLoading) onOpenChange(false);
						}}
					/>
					<motion.div
						key="confirm-content"
						role="alertdialog"
						aria-modal="true"
						aria-labelledby="confirm-dialog-title"
						aria-describedby="confirm-dialog-desc"
						className="relative z-10 w-full max-w-md rounded-xl border-2 border-primary/40 bg-surface p-6 text-card-foreground shadow-[0_0_60px_-10px_rgba(245,158,11,0.3)]"
						variants={modalContentVariants}
						initial="hidden"
						animate="visible"
						exit="exit"
					>
						<div className="flex flex-col gap-2 text-left">
							<div className="flex items-center gap-3">
								{variant === "danger" && (
									<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-destructive/15">
										<AlertTriangle className="h-5 w-5 text-destructive" />
									</div>
								)}
								<h2
									id="confirm-dialog-title"
									className="text-lg font-semibold leading-none"
								>
									{title}
								</h2>
							</div>
							<p
								id="confirm-dialog-desc"
								className="text-sm text-muted-foreground"
							>
								{description}
							</p>
						</div>
						<div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
							<Button
								type="button"
								variant="outline"
								disabled={isLoading}
								onClick={() => onOpenChange(false)}
							>
								{cancelLabel}
							</Button>
							<Button
								type="button"
								variant={variant === "danger" ? "destructive" : "default"}
								disabled={isLoading}
								onClick={handleConfirm}
								className={cn(
									variant === "danger" &&
										"bg-destructive text-destructive-foreground",
								)}
								autoFocus
							>
								{confirmLabel}
							</Button>
						</div>
					</motion.div>
				</motion.div>
			) : null}
		</AnimatePresence>,
		document.body,
	);
}

export type ConfirmOptions = {
	title: string;
	description: string;
	confirmLabel?: string;
	cancelLabel?: string;
	variant?: "danger" | "default";
};

/** Imperative confirm — returns a Promise. Render `{dialog}` in the tree. */
export function useConfirmDialog() {
	const [opts, setOpts] = useState<(ConfirmOptions & { open: boolean }) | null>(
		null,
	);
	const resolver = useRef<((value: boolean) => void) | null>(null);

	const confirm = useCallback((options: ConfirmOptions) => {
		return new Promise<boolean>((resolve) => {
			resolver.current = resolve;
			setOpts({ ...options, open: true });
		});
	}, []);

	const settle = useCallback((value: boolean) => {
		const resolve = resolver.current;
		resolver.current = null;
		setOpts(null);
		resolve?.(value);
	}, []);

	const dialog = opts ? (
		<ConfirmDialog
			open={opts.open}
			onOpenChange={(open) => {
				if (!open) settle(false);
			}}
			title={opts.title}
			description={opts.description}
			confirmLabel={opts.confirmLabel}
			cancelLabel={opts.cancelLabel}
			variant={opts.variant}
			onConfirm={() => settle(true)}
		/>
	) : null;

	return { confirm, dialog };
}