"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card.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";
function getStatusColor(status) {
  if (status >= 200 && status < 300) return "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300";
  if (status >= 300 && status < 400) return "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300";
  if (status >= 400 && status < 500) return "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300";
  return "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300";
}
function ResponseViewer({ status, response, error }) {
  const t = useTranslations("devtools.apiTester");
  if (status === "idle") {
    return /* @__PURE__ */ jsx(Card, { "data-cy": "api-tester-response-idle", children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsx("p", { className: "text-center text-muted-foreground", children: t("responseStates.idle") }) }) });
  }
  if (status === "loading") {
    return /* @__PURE__ */ jsx(Card, { "data-cy": "api-tester-response-loading", children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxs("div", { className: "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("p", { className: "text-muted-foreground", children: t("responseStates.loading") })
    ] }) }) });
  }
  if (status === "error" || status === "cancelled") {
    return /* @__PURE__ */ jsx(Card, { "data-cy": "api-tester-response-error", children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsx("p", { className: "text-center text-destructive", children: error || t("responseStates.error") }) }) });
  }
  if (!response) return null;
  return /* @__PURE__ */ jsxs(Card, { "data-cy": "api-tester-response", children: [
    /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
      /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: t("response") }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ jsxs(
          Badge,
          {
            variant: "secondary",
            className: cn("font-mono", getStatusColor(response.status)),
            "data-cy": "api-tester-response-status",
            children: [
              response.status,
              " ",
              response.statusText
            ]
          }
        ),
        /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", "data-cy": "api-tester-response-time", children: [
          response.timing,
          "ms"
        ] })
      ] })
    ] }) }),
    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "body", className: "w-full", children: [
      /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
        /* @__PURE__ */ jsx(TabsTrigger, { value: "body", "data-cy": "api-tester-response-tab-body", children: t("responseBody") }),
        /* @__PURE__ */ jsxs(TabsTrigger, { value: "headers", "data-cy": "api-tester-response-tab-headers", children: [
          t("responseHeaders"),
          " (",
          Object.keys(response.headers).length,
          ")"
        ] })
      ] }),
      /* @__PURE__ */ jsx(TabsContent, { value: "body", className: "mt-4", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[300px] rounded-md border", children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-sm font-mono", "data-cy": "api-tester-response-body", children: typeof response.body === "object" ? JSON.stringify(response.body, null, 2) : String(response.body) }) }) }),
      /* @__PURE__ */ jsx(TabsContent, { value: "headers", className: "mt-4", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[300px] rounded-md border", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-1", "data-cy": "api-tester-response-headers", children: Object.entries(response.headers).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "font-mono text-sm", children: [
        /* @__PURE__ */ jsxs("span", { className: "text-primary", children: [
          key,
          ":"
        ] }),
        " ",
        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: value })
      ] }, key)) }) }) })
    ] }) })
  ] });
}
export {
  ResponseViewer
};
