"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const designSystem = require("@choiceform/design-system");
const iconsReact = require("@choiceform/icons-react");
const React = require("react");
const MermaidBlock = React.memo(function MermaidBlock2({
  code,
  className,
  renderMermaid
}) {
  const containerRef = React.useRef(null);
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [showCode, setShowCode] = React.useState(false);
  React.useEffect(() => {
    const renderDiagram = async () => {
      if (!containerRef.current) return;
      try {
        setIsLoading(true);
        setError(null);
        if (renderMermaid) {
          await renderMermaid(code, containerRef.current);
        } else {
          containerRef.current.innerHTML = `
            <div class="flex flex-col items-center justify-center p-8 text-center">
              <svg class="w-12 h-12 mb-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M3 6h18M3 12h18M3 18h18" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <p class="text-body-small text-muted-foreground mb-2">Mermaid diagram detected</p>
              <p class="text-xs text-muted-foreground">Install mermaid to render diagrams</p>
            </div>
          `;
        }
      } catch (err) {
        const message = err instanceof Error ? err.message : "Failed to render diagram";
        setError(message);
        console.error("Mermaid render error:", err);
      } finally {
        setIsLoading(false);
      }
    };
    renderDiagram();
  }, [code, renderMermaid]);
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(code);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  };
  const handleDownload = () => {
    const blob = new Blob([code], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "diagram.mmd";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };
  return /* @__PURE__ */ require$$0.jsxs("div", { className: designSystem.tcx("bg-card relative my-4 overflow-hidden rounded-lg border", className), children: [
    /* @__PURE__ */ require$$0.jsxs("div", { className: "bg-muted/30 flex items-center justify-between border-b px-4 py-2", children: [
      /* @__PURE__ */ require$$0.jsxs("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ require$$0.jsx("span", { className: "text-muted-foreground font-strong text-xs", children: "Mermaid" }),
        /* @__PURE__ */ require$$0.jsx("span", { className: "text-muted-foreground/60 text-[10px]", children: "flowchart" })
      ] }),
      /* @__PURE__ */ require$$0.jsxs("div", { className: "flex items-center gap-1", children: [
        /* @__PURE__ */ require$$0.jsx(
          "button",
          {
            onClick: () => setShowCode(!showCode),
            className: "text-muted-foreground hover:bg-muted hover:text-foreground rounded p-1 transition-colors",
            title: showCode ? "Show diagram" : "Show code",
            children: /* @__PURE__ */ require$$0.jsx(
              "svg",
              {
                className: "h-4 w-4",
                viewBox: "0 0 24 24",
                fill: "none",
                stroke: "currentColor",
                children: /* @__PURE__ */ require$$0.jsx(
                  "path",
                  {
                    d: "M16 18l6-6-6-6M8 6l-6 6 6 6",
                    strokeWidth: "2",
                    strokeLinecap: "round",
                    strokeLinejoin: "round"
                  }
                )
              }
            )
          }
        ),
        /* @__PURE__ */ require$$0.jsx(
          "button",
          {
            onClick: handleCopy,
            className: "text-muted-foreground hover:bg-muted hover:text-foreground rounded p-1 transition-colors",
            title: "Copy code",
            children: /* @__PURE__ */ require$$0.jsx(iconsReact.ClipboardSmall, {})
          }
        ),
        /* @__PURE__ */ require$$0.jsx(
          "button",
          {
            onClick: handleDownload,
            className: "text-muted-foreground hover:bg-muted hover:text-foreground rounded p-1 transition-colors",
            title: "Download",
            children: /* @__PURE__ */ require$$0.jsx(iconsReact.Download, {})
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ require$$0.jsx("div", { className: "relative", children: error ? /* @__PURE__ */ require$$0.jsxs("div", { className: "text-destructive text-body-small flex items-center gap-2 p-4", children: [
      /* @__PURE__ */ require$$0.jsx(iconsReact.WarningSquare, {}),
      /* @__PURE__ */ require$$0.jsx("span", { children: error })
    ] }) : showCode ? /* @__PURE__ */ require$$0.jsx("pre", { className: "overflow-x-auto p-4 text-xs", children: /* @__PURE__ */ require$$0.jsx("code", { className: "language-mermaid", children: code }) }) : /* @__PURE__ */ require$$0.jsxs(require$$0.Fragment, { children: [
      /* @__PURE__ */ require$$0.jsx(
        "div",
        {
          ref: containerRef,
          className: "flex min-h-[200px] items-center justify-center p-4"
        }
      ),
      isLoading && /* @__PURE__ */ require$$0.jsx("div", { className: "bg-background/80 absolute inset-0 flex items-center justify-center backdrop-blur-sm", children: /* @__PURE__ */ require$$0.jsx("div", { className: "border-primary h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" }) })
    ] }) })
  ] });
});
exports.MermaidBlock = MermaidBlock;
//# sourceMappingURL=mermaid-block.cjs.map
