"use client";
import { cn } from "./index3.js";
import { Skeleton } from "./index18.js";
import { AICodeBlock } from "./index414.js";
import { getMermaidConfig } from "./index428.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/ai/AIMermaidDiagram/AIMermaidDiagram.tsx
function DiagramSkeleton({ maxHeight }) {
	return /* @__PURE__ */ jsx("div", {
		className: "flex items-center justify-center p-8 rounded-xl border border-border bg-muted",
		style: {
			minHeight: 200,
			maxHeight
		},
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col items-center gap-4 w-full max-w-md",
			children: [
				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
				/* @__PURE__ */ jsxs("div", {
					className: "flex items-center justify-center gap-4 w-full",
					children: [
						/* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-24 rounded-lg" }),
						/* @__PURE__ */ jsx(Skeleton, { className: "h-1 w-8" }),
						/* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-24 rounded-lg" }),
						/* @__PURE__ */ jsx(Skeleton, { className: "h-1 w-8" }),
						/* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-24 rounded-lg" })
					]
				}),
				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })
			]
		})
	});
}
function DiagramError({ code, error }) {
	return /* @__PURE__ */ jsxs("div", {
		className: "space-y-2",
		children: [/* @__PURE__ */ jsxs("div", {
			className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-destructive/20 text-destructive text-sm",
			role: "alert",
			children: [
				/* @__PURE__ */ jsx("svg", {
					xmlns: "http://www.w3.org/2000/svg",
					viewBox: "0 0 20 20",
					fill: "currentColor",
					className: "size-4 flex-shrink-0",
					"aria-hidden": "true",
					children: /* @__PURE__ */ jsx("path", {
						fillRule: "evenodd",
						d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
						clipRule: "evenodd"
					})
				}),
				/* @__PURE__ */ jsx("span", {
					className: "font-medium",
					children: "Diagram parse error:"
				}),
				/* @__PURE__ */ jsx("span", {
					className: "truncate",
					children: error
				})
			]
		}), /* @__PURE__ */ jsx(AICodeBlock, {
			code,
			language: "mermaid",
			showLineNumbers: true
		})]
	});
}
function useResolvedTheme(theme) {
	const [resolvedTheme, setResolvedTheme] = React.useState(() => {
		if (theme !== "auto") return theme;
		if (typeof window === "undefined") return "light";
		return document.documentElement.classList.contains("dark") ? "dark" : "light";
	});
	React.useEffect(() => {
		if (theme !== "auto") {
			setResolvedTheme(theme);
			return;
		}
		const observer = new MutationObserver(() => {
			setResolvedTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
		});
		observer.observe(document.documentElement, {
			attributes: true,
			attributeFilter: ["class"]
		});
		setResolvedTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
		return () => observer.disconnect();
	}, [theme]);
	return resolvedTheme;
}
var diagramIdCounter = 0;
function AIMermaidDiagram({ code, theme = "auto", caption, interactive = false, maxHeight, className }) {
	const resolvedTheme = useResolvedTheme(theme);
	const [svgContent, setSvgContent] = React.useState(null);
	const [error, setError] = React.useState(null);
	const [isLoading, setIsLoading] = React.useState(true);
	const containerRef = React.useRef(null);
	const idRef = React.useRef(`mermaid-diagram-${++diagramIdCounter}`);
	const [transform, setTransform] = React.useState({
		x: 0,
		y: 0,
		scale: 1
	});
	const [isDragging, setIsDragging] = React.useState(false);
	const dragStartRef = React.useRef({
		x: 0,
		y: 0
	});
	React.useEffect(() => {
		let cancelled = false;
		async function renderDiagram() {
			setIsLoading(true);
			setError(null);
			setSvgContent(null);
			try {
				const mermaid = (await import("mermaid")).default;
				const config = getMermaidConfig(resolvedTheme, containerRef.current);
				mermaid.initialize(config);
				const id = `${idRef.current}-${Date.now()}`;
				const { svg } = await mermaid.render(id, code.trim());
				if (!cancelled) {
					setSvgContent(svg);
					setError(null);
				}
			} catch (err) {
				if (!cancelled) {
					setError(err instanceof Error ? err.message : "Failed to parse diagram");
					setSvgContent(null);
				}
			} finally {
				if (!cancelled) setIsLoading(false);
			}
		}
		renderDiagram();
		return () => {
			cancelled = true;
		};
	}, [code, resolvedTheme]);
	React.useEffect(() => {
		setTransform({
			x: 0,
			y: 0,
			scale: 1
		});
	}, [code]);
	const handleWheel = React.useCallback((e) => {
		if (!interactive) return;
		e.preventDefault();
		const delta = e.deltaY > 0 ? .9 : 1.1;
		const newScale = Math.min(Math.max(transform.scale * delta, .5), 3);
		setTransform((prev) => ({
			...prev,
			scale: newScale
		}));
	}, [interactive, transform.scale]);
	const handleMouseDown = React.useCallback((e) => {
		if (!interactive) return;
		setIsDragging(true);
		dragStartRef.current = {
			x: e.clientX - transform.x,
			y: e.clientY - transform.y
		};
	}, [
		interactive,
		transform.x,
		transform.y
	]);
	const handleMouseMove = React.useCallback((e) => {
		if (!isDragging || !interactive) return;
		setTransform((prev) => ({
			...prev,
			x: e.clientX - dragStartRef.current.x,
			y: e.clientY - dragStartRef.current.y
		}));
	}, [isDragging, interactive]);
	const handleMouseUp = React.useCallback(() => {
		setIsDragging(false);
	}, []);
	const handleReset = React.useCallback(() => {
		setTransform({
			x: 0,
			y: 0,
			scale: 1
		});
	}, []);
	if (isLoading) return /* @__PURE__ */ jsx(DiagramSkeleton, { maxHeight });
	if (error) return /* @__PURE__ */ jsx(DiagramError, {
		code,
		error
	});
	if (!svgContent) return /* @__PURE__ */ jsx(DiagramSkeleton, { maxHeight });
	return /* @__PURE__ */ jsxs("figure", {
		"data-slot": "ai-mermaid-diagram",
		className: cn("space-y-2", className),
		children: [/* @__PURE__ */ jsxs("div", {
			ref: containerRef,
			className: cn("relative overflow-hidden rounded-xl border border-border bg-muted", interactive && "cursor-grab", isDragging && "cursor-grabbing"),
			style: { maxHeight },
			onWheel: handleWheel,
			onMouseDown: handleMouseDown,
			onMouseMove: handleMouseMove,
			onMouseUp: handleMouseUp,
			onMouseLeave: handleMouseUp,
			children: [/* @__PURE__ */ jsx("div", {
				className: cn("flex items-center justify-center p-4", maxHeight && "overflow-auto"),
				...maxHeight ? {
					tabIndex: 0,
					role: "region",
					"aria-label": "Diagram view"
				} : {},
				style: interactive ? {
					transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
					transformOrigin: "center center",
					transition: isDragging ? "none" : "transform 0.1s ease-out"
				} : void 0,
				children: /* @__PURE__ */ jsx("div", {
					className: "[&_svg]:max-w-full [&_svg]:h-auto",
					dangerouslySetInnerHTML: { __html: svgContent },
					"aria-label": "Mermaid diagram",
					role: "img"
				})
			}), interactive && /* @__PURE__ */ jsxs("div", {
				className: "absolute bottom-2 right-2 flex items-center gap-1 bg-card/80 supports-backdrop-filter:backdrop-blur-sm rounded-lg border border-border p-1",
				children: [
					/* @__PURE__ */ jsx("button", {
						type: "button",
						onClick: () => setTransform((prev) => ({
							...prev,
							scale: Math.min(prev.scale * 1.2, 3)
						})),
						className: "p-1.5 rounded hover:bg-muted text-secondary-foreground hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
						"aria-label": "Zoom in",
						children: /* @__PURE__ */ jsx("svg", {
							xmlns: "http://www.w3.org/2000/svg",
							viewBox: "0 0 20 20",
							fill: "currentColor",
							className: "size-4",
							children: /* @__PURE__ */ jsx("path", { d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" })
						})
					}),
					/* @__PURE__ */ jsx("button", {
						type: "button",
						onClick: () => setTransform((prev) => ({
							...prev,
							scale: Math.max(prev.scale * .8, .5)
						})),
						className: "p-1.5 rounded hover:bg-muted text-secondary-foreground hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
						"aria-label": "Zoom out",
						children: /* @__PURE__ */ jsx("svg", {
							xmlns: "http://www.w3.org/2000/svg",
							viewBox: "0 0 20 20",
							fill: "currentColor",
							className: "size-4",
							children: /* @__PURE__ */ jsx("path", {
								fillRule: "evenodd",
								d: "M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z",
								clipRule: "evenodd"
							})
						})
					}),
					/* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border-secondary mx-0.5" }),
					/* @__PURE__ */ jsx("button", {
						type: "button",
						onClick: handleReset,
						className: "p-1.5 rounded hover:bg-muted text-secondary-foreground hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
						"aria-label": "Reset view",
						children: /* @__PURE__ */ jsx("svg", {
							xmlns: "http://www.w3.org/2000/svg",
							viewBox: "0 0 20 20",
							fill: "currentColor",
							className: "size-4",
							children: /* @__PURE__ */ jsx("path", {
								fillRule: "evenodd",
								d: "M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0v2.43l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z",
								clipRule: "evenodd"
							})
						})
					}),
					/* @__PURE__ */ jsxs("span", {
						className: "text-xs text-quaternary-foreground px-1 tabular-nums",
						children: [Math.round(transform.scale * 100), "%"]
					})
				]
			})]
		}), caption && /* @__PURE__ */ jsx("figcaption", {
			className: "text-sm text-muted-foreground text-center px-4",
			children: caption
		})]
	});
}
AIMermaidDiagram.displayName = "AIMermaidDiagram";
//#endregion
export { AIMermaidDiagram as default };

//# sourceMappingURL=index429.js.map