"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Button } from "../../ui/button.js";
import { Input } from "../../ui/input.js";
import { Alert, AlertDescription } from "../../ui/alert.js";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../ui/card.js";
import { Copy, Eye, EyeOff, CheckCircle, AlertTriangle, X } from "lucide-react";
import { toast } from "sonner";
import { sel } from "../../../lib/test/index.js";
function ApiKeyDisplay({ apiKey, keyName, warning, onClose }) {
  const [isVisible, setIsVisible] = useState(false);
  const [copied, setCopied] = useState(false);
  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(apiKey);
      setCopied(true);
      toast.success("API key copied to clipboard");
      setTimeout(() => setCopied(false), 3e3);
    } catch {
      toast.error("Failed to copy to clipboard");
    }
  };
  const maskedKey = apiKey.substring(0, 16) + "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
  return /* @__PURE__ */ jsxs(Card, { className: "border-green-200 bg-green-50", "data-cy": sel("settings.apiKeys.newKeyDisplay.container"), children: [
    /* @__PURE__ */ jsxs(CardHeader, { children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(CheckCircle, { className: "h-5 w-5 text-green-600" }),
          /* @__PURE__ */ jsx(CardTitle, { className: "text-green-800", children: "API Key creada exitosamente" })
        ] }),
        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
      ] }),
      keyName && /* @__PURE__ */ jsx(CardDescription, { className: "text-green-700", children: keyName })
    ] }),
    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
      warning && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
        /* @__PURE__ */ jsxs(AlertDescription, { children: [
          /* @__PURE__ */ jsx("strong", { children: "\xA1Importante!" }),
          " ",
          warning
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-green-800", children: "Tu nueva API Key:" }),
        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
          /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
            /* @__PURE__ */ jsx(
              Input,
              {
                type: isVisible ? "text" : "password",
                value: isVisible ? apiKey : maskedKey,
                readOnly: true,
                className: "font-mono text-sm pr-10"
              }
            ),
            /* @__PURE__ */ jsx(
              Button,
              {
                type: "button",
                variant: "ghost",
                size: "sm",
                className: "absolute right-1 top-1 h-8 w-8 p-0",
                onClick: () => setIsVisible(!isVisible),
                children: isVisible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
              }
            )
          ] }),
          /* @__PURE__ */ jsxs(
            Button,
            {
              onClick: copyToClipboard,
              variant: copied ? "default" : "outline",
              className: "shrink-0",
              "data-cy": sel("settings.apiKeys.newKeyDisplay.copyButton"),
              children: [
                /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2" }),
                copied ? "Copiado!" : "Copiar"
              ]
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-green-800", children: "C\xF3mo usar tu API Key:" }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("strong", { children: "1. Incluye la API key en el header Authorization:" }),
            /* @__PURE__ */ jsxs("div", { className: "mt-1 p-2 bg-gray-100 rounded font-mono text-xs overflow-x-auto", children: [
              "Authorization: Bearer ",
              isVisible ? apiKey : "sk_live_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("strong", { children: "2. Ejemplo con curl:" }),
            /* @__PURE__ */ jsx("div", { className: "mt-1 p-2 bg-gray-100 rounded font-mono text-xs overflow-x-auto", children: `curl -H "Authorization: Bearer ${isVisible ? apiKey : "YOUR_API_KEY"}" \\
     https://yourapp.com/api/v1/users` })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("strong", { children: "3. Ejemplo con JavaScript:" }),
            /* @__PURE__ */ jsx("div", { className: "mt-1 p-2 bg-gray-100 rounded font-mono text-xs overflow-x-auto", children: `fetch('/api/v1/users', {
  headers: {
    'Authorization': 'Bearer ${isVisible ? apiKey : "YOUR_API_KEY"}',
    'Content-Type': 'application/json'
  }
})` })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-green-800", children: "Consejos de seguridad:" }),
        /* @__PURE__ */ jsxs("ul", { className: "text-sm text-green-700 space-y-1 list-disc list-inside", children: [
          /* @__PURE__ */ jsx("li", { children: "Nunca compartas tu API key p\xFAblicamente" }),
          /* @__PURE__ */ jsx("li", { children: "Gu\xE1rdala como variable de entorno en tu aplicaci\xF3n" }),
          /* @__PURE__ */ jsx("li", { children: "Revoca la key inmediatamente si crees que est\xE1 comprometida" }),
          /* @__PURE__ */ jsx("li", { children: "Usa HTTPS siempre al hacer requests a la API" })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "p-3 bg-blue-50 rounded-lg border border-blue-200", children: [
        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-blue-800 mb-1", children: "L\xEDmites de la API:" }),
        /* @__PURE__ */ jsxs("div", { className: "text-sm text-blue-700 space-y-1", children: [
          /* @__PURE__ */ jsx("div", { children: "\u2022 1,000 requests por minuto" }),
          /* @__PURE__ */ jsx("div", { children: "\u2022 Headers de rate limiting incluidos en respuestas" }),
          /* @__PURE__ */ jsx("div", { children: "\u2022 Documentaci\xF3n completa disponible en /docs" })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-2", children: [
        /* @__PURE__ */ jsxs(
          Button,
          {
            onClick: copyToClipboard,
            variant: copied ? "default" : "outline",
            className: "flex-1",
            children: [
              /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2" }),
              copied ? "API Key Copiada!" : "Copiar API Key"
            ]
          }
        ),
        /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "outline", children: "Entendido" })
      ] })
    ] })
  ] });
}
export {
  ApiKeyDisplay
};
