"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "@open-mercato/shared/lib/utils";
import { Button } from "../primitives/button.js";
import { Check, Copy, ChevronRight, ChevronDown } from "lucide-react";
function JsonDisplay({
  data,
  title,
  className,
  defaultExpanded = false,
  maxInitialDepth = 2,
  theme = "light",
  showCopy = true,
  maxHeight
}) {
  const [copied, setCopied] = React.useState(false);
  const jsonString = React.useMemo(() => {
    try {
      return JSON.stringify(data, null, 2);
    } catch (err) {
      return String(data);
    }
  }, [data]);
  const handleCopy = React.useCallback(async () => {
    try {
      await navigator.clipboard.writeText(jsonString);
      setCopied(true);
      setTimeout(() => setCopied(false), 2e3);
    } catch (err) {
      console.error("Failed to copy to clipboard:", err);
    }
  }, [jsonString]);
  const containerClasses = cn(
    "rounded-lg border bg-card p-6",
    className
  );
  return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
    (title || showCopy) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title }),
      showCopy && /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          onClick: handleCopy,
          className: "h-7 px-2",
          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 mr-1" }),
            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Copied" })
          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3 mr-1" }),
            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Copy" })
          ] })
        }
      )
    ] }),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: "bg-muted p-4 rounded overflow-x-auto font-mono text-sm",
        style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0,
        children: /* @__PURE__ */ jsx(
          JsonNode,
          {
            data,
            depth: 0,
            maxInitialDepth: defaultExpanded ? Infinity : maxInitialDepth,
            theme
          }
        )
      }
    )
  ] });
}
const JsonNode = React.memo(({ data, depth, maxInitialDepth, theme, isLast = true, parentKey }) => {
  const [isExpanded, setIsExpanded] = React.useState(depth < maxInitialDepth);
  const indent = depth * 16;
  const themeClasses = {
    key: theme === "light" ? "text-blue-600" : "text-blue-400",
    string: theme === "light" ? "text-green-600" : "text-green-400",
    number: theme === "light" ? "text-purple-600" : "text-purple-400",
    boolean: theme === "light" ? "text-orange-600" : "text-orange-400",
    null: "text-muted-foreground",
    punctuation: "text-muted-foreground"
  };
  if (data === null) {
    return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: "null" });
  }
  if (data === void 0) {
    return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: "undefined" });
  }
  if (typeof data === "string") {
    return /* @__PURE__ */ jsxs("span", { className: themeClasses.string, children: [
      '"',
      data,
      '"'
    ] });
  }
  if (typeof data === "number") {
    return /* @__PURE__ */ jsx("span", { className: themeClasses.number, children: data });
  }
  if (typeof data === "boolean") {
    return /* @__PURE__ */ jsx("span", { className: themeClasses.boolean, children: String(data) });
  }
  if (Array.isArray(data)) {
    if (data.length === 0) {
      return /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "[]" });
    }
    return /* @__PURE__ */ jsxs("span", { children: [
      /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          className: "h-auto px-1 -mx-1",
          onClick: () => setIsExpanded(!isExpanded),
          children: [
            isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 mr-1" }),
            /* @__PURE__ */ jsxs("span", { className: themeClasses.punctuation, children: [
              "[",
              data.length,
              "]"
            ] })
          ]
        }
      ),
      isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("br", {}),
        data.map((item, index) => /* @__PURE__ */ jsxs("div", { style: { paddingLeft: `${indent + 16}px` }, children: [
          /* @__PURE__ */ jsx(
            JsonNode,
            {
              data: item,
              depth: depth + 1,
              maxInitialDepth,
              theme,
              isLast: index === data.length - 1
            }
          ),
          index < data.length - 1 && /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "," }),
          /* @__PURE__ */ jsx("br", {})
        ] }, index)),
        /* @__PURE__ */ jsx("span", { style: { paddingLeft: `${indent}px` }, className: themeClasses.punctuation, children: "]" })
      ] })
    ] });
  }
  if (typeof data === "object") {
    const entries = Object.entries(data);
    if (entries.length === 0) {
      return /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "{}" });
    }
    return /* @__PURE__ */ jsxs("span", { children: [
      /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          className: "h-auto px-1 -mx-1",
          onClick: () => setIsExpanded(!isExpanded),
          children: [
            isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 mr-1" }),
            /* @__PURE__ */ jsxs("span", { className: themeClasses.punctuation, children: [
              "{",
              entries.length,
              "}"
            ] })
          ]
        }
      ),
      isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("br", {}),
        entries.map(([key, value], index) => /* @__PURE__ */ jsxs("div", { style: { paddingLeft: `${indent + 16}px` }, children: [
          /* @__PURE__ */ jsxs("span", { className: themeClasses.key, children: [
            '"',
            key,
            '"'
          ] }),
          /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: ": " }),
          /* @__PURE__ */ jsx(
            JsonNode,
            {
              data: value,
              depth: depth + 1,
              maxInitialDepth,
              theme,
              isLast: index === entries.length - 1,
              parentKey: key
            }
          ),
          index < entries.length - 1 && /* @__PURE__ */ jsx("span", { className: themeClasses.punctuation, children: "," }),
          /* @__PURE__ */ jsx("br", {})
        ] }, key)),
        /* @__PURE__ */ jsx("span", { style: { paddingLeft: `${indent}px` }, className: themeClasses.punctuation, children: "}" })
      ] })
    ] });
  }
  return /* @__PURE__ */ jsx("span", { className: themeClasses.null, children: String(data) });
});
JsonNode.displayName = "JsonNode";
export {
  JsonDisplay
};
//# sourceMappingURL=JsonDisplay.js.map
