"use client";

import { useState } from "react";
import { atom, useAtom } from "jotai";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { modalRegistry } from "./moda-registery";
import { ModalState, TModalConfig } from "./types";

// -------------------- Modal Registry --------------------

type RegisteredModalNames = keyof typeof modalRegistry;

// Runtime modifiable registry
const dynamicModalRegistry: Record<string, TModalConfig> = { ...modalRegistry };

export const registerModal = (name: string, config: TModalConfig) => {
	dynamicModalRegistry[name] = config;
};

// -------------------- Modal Atom --------------------

const modalAtom = atom<ModalState>(null);

// -------------------- useModal Hook --------------------

export const useModal = () => {
	const [modal, setModal] = useAtom(modalAtom);

	function showModal(
		name: RegisteredModalNames,
		override?: Partial<TModalConfig>
	): void;
	function showModal(config: TModalConfig): void;
	function showModal(
		nameOrConfig: RegisteredModalNames | TModalConfig,
		configOverride?: Partial<TModalConfig>
	): void {
		if (typeof nameOrConfig === "string") {
			const base = modalRegistry[nameOrConfig];
			if (!base) return;
			setModal({ ...base, ...configOverride, name: nameOrConfig });
		} else {
			setModal(nameOrConfig);
		}
	}

	const closeModal = () => setModal(null);

	return { showModal, closeModal, modal };
};

// -------------------- ModalProvider --------------------

export const ModalProvider = () => {
	const { modal, closeModal } = useModal();
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState<string | null>(null);

	if (!modal) return null;

	const {
		title,
		hideTitle,
		description,
		hideDescription,
		cancelLabel = "Cancel",
		confirmLabel = "Confirm",
		onCancel,
		onConfirm,
		children,
	} = modal;

	const handleSubmit = async () => {
		setLoading(true);
		setError(null);
		try {
			const result = await onConfirm?.();
			if (result !== false) closeModal();
			// eslint-disable-next-line @typescript-eslint/no-explicit-any
		} catch (err: any) {
			setError(err.message || "Something went wrong.");
		} finally {
			setLoading(false);
		}
	};

	return (
		<Dialog open onOpenChange={closeModal}>
			<DialogContent>
				<DialogHeader>
					{hideTitle ? (
						<VisuallyHidden>
							<DialogTitle>{title}</DialogTitle>
						</VisuallyHidden>
					) : (
						<DialogTitle>{title}</DialogTitle>
					)}
					{hideDescription ? (
						<VisuallyHidden>
							<DialogDescription>{description}</DialogDescription>
						</VisuallyHidden>
					) : (
						<DialogDescription>{description}</DialogDescription>
					)}
				</DialogHeader>

				{error && <p className="text-sm text-red-500">{error}</p>}

				{children ?? (
					<DialogFooter className="mt-4 flex justify-end gap-2">
						<Button
							variant="ghost"
							onClick={() => {
								onCancel?.();
								closeModal();
							}}
							disabled={loading}
						>
							{cancelLabel}
						</Button>
						<Button onClick={handleSubmit} disabled={loading}>
							{loading ? "Loading..." : confirmLabel}
						</Button>
					</DialogFooter>
				)}
			</DialogContent>
		</Dialog>
	);
};