"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { BookOpen, Loader2 } from "lucide-react";
import { Button } from "../../ui/button.js";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from "../../ui/dialog.js";
import { ScrollArea } from "../../ui/scroll-area.js";
import { sel } from "../../../lib/test/index.js";
function ApiDocsModal({ docPath, title }) {
  const [content, setContent] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [isOpen, setIsOpen] = useState(false);
  useEffect(() => {
    if (isOpen && docPath && !content) {
      setIsLoading(true);
      setError(null);
      fetch(`/api/v1/devtools/docs?path=${encodeURIComponent(docPath)}`).then((res) => {
        if (!res.ok) throw new Error("Failed to load documentation");
        return res.json();
      }).then((data) => {
        setContent(data.content);
        setIsLoading(false);
      }).catch((err) => {
        setError(err.message || "Error loading documentation");
        setIsLoading(false);
      });
    }
  }, [isOpen, docPath, content]);
  useEffect(() => {
    setContent(null);
    setError(null);
  }, [docPath]);
  if (!docPath) return null;
  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: [
    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "outline",
        size: "sm",
        "data-cy": sel("devtools.apiExplorer.docsBtn"),
        children: [
          /* @__PURE__ */ jsx(BookOpen, { className: "h-4 w-4 mr-2" }),
          "Docs"
        ]
      }
    ) }),
    /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-3xl max-h-[80vh] overflow-hidden flex flex-col", children: [
      /* @__PURE__ */ jsx(DialogHeader, { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }),
      /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "pr-4", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-destructive", children: /* @__PURE__ */ jsx("p", { children: error }) }) : content ? /* @__PURE__ */ jsx(MarkdownRenderer, { content }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground p-4", children: "No documentation available" }) }) })
    ] })
  ] });
}
function MarkdownRenderer({ content }) {
  const renderMarkdown = (md) => {
    let html = md.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/^### (.+)$/gm, '<h3 class="text-lg font-semibold mt-6 mb-2">$1</h3>').replace(/^## (.+)$/gm, '<h2 class="text-xl font-semibold mt-8 mb-3">$1</h2>').replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold mt-8 mb-4">$1</h1>').replace(/```(\w*)\n([\s\S]*?)```/g, (_match, _lang, code) => {
      return `<pre class="bg-muted p-4 rounded-lg overflow-x-auto my-4 text-sm"><code>${code.trim()}</code></pre>`;
    }).replace(/`([^`]+)`/g, '<code class="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">$1</code>').replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-primary underline" target="_blank" rel="noopener">$1</a>').replace(/^- (.+)$/gm, '<li class="ml-4">$1</li>').replace(/\n\n/g, '</p><p class="my-3">').replace(/\n/g, "<br />");
    html = `<p class="my-3">${html}</p>`;
    html = html.replace(/(<li[^>]*>.*?<\/li>)+/g, '<ul class="list-disc my-3">$&</ul>');
    return html;
  };
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: "prose prose-sm dark:prose-invert max-w-none",
      dangerouslySetInnerHTML: { __html: renderMarkdown(content) }
    }
  );
}
export {
  ApiDocsModal
};
