import React, { useState, useMemo } from 'react';

// src/qqbot/ui/web/NapCatConsole.tsx
var panelStyle = {
  border: "1px solid #d9e2ec",
  borderRadius: 12,
  padding: 16,
  display: "grid",
  gap: 12,
  background: "linear-gradient(145deg, #fffef9, #f3f8ff)",
  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.08)"
};
var NapCatConsole = ({
  endpoint,
  initialAction = "send_group_msg",
  request = fetch
}) => {
  const [action, setAction] = useState(initialAction);
  const [payloadText, setPayloadText] = useState('{\n  "group_id": 123456,\n  "message": "Hello from sa2kit"\n}');
  const [result, setResult] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const prettyResult = useMemo(() => {
    if (!result) return "";
    return JSON.stringify(result, null, 2);
  }, [result]);
  const onSubmit = async () => {
    setSubmitting(true);
    try {
      const payload = JSON.parse(payloadText);
      const response = await request(`${endpoint}/action/${action}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });
      const body = await response.json();
      setResult(body);
    } catch (error) {
      setResult({
        ok: false,
        error: error instanceof Error ? error.message : "Request failed"
      });
    } finally {
      setSubmitting(false);
    }
  };
  return /* @__PURE__ */ React.createElement("section", { style: panelStyle }, /* @__PURE__ */ React.createElement("h3", { style: { margin: 0, fontSize: 20, fontFamily: "Avenir Next, Helvetica, sans-serif" } }, "NapCat QQ Bot Console"), /* @__PURE__ */ React.createElement("label", { style: { display: "grid", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 600 } }, "OneBot Action"), /* @__PURE__ */ React.createElement(
    "input",
    {
      value: action,
      onChange: (event) => setAction(event.target.value),
      placeholder: "send_group_msg",
      style: { border: "1px solid #bcccdc", borderRadius: 8, padding: "10px 12px" }
    }
  )), /* @__PURE__ */ React.createElement("label", { style: { display: "grid", gap: 6 } }, /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 600 } }, "JSON Payload"), /* @__PURE__ */ React.createElement(
    "textarea",
    {
      rows: 8,
      value: payloadText,
      onChange: (event) => setPayloadText(event.target.value),
      style: { border: "1px solid #bcccdc", borderRadius: 8, padding: "10px 12px", fontFamily: "Menlo, monospace" }
    }
  )), /* @__PURE__ */ React.createElement(
    "button",
    {
      type: "button",
      onClick: onSubmit,
      disabled: submitting,
      style: {
        border: 0,
        borderRadius: 8,
        padding: "10px 14px",
        cursor: submitting ? "not-allowed" : "pointer",
        color: "#fff",
        background: submitting ? "#829ab1" : "#0b7285",
        width: 180,
        fontWeight: 700
      }
    },
    submitting ? "Requesting..." : "Run Action"
  ), prettyResult ? /* @__PURE__ */ React.createElement(
    "pre",
    {
      style: {
        margin: 0,
        padding: 12,
        borderRadius: 8,
        background: "#102a43",
        color: "#f0f4f8",
        overflowX: "auto",
        fontSize: 12
      }
    },
    prettyResult
  ) : null);
};

export { NapCatConsole };
//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map