"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useState } from "react";
import { Copy, RefreshCw, AlertTriangle, Check, Settings } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "@open-mercato/ui/primitives/dialog";
import { Button } from "@open-mercato/ui/primitives/button";
import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function McpConfigDialog({ open, onOpenChange, mcpUrl }) {
  const t = useT();
  const [apiKey, setApiKey] = useState(null);
  const [isGenerating, setIsGenerating] = useState(false);
  const [copiedConfig, setCopiedConfig] = useState(false);
  const [copiedKey, setCopiedKey] = useState(false);
  const [error, setError] = useState(null);
  const generateApiKey = async () => {
    setIsGenerating(true);
    setError(null);
    try {
      const res = await apiCall("/api/api_keys/keys", {
        method: "POST",
        body: JSON.stringify({
          name: `MCP Config - ${(/* @__PURE__ */ new Date()).toLocaleDateString()}`,
          description: "Generated from AI Assistant settings for MCP client"
        })
      });
      if (res.ok && res.result?.secret) {
        setApiKey(res.result.secret);
      } else {
        setError(t("ai_assistant.mcp.error.failed"));
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : t("ai_assistant.mcp.error.failed"));
    } finally {
      setIsGenerating(false);
    }
  };
  const mcpConfig = {
    mcpServers: {
      "open-mercato": {
        type: "http",
        url: `${mcpUrl}/mcp`,
        headers: {
          "x-api-key": apiKey || "omk_xxxx.yyyy..."
        }
      }
    }
  };
  const configJson = JSON.stringify(mcpConfig, null, 2);
  const copyConfig = async () => {
    await navigator.clipboard.writeText(configJson);
    setCopiedConfig(true);
    setTimeout(() => setCopiedConfig(false), 2e3);
  };
  const copyKey = async () => {
    if (apiKey) {
      await navigator.clipboard.writeText(apiKey);
      setCopiedKey(true);
      setTimeout(() => setCopiedKey(false), 2e3);
    }
  };
  const handleKeyDown = React.useCallback(
    (event) => {
      if (event.key === "Escape") {
        event.preventDefault();
        onOpenChange(false);
      }
    },
    [onOpenChange]
  );
  const handleClose = () => {
    setApiKey(null);
    setError(null);
    setCopiedConfig(false);
    setCopiedKey(false);
    onOpenChange(false);
  };
  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { onKeyDown: handleKeyDown, className: "sm:max-w-2xl", children: [
    /* @__PURE__ */ jsxs(DialogHeader, { children: [
      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ jsx(Settings, { className: "h-5 w-5" }),
        t("ai_assistant.mcp.title")
      ] }),
      /* @__PURE__ */ jsx(DialogDescription, { children: t("ai_assistant.mcp.description") })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
      /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("pre", { className: "bg-muted/50 rounded-lg p-4 text-xs font-mono overflow-x-auto border", children: configJson }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("ai_assistant.mcp.apiKeyLabel") }),
        apiKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsxs("code", { className: "text-xs bg-muted px-2 py-1 rounded font-mono truncate max-w-[200px]", children: [
            apiKey.slice(0, 16),
            "..."
          ] }),
          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: copyKey, className: "gap-1.5", children: [
            copiedKey ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }),
            copiedKey ? t("ai_assistant.mcp.copied") : t("ai_assistant.mcp.copyKey")
          ] })
        ] }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground italic", children: t("ai_assistant.mcp.notGenerated") }),
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: "outline",
            size: "sm",
            onClick: generateApiKey,
            disabled: isGenerating,
            className: "gap-1.5",
            children: [
              /* @__PURE__ */ jsx(RefreshCw, { className: `h-3.5 w-3.5 ${isGenerating ? "animate-spin" : ""}` }),
              apiKey ? t("ai_assistant.mcp.generateNew") : t("ai_assistant.mcp.generateApiKey")
            ]
          }
        )
      ] }),
      error && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive", children: [
        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
        error
      ] }),
      apiKey && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 bg-status-warning-bg rounded-lg border border-status-warning-border", children: [
        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-status-warning-icon mt-0.5 shrink-0" }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-status-warning-text", children: t("ai_assistant.mcp.saveKeyWarning") })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(DialogFooter, { children: [
      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleClose, children: t("ai_assistant.mcp.close") }),
      /* @__PURE__ */ jsxs(Button, { onClick: copyConfig, className: "gap-1.5", children: [
        copiedConfig ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }),
        copiedConfig ? t("ai_assistant.mcp.copied") : t("ai_assistant.mcp.copyConfig")
      ] })
    ] })
  ] }) });
}
export {
  McpConfigDialog as default
};
//# sourceMappingURL=McpConfigDialog.js.map
