"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect, memo } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
import { Button } from "../ui/button.js";
import { Copy, Check, Loader2, AlertCircle, Settings, Database, Code } from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "../ui/accordion.js";
import { codeToHtml } from "shiki";
import { useTranslations } from "next-intl";
import { sel } from "../../lib/test/index.js";
const JsonViewer = memo(function JsonViewer2({ data, fontSize = "0.875rem" }) {
  const [html, setHtml] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const jsonString = JSON.stringify(data, null, 2);
  useEffect(() => {
    let mounted = true;
    codeToHtml(jsonString, {
      lang: "json",
      theme: "github-dark"
    }).then((result) => {
      if (mounted) {
        setHtml(result);
        setIsLoading(false);
      }
    }).catch(() => {
      if (mounted) {
        setHtml("");
        setIsLoading(false);
      }
    });
    return () => {
      mounted = false;
    };
  }, [jsonString]);
  if (isLoading) {
    return /* @__PURE__ */ jsx(
      "pre",
      {
        className: "bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto",
        style: { fontSize },
        children: /* @__PURE__ */ jsx("code", { children: jsonString })
      }
    );
  }
  if (!html) {
    return /* @__PURE__ */ jsx(
      "pre",
      {
        className: "bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto",
        style: { fontSize },
        children: /* @__PURE__ */ jsx("code", { children: jsonString })
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: "[&_pre]:!m-0 [&_pre]:!rounded-lg [&_pre]:!p-4 overflow-x-auto",
      style: { fontSize },
      dangerouslySetInnerHTML: { __html: html }
    }
  );
});
function ConfigViewer() {
  const t = useTranslations("devtools.config");
  const [themeConfig, setThemeConfig] = useState(null);
  const [entities, setEntities] = useState([]);
  const [isLoadingTheme, setIsLoadingTheme] = useState(true);
  const [isLoadingEntities, setIsLoadingEntities] = useState(true);
  const [error, setError] = useState(null);
  const [copiedSection, setCopiedSection] = useState(null);
  useEffect(() => {
    async function loadThemeConfig() {
      try {
        setIsLoadingTheme(true);
        const response = await fetch("/api/devtools/config/theme");
        const data = await response.json();
        if (!response.ok) {
          throw new Error(data.error || "Failed to load theme config");
        }
        setThemeConfig(data.data.config);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to load theme config");
      } finally {
        setIsLoadingTheme(false);
      }
    }
    loadThemeConfig();
  }, []);
  useEffect(() => {
    async function loadEntities() {
      try {
        setIsLoadingEntities(true);
        const response = await fetch("/api/devtools/config/entities");
        const data = await response.json();
        if (!response.ok) {
          throw new Error(data.error || "Failed to load entities");
        }
        setEntities(data.data.entities);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to load entities");
      } finally {
        setIsLoadingEntities(false);
      }
    }
    loadEntities();
  }, []);
  const copyToClipboard = (text, section) => {
    navigator.clipboard.writeText(text);
    setCopiedSection(section);
    setTimeout(() => setCopiedSection(null), 2e3);
  };
  if (error) {
    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col items-center justify-center py-12", children: [
      /* @__PURE__ */ jsx(AlertCircle, { className: "h-16 w-16 text-destructive mb-4" }),
      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-destructive", children: t("error") }),
      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-2", children: error })
    ] }) });
  }
  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: "theme", className: "space-y-6", "data-cy": sel("devtools.config.viewer"), children: [
    /* @__PURE__ */ jsxs(TabsList, { children: [
      /* @__PURE__ */ jsxs(TabsTrigger, { value: "theme", "data-cy": sel("devtools.config.tabTheme"), children: [
        /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 mr-2" }),
        t("tabs.theme")
      ] }),
      /* @__PURE__ */ jsxs(TabsTrigger, { value: "entities", "data-cy": sel("devtools.config.tabEntities"), children: [
        /* @__PURE__ */ jsx(Database, { className: "h-4 w-4 mr-2" }),
        t("tabs.entities")
      ] })
    ] }),
    /* @__PURE__ */ jsx(TabsContent, { value: "theme", "data-cy": sel("devtools.config.themeContent"), children: /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(Settings, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
            t("themeTitle")
          ] }),
          /* @__PURE__ */ jsx(CardDescription, { children: t("themeDescription") })
        ] }),
        themeConfig && /* @__PURE__ */ jsxs(
          Button,
          {
            variant: "outline",
            size: "sm",
            onClick: () => copyToClipboard(JSON.stringify(themeConfig, null, 2), "theme"),
            "data-cy": sel("devtools.config.copyTheme"),
            children: [
              copiedSection === "theme" ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2" }),
              copiedSection === "theme" ? t("copied") : t("copy")
            ]
          }
        )
      ] }) }),
      /* @__PURE__ */ jsx(CardContent, { children: isLoadingTheme ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-violet-600 dark:text-violet-400" }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx(JsonViewer, { data: themeConfig }) }) })
    ] }) }),
    /* @__PURE__ */ jsx(TabsContent, { value: "entities", "data-cy": sel("devtools.config.entitiesContent"), children: /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(Database, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
            t("entitiesTitle")
          ] }),
          /* @__PURE__ */ jsx(CardDescription, { children: t("entitiesDescription", { count: entities.length }) })
        ] }),
        entities.length > 0 && /* @__PURE__ */ jsxs(
          Button,
          {
            variant: "outline",
            size: "sm",
            onClick: () => copyToClipboard(JSON.stringify(entities, null, 2), "entities"),
            "data-cy": sel("devtools.config.copyEntities"),
            children: [
              copiedSection === "entities" ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2" }),
              copiedSection === "entities" ? t("copied") : t("copy")
            ]
          }
        )
      ] }) }),
      /* @__PURE__ */ jsx(CardContent, { children: isLoadingEntities ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-violet-600 dark:text-violet-400" }) }) : /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: entities.map((entity) => {
        var _a;
        return /* @__PURE__ */ jsxs(AccordionItem, { value: entity.slug, children: [
          /* @__PURE__ */ jsx(AccordionTrigger, { className: "hover:no-underline", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-violet-600 dark:text-violet-400" }),
            /* @__PURE__ */ jsx("span", { className: "font-medium", children: entity.name }),
            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
              "(",
              entity.slug,
              ")"
            ] }),
            /* @__PURE__ */ jsxs("span", { className: "text-xs bg-muted px-2 py-0.5 rounded ml-2", children: [
              ((_a = entity.fields) == null ? void 0 : _a.length) || 0,
              " fields"
            ] })
          ] }) }),
          /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg overflow-hidden mt-2", children: /* @__PURE__ */ jsx(JsonViewer, { data: entity, fontSize: "0.75rem" }) }) })
        ] }, entity.slug);
      }) }) })
    ] }) })
  ] });
}
export {
  ConfigViewer
};
