"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
import { Badge } from "../../ui/badge.js";
import { ScrollArea } from "../../ui/scroll-area.js";
import { useTranslations } from "next-intl";
import { cn } from "../../../lib/utils/index.js";
import { sel } from "../../../lib/test/index.js";
import { JsonViewerWithControls } from "./JsonViewer.js";
function getStatusColor(status) {
  if (status >= 200 && status < 300) return "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400";
  if (status >= 300 && status < 400) return "bg-blue-500/20 text-blue-600 dark:text-blue-400";
  if (status >= 400 && status < 500) return "bg-amber-500/20 text-amber-600 dark:text-amber-400";
  return "bg-red-500/20 text-red-600 dark:text-red-400";
}
function ApiResponsePanel({ status, response, error }) {
  const t = useTranslations("devtools.apiTester");
  if (status === "idle") {
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panelIdle"), children: [
      /* @__PURE__ */ jsx("div", { className: "p-3 border-b bg-muted/30", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }) }),
      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: t("responseStates.idle") })
    ] });
  }
  if (status === "loading") {
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panelLoading"), children: [
      /* @__PURE__ */ jsx("div", { className: "p-3 border-b bg-muted/30", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center gap-2", children: [
        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("responseStates.loading") })
      ] })
    ] });
  }
  if (status === "error" || status === "cancelled") {
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panelError"), children: [
      /* @__PURE__ */ jsx("div", { className: "p-3 border-b bg-muted/30", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }) }),
      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-destructive text-sm p-4 text-center", children: error || t("responseStates.error") })
    ] });
  }
  if (!response) return null;
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.response.panel"), children: [
    /* @__PURE__ */ jsxs("div", { className: "p-3 border-b bg-muted/30 flex items-center justify-between", children: [
      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Response" }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ jsxs(
          Badge,
          {
            variant: "secondary",
            className: cn("font-mono text-xs", getStatusColor(response.status)),
            "data-cy": sel("devtools.apiExplorer.response.status"),
            children: [
              response.status,
              " ",
              response.statusText
            ]
          }
        ),
        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", "data-cy": sel("devtools.apiExplorer.response.time"), children: [
          response.timing,
          "ms"
        ] }),
        response.size && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: response.size > 1024 ? `${(response.size / 1024).toFixed(1)} KB` : `${response.size} B` })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "body", className: "flex-1 flex flex-col min-h-0", children: [
      /* @__PURE__ */ jsx("div", { className: "border-b px-3", children: /* @__PURE__ */ jsxs(TabsList, { className: "h-8 bg-transparent p-0 border-0", children: [
        /* @__PURE__ */ jsx(
          TabsTrigger,
          {
            value: "body",
            className: "text-xs data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-1.5",
            "data-cy": sel("devtools.apiExplorer.response.tabBody"),
            children: "Body"
          }
        ),
        /* @__PURE__ */ jsxs(
          TabsTrigger,
          {
            value: "headers",
            className: "text-xs data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-1.5",
            "data-cy": sel("devtools.apiExplorer.response.tabHeaders"),
            children: [
              "Headers (",
              Object.keys(response.headers).length,
              ")"
            ]
          }
        )
      ] }) }),
      /* @__PURE__ */ jsx(TabsContent, { value: "body", className: "flex-1 m-0 min-h-0 flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-3", "data-cy": sel("devtools.apiExplorer.response.body"), children: typeof response.body === "object" && response.body !== null ? /* @__PURE__ */ jsx(
        JsonViewerWithControls,
        {
          data: response.body,
          initialExpanded: 2,
          showControls: true
        }
      ) : /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: String(response.body) }) }) }),
      /* @__PURE__ */ jsx(TabsContent, { value: "headers", className: "flex-1 m-0 min-h-0", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx("div", { className: "p-3 space-y-1", "data-cy": sel("devtools.apiExplorer.response.headers"), children: Object.entries(response.headers).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "font-mono text-xs", children: [
        /* @__PURE__ */ jsxs("span", { className: "text-primary", children: [
          key,
          ":"
        ] }),
        " ",
        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: value })
      ] }, key)) }) }) })
    ] })
  ] });
}
export {
  ApiResponsePanel
};
