"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect, useCallback } from "react";
import { Button } from "@open-mercato/ui/primitives/button";
import { IconButton } from "@open-mercato/ui/primitives/icon-button";
import { useUmesDevTools } from "./useUmesDevTools.js";
import { ExtensionPointList } from "./components/ExtensionPointList.js";
import { ConflictWarnings } from "./components/ConflictWarnings.js";
import { EnricherTiming } from "./components/EnricherTiming.js";
import { InterceptorActivity } from "./components/InterceptorActivity.js";
import { EventFlow } from "./components/EventFlow.js";
const isDevToolsEnabled = process.env.NEXT_PUBLIC_UMES_DEVTOOLS === "true";
const TABS = [
  { id: "extensions", label: "Extensions" },
  { id: "conflicts", label: "Conflicts" },
  { id: "timing", label: "Timing" },
  { id: "interceptors", label: "Interceptors" },
  { id: "events", label: "Events" }
];
function UmesDevToolsPanel() {
  const [isOpen, setIsOpen] = useState(false);
  const [activeTab, setActiveTab] = useState("extensions");
  const data = useUmesDevTools(isOpen);
  const handleKeyDown = useCallback((event) => {
    if (event.ctrlKey && event.shiftKey && event.key === "U") {
      event.preventDefault();
      setIsOpen((prev) => !prev);
    }
  }, []);
  useEffect(() => {
    if (!isDevToolsEnabled) return;
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [handleKeyDown]);
  if (!isDevToolsEnabled || !isOpen) return null;
  const conflictCount = data.conflicts.length;
  const hasErrors = data.conflicts.some((c) => c.severity === "error");
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: "fixed inset-y-0 right-0 z-[9999] flex w-[440px] flex-col border-l bg-background text-foreground shadow-lg",
      style: { fontSize: "13px" },
      children: [
        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx("strong", { className: "text-sm", children: "UMES DevTools" }),
            /* @__PURE__ */ jsxs("span", { className: "rounded bg-blue-100 px-1.5 py-px text-[10px] font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-300", children: [
              data.extensions.length,
              " ext"
            ] }),
            conflictCount > 0 && /* @__PURE__ */ jsxs("span", { className: `rounded px-1.5 py-px text-[10px] font-semibold ${hasErrors ? "bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-400" : "bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-400"}`, children: [
              conflictCount,
              " conflict",
              conflictCount !== 1 ? "s" : ""
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(
              Button,
              {
                type: "button",
                variant: "outline",
                size: "sm",
                className: "h-auto px-2 py-0.5 text-[11px]",
                onClick: () => data.refresh(),
                children: "Refresh"
              }
            ),
            /* @__PURE__ */ jsx(
              IconButton,
              {
                type: "button",
                variant: "ghost",
                size: "xs",
                onClick: () => setIsOpen(false),
                "aria-label": "Close DevTools",
                children: /* @__PURE__ */ jsx("span", { className: "text-lg leading-none", children: "\xD7" })
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 border-b bg-muted/50", children: TABS.map((tab) => /* @__PURE__ */ jsx(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            className: `h-auto flex-1 rounded-none border-b-2 px-1 py-2 text-[11px] hover:bg-transparent ${activeTab === tab.id ? "border-primary font-semibold text-primary" : "border-transparent text-muted-foreground"}`,
            onClick: () => setActiveTab(tab.id),
            children: tab.label
          },
          tab.id
        )) }),
        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-3 px-4", children: [
          activeTab === "extensions" && /* @__PURE__ */ jsx(ExtensionPointList, { extensions: data.extensions }),
          activeTab === "conflicts" && /* @__PURE__ */ jsx(ConflictWarnings, { conflicts: data.conflicts }),
          activeTab === "timing" && /* @__PURE__ */ jsx(EnricherTiming, { entries: data.enricherTimings }),
          activeTab === "interceptors" && /* @__PURE__ */ jsx(InterceptorActivity, { entries: data.interceptorActivity }),
          activeTab === "events" && /* @__PURE__ */ jsx(EventFlow, { entries: data.eventFlow })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t bg-muted/50 px-4 py-1.5 text-center text-[10px] text-muted-foreground", children: "Ctrl+Shift+U to toggle | Dev mode only" })
      ]
    }
  );
}
export {
  UmesDevToolsPanel
};
//# sourceMappingURL=UmesDevToolsPanel.js.map
