"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Play, Eye, BookOpen } from "lucide-react";
import { Button } from "../../ui/button.js";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
import { Badge } from "../../ui/badge.js";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter
} from "../../ui/dialog.js";
import { ScrollArea } from "../../ui/scroll-area.js";
import { sel } from "../../../lib/test/index.js";
function PresetsTab({ endpointPresets, currentMethod, onApplyPreset }) {
  const [selectedPreset, setSelectedPreset] = useState(null);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  if (!endpointPresets || endpointPresets.presets.length === 0) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground",
        "data-cy": sel("devtools.apiExplorer.presets.empty"),
        children: [
          /* @__PURE__ */ jsx(BookOpen, { className: "h-12 w-12 mb-4 opacity-50" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No presets available for this endpoint" }),
          /* @__PURE__ */ jsxs("p", { className: "text-xs mt-2", children: [
            "Create presets in ",
            /* @__PURE__ */ jsx("code", { className: "bg-muted px-1 rounded", children: "devtools/api/" })
          ] })
        ]
      }
    );
  }
  const filteredPresets = endpointPresets.presets.filter(
    (p) => p.method === currentMethod
  );
  const handleApplyPreset = (preset) => {
    onApplyPreset(preset);
    setIsDetailOpen(false);
  };
  return /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", "data-cy": sel("devtools.apiExplorer.presets.tab"), children: [
    endpointPresets.summary && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: endpointPresets.summary }),
    filteredPresets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground p-4 bg-muted/30 rounded-lg", children: [
      /* @__PURE__ */ jsxs("p", { children: [
        "No presets for ",
        /* @__PURE__ */ jsx("strong", { children: currentMethod }),
        " method."
      ] }),
      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs", children: [
        "Available methods:",
        " ",
        [...new Set(endpointPresets.presets.map((p) => p.method))].join(", ")
      ] })
    ] }) : /* @__PURE__ */ jsx("div", { className: "grid gap-3 grid-cols-1 sm:grid-cols-2", children: filteredPresets.map((preset) => /* @__PURE__ */ jsxs(
      Card,
      {
        className: "hover:border-primary/50 transition-colors",
        "data-cy": sel("devtools.apiExplorer.presets.card", { id: preset.id }),
        children: [
          /* @__PURE__ */ jsx(CardHeader, { className: "p-4 pb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
              /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium truncate", children: preset.title }),
              preset.description && /* @__PURE__ */ jsx(CardDescription, { className: "text-xs mt-1 line-clamp-2", children: preset.description })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-1 shrink-0", children: [
              /* @__PURE__ */ jsxs(Dialog, { open: isDetailOpen && (selectedPreset == null ? void 0 : selectedPreset.id) === preset.id, onOpenChange: (open) => {
                setIsDetailOpen(open);
                if (open) setSelectedPreset(preset);
              }, children: [
                /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "ghost",
                    size: "icon",
                    className: "h-8 w-8",
                    "data-cy": sel("devtools.apiExplorer.presets.viewBtn", { id: preset.id }),
                    children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
                  }
                ) }),
                /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl", children: [
                  /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: preset.title }) }),
                  /* @__PURE__ */ jsx(PresetDetails, { preset }),
                  /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs(Button, { onClick: () => handleApplyPreset(preset), children: [
                    /* @__PURE__ */ jsx(Play, { className: "h-4 w-4 mr-2" }),
                    "Apply Preset"
                  ] }) })
                ] })
              ] }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  size: "icon",
                  className: "h-8 w-8",
                  onClick: () => handleApplyPreset(preset),
                  "data-cy": sel("devtools.apiExplorer.presets.applyBtn", { id: preset.id }),
                  children: /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" })
                }
              )
            ] })
          ] }) }),
          preset.tags && preset.tags.length > 0 && /* @__PURE__ */ jsx(CardContent, { className: "p-4 pt-0", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: preset.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) }) })
        ]
      },
      preset.id
    )) }),
    filteredPresets.length < endpointPresets.presets.length && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-4", children: [
      endpointPresets.presets.length - filteredPresets.length,
      " more preset(s) available for other methods"
    ] })
  ] });
}
function PresetDetails({ preset }) {
  return /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[60vh]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 pr-4", children: [
    preset.description && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-1", children: "Description" }),
      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: preset.description })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Method:" }),
      /* @__PURE__ */ jsx(Badge, { variant: "outline", children: preset.method })
    ] }),
    preset.pathParams && Object.keys(preset.pathParams).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Path Parameters" }),
      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.pathParams, null, 2) })
    ] }),
    preset.params && Object.keys(preset.params).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Query Parameters" }),
      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.params, null, 2) })
    ] }),
    preset.headers && Object.keys(preset.headers).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Headers" }),
      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.headers, null, 2) })
    ] }),
    preset.payload && Object.keys(preset.payload).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Request Body" }),
      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.payload, null, 2) })
    ] }),
    preset.sessionConfig && Object.keys(preset.sessionConfig).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Session Config" }),
      /* @__PURE__ */ jsx("pre", { className: "bg-muted p-3 rounded-md text-xs overflow-x-auto", children: JSON.stringify(preset.sessionConfig, null, 2) })
    ] }),
    preset.tags && preset.tags.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Tags" }),
      /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: preset.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: tag }, tag)) })
    ] })
  ] }) });
}
export {
  PresetsTab
};
