import { ProxySettingsPanel } from "../../features/settings/ProxySettingsPanel";
import { MockSharingPanel } from "../../features/mock/MockSharingPanel";
import { AiProviderSettings } from "../../features/settings/AiProviderSettings";
/**
 * 工作区对话框：新建项 / 重命名 / 环境管理 / 设置。
 */
import type { RequestKind } from "../../core/index";
import { generateMock, KIND_LABELS, MOCK_CHEATSHEET, walk } from "../../core/index";
import { useState } from "react";
import { useWorkspace } from "../../workspaceStore";
import { KVEditor, Modal, cx } from "../common";
import { EnvBadge } from "../EnvBadge";
import { Icon, type IconName } from "../icons";
import { KindIcon } from "../KindIcon";
import { Logo } from "../Logo";
import { WECHAT_GROUP_URL } from "../../links";
import { useLicense } from "../../license";
import { openExternal } from "../../openExternal";

const KIND_MENU: { kind: RequestKind | "folder"; icon: IconName; desc: string }[] = [
  { kind: "http", icon: "globe", desc: "REST 接口调试" },
  { kind: "graphql", icon: "hexagon", desc: "Query + Variables" },
  { kind: "websocket", icon: "zap", desc: "双向实时通信" },
  { kind: "sse", icon: "radio", desc: "服务端推送事件流" },
  { kind: "socketio", icon: "plug-zap", desc: "Socket.IO 事件收发" },
  { kind: "mqtt", icon: "mailbox", desc: "IoT 消息订阅发布" },
  { kind: "folder", icon: "folder-plus", desc: "接口分组目录" },
];

export function NewItemDialog({
  collectionId,
  parentId,
}: {
  collectionId: string;
  parentId: string | null;
}) {
  const collections = useWorkspace((s) => s.collections);
  const addRequest = useWorkspace((s) => s.addRequest);
  const addFolder = useWorkspace((s) => s.addFolder);
  const setDialog = useWorkspace((s) => s.setDialog);

  const [kind, setKind] = useState<RequestKind | "folder">("http");
  const [name, setName] = useState("");
  const [targetCollection, setTargetCollection] = useState(collectionId || (collections[0]?.id ?? ""));
  const [targetParent, setTargetParent] = useState<string | null>(parentId);

  const folderOptions: { id: string | null; label: string }[] = [{ id: null, label: "（集合根目录）" }];
  const collection = collections.find((c) => c.id === targetCollection);
  if (collection) {
    walk(collection.children, (node) => {
      if (node.type === "folder") {
        folderOptions.push({ id: node.id, label: `　`.repeat(0) + node.name });
      }
    });
  }

  const create = () => {
    if (kind === "folder") addFolder(targetCollection, targetParent, name || undefined);
    else addRequest(targetCollection, targetParent, kind, name || undefined);
    setDialog(null);
  };

  return (
    <Modal
      title="新建"
      onClose={() => setDialog(null)}
      footer={
        <>
          <button className="ops-btn ops-btn-secondary" onClick={() => setDialog(null)}>
            取消
          </button>
          <button className="ops-btn ops-btn-primary" onClick={create}>
            创建
          </button>
        </>
      }
    >
      <div className="space-y-4">
        <div className="grid grid-cols-4 gap-2">
          {KIND_MENU.map((k) => (
            <button
              key={k.kind}
              className={cx(
                "rounded-xl border p-3 text-center transition",
                kind === k.kind ? "ops-chip-active" : "hover:opacity-80",
              )}
              style={{ borderColor: kind === k.kind ? "var(--accent)" : "var(--border)" }}
              onClick={() => setKind(k.kind)}
            >
              <div className="flex justify-center"><KindIcon kind={k.kind} size={30} /></div>
              <div className="mt-1.5 text-xs font-semibold">
                {k.kind === "folder" ? "目录" : KIND_LABELS[k.kind]}
              </div>
              <div className="ops-faint mt-0.5 text-[11px]">{k.desc}</div>
            </button>
          ))}
        </div>

        <div>
          <label className="ops-label">名称</label>
          <input
            className="ops-input"
            placeholder={kind === "folder" ? "新建目录" : `新建 ${KIND_LABELS[kind as RequestKind]} 接口`}
            value={name}
            onChange={(e) => setName(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && create()}
            autoFocus
          />
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="ops-label">目标集合</label>
            <select
              className="ops-input"
              value={targetCollection}
              onChange={(e) => {
                setTargetCollection(e.target.value);
                setTargetParent(null);
              }}
            >
              {collections.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="ops-label">目标目录</label>
            <select
              className="ops-input"
              value={targetParent ?? ""}
              onChange={(e) => setTargetParent(e.target.value || null)}
            >
              {folderOptions.map((f) => (
                <option key={f.id ?? "root"} value={f.id ?? ""}>
                  {f.label}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>
    </Modal>
  );
}

export function RenameDialog({ id }: { id: string }) {
  const collections = useWorkspace((s) => s.collections);
  const renameNode = useWorkspace((s) => s.renameNode);
  const updateEnvironment = useWorkspace((s) => s.updateEnvironment);
  const setDialog = useWorkspace((s) => s.setDialog);

  const isCollection = collections.some((c) => c.id === id);
  const isEnv = useWorkspace((s) => s.environments.some((e) => e.id === id));
  const [name, setName] = useState(() => resolveName(id, isEnv));

  const submit = () => {
    if (isEnv) {
      updateEnvironment(id, { name: name.trim() || "未命名环境" });
    } else {
      renameNode(id, name.trim() || "未命名");
    }
    setDialog(null);
  };
  void isCollection;

  return (
    <Modal
      title="重命名"
      onClose={() => setDialog(null)}
      footer={
        <>
          <button className="ops-btn ops-btn-secondary" onClick={() => setDialog(null)}>
            取消
          </button>
          <button className="ops-btn ops-btn-primary" onClick={submit}>
            保存
          </button>
        </>
      }
    >
      <input
        className="ops-input"
        value={name}
        onChange={(e) => setName(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && submit()}
        autoFocus
      />
    </Modal>
  );
}

function resolveName(id: string, isEnv: boolean): string {
  const state = useWorkspace.getState();
  if (isEnv) return state.environments.find((e) => e.id === id)?.name ?? "";
  const collection = state.collections.find((c) => c.id === id);
  if (collection) return collection.name;
  let name = "";
  for (const c of state.collections) {
    walk(c.children, (n) => {
      if (n.id === id) name = n.name;
    });
  }
  return name;
}

export function EnvironmentsDialog() {
  const environments = useWorkspace((s) => s.environments);
  const activeEnvironmentId = useWorkspace((s) => s.activeEnvironmentId);
  const setActiveEnvironment = useWorkspace((s) => s.setActiveEnvironment);
  const addEnvironment = useWorkspace((s) => s.addEnvironment);
  const duplicateEnvironment = useWorkspace((s) => s.duplicateEnvironment);
  const removeEnvironment = useWorkspace((s) => s.removeEnvironment);
  const updateEnvironment = useWorkspace((s) => s.updateEnvironment);
  const addEnvVariable = useWorkspace((s) => s.addEnvVariable);
  const updateEnvVariable = useWorkspace((s) => s.updateEnvVariable);
  const removeEnvVariable = useWorkspace((s) => s.removeEnvVariable);
  const setDialog = useWorkspace((s) => s.setDialog);

  const [selected, setSelected] = useState(activeEnvironmentId ?? environments[0]?.id ?? "");
  const [search, setSearch] = useState("");
  const env = environments.find((e) => e.id === selected);
  const isActive = env?.id === activeEnvironmentId;

  const filteredVars = (env?.variables ?? []).filter((v) => {
    const q = search.trim().toLowerCase();
    if (!q) return true;
    return v.key.toLowerCase().includes(q) || (v.description ?? "").toLowerCase().includes(q);
  });

  return (
    <Modal
      title="环境管理"
      onClose={() => setDialog(null)}
      width="750px"
      footer={
        <div className="flex w-full items-center justify-between gap-3">
          <span className="ops-faint text-[11px]">修改自动保存并立即生效</span>
          <button className="ops-btn ops-btn-primary" onClick={() => setDialog(null)}>
            完成
          </button>
        </div>
      }
    >
      <div className="env-dialog">
        {/* 左栏：环境列表 */}
        <aside className="env-dialog-side">
          <div className="env-dialog-group">环境</div>
          {environments.map((e) => (
            <button
              key={e.id}
              className={cx("env-dialog-item", e.id === selected && "active")}
              onClick={() => setSelected(e.id)}
            >
              <EnvBadge envId={e.id} name={e.name} size={22} />
              <span className="min-w-0 flex-1 truncate text-left">{e.name}</span>
              {e.id === activeEnvironmentId && <span className="env-dialog-current">当前</span>}
            </button>
          ))}
          {environments.length === 0 && (
            <div className="ops-faint px-2 py-4 text-center text-xs">还没有环境</div>
          )}
          <button
            className="env-dialog-new"
            onClick={() => {
              const id = addEnvironment();
              setSelected(id);
            }}
          >
            <Icon name="plus" size={13} /> 新建环境
          </button>
        </aside>

        {/* 右栏：编辑区 */}
        <div className="env-dialog-main">
          {env ? (
            <>
              <div className="env-dialog-heading">环境详情 <span className="ops-faint font-normal">· {isActive ? "当前使用" : "未启用"}</span></div>
              <div className="env-dialog-name-row">
                <EnvBadge envId={env.id} name={env.name} size={26} />
                <input
                  className="ops-input min-w-0 flex-1"
                  aria-label="环境名称"
                  value={env.name}
                  onChange={(e) => updateEnvironment(env.id, { name: e.target.value })}
                  placeholder="环境名称"
                />
                {isActive ? (
                  <button className="ops-btn ops-btn-secondary" onClick={() => setActiveEnvironment(null)} title="当前环境已用于请求；点击后不使用环境前置 URL">
                    取消使用
                  </button>
                ) : (
                  <button className="ops-btn ops-btn-primary" onClick={() => setActiveEnvironment(env.id)}>
                    <Icon name="play" size={13} /> 设为当前
                  </button>
                )}
                <button
                  className="ops-btn ops-btn-secondary ops-icon-button"
                  title="复制环境"
                  aria-label="复制环境"
                  onClick={() => setSelected(duplicateEnvironment(env.id))}
                >
                  <Icon name="copy" size={14} />
                </button>
                <button
                  className="ops-btn ops-btn-ghost ops-danger ops-icon-button"
                  title="删除环境"
                  aria-label="删除环境"
                  onClick={() => {
                    removeEnvironment(env.id);
                    setSelected(useWorkspace.getState().environments[0]?.id ?? "");
                  }}
                >
                  <Icon name="trash" size={14} />
                </button>
              </div>

              <div className="mt-4">
                <label className="ops-label">前置 URL</label>
                <input
                  className="ops-input font-mono"
                  aria-label="当前环境的前置 URL"
                  value={env.baseUrl ?? ""}
                  onChange={(e) => updateEnvironment(env.id, { baseUrl: e.target.value })}
                  placeholder="https://api.example.com（请求路径以 / 开头时自动拼接）"
                />
                <p className="ops-faint mt-1.5 text-[11px] leading-[1.45]">相对路径（如 /graphql）会随环境切换前缀；完整 URL 不受影响。<a href="/docs/env" target="_blank" rel="noopener noreferrer" className="ops-link">了解环境变量</a></p>
              </div>

              <div className="env-dialog-vars-head">
                <div className="text-[13px] font-semibold">变量</div>
                <span className="ops-faint text-[11px]">{env.variables.length} 项</span>
                <input
                  className="ops-input ops-input-sm ml-auto w-36 min-w-0"
                  aria-label="搜索环境变量"
                  placeholder="搜索变量 / 描述…"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                />
                <button className="ops-btn ops-btn-secondary" onClick={() => addEnvVariable(env.id)}>
                  <Icon name="plus" size={13} /> 添加变量
                </button>
              </div>

              <div className="env-dialog-vars">
                {env.variables.length === 0 ? (
                  <div className="ops-faint py-8 text-center text-xs">
                    暂无变量，可添加 token 等请求参数
                  </div>
                ) : (
                  <KVEditor
                    rows={filteredVars}
                    onAdd={() => addEnvVariable(env.id)}
                    onUpdate={(rowId, patch) => updateEnvVariable(env.id, rowId, patch)}
                    onRemove={(rowId) => removeEnvVariable(env.id, rowId)}
                    keyPlaceholder="变量名"
                    valuePlaceholder="值"
                    withDescription
                    compact
                    showAddButton={false}
                  />
                )}
                {search && filteredVars.length === 0 && env.variables.length > 0 && (
                  <div className="ops-faint py-6 text-center text-xs">没有匹配的变量</div>
                )}
              </div>
              <p className="ops-faint mt-2 text-[11px]">在请求中使用 {"{{变量名}}"} 引用变量，切换环境时自动替换。</p>
            </>
          ) : (
            <div className="ops-faint grid h-full place-items-center text-sm">
              {environments.length === 0 ? "左侧点击「新建环境」开始" : "选择左侧环境"}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
}

/* ---------------- 设置弹窗（左侧导航 + 分区） ---------------- */

type SettingsTab = "appearance" | "network" | "mock" | "mockdata" | "ai" | "data" | "license" | "about";

const SETTINGS_TABS: { id: SettingsTab; label: string; desc: string; icon: IconName }[] = [
  { id: "appearance", label: "外观", desc: "主题与界面", icon: "palette" },
  { id: "network", label: "网络", desc: "请求与超时", icon: "network" },
  { id: "mock", label: "Mock 服务", desc: "服务开关与访问地址", icon: "flask-conical" },
  { id: "ai", label: "大模型", desc: "供应商与默认模型", icon: "bot" },
  { id: "data", label: "数据管理", desc: "工作区与备份", icon: "database" },
  { id: "license", label: "授权", desc: "试用与许可证", icon: "shield-check" },
  { id: "about", label: "关于", desc: "版本与链接", icon: "info" },
];

function SettingRow({
  label,
  desc,
  children,
}: {
  label: string;
  desc?: React.ReactNode;
  children?: React.ReactNode;
}) {
  return (
    <div className="set-row">
      <div className="min-w-0 flex-1">
        <div className="text-[13px] font-medium">{label}</div>
        {desc ? <div className="ops-faint mt-0.5 text-[11px] leading-5">{desc}</div> : null}
      </div>
      <div className="set-row-control">{children}</div>
    </div>
  );
}

function SettingGroup({ title, children }: { title?: string; children: React.ReactNode }) {
  return (
    <section className="set-group">
      {title ? <div className="set-group-title">{title}</div> : null}
      {children}
    </section>
  );
}

function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
  return (
    <button
      className={cx("set-toggle", checked && "on")}
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
    >
      <span className="set-toggle-dot" />
    </button>
  );
}

export function SettingsDialog({ tab }: { tab?: SettingsTab }) {
  const settings = useWorkspace((s) => s.settings);
  const environments = useWorkspace((s) => s.environments);
  const collections = useWorkspace((s) => s.collections);
  const setTheme = useWorkspace((s) => s.setTheme);
  const setTimeoutMs = useWorkspace((s) => s.setTimeoutMs);
  const setMockOption = useWorkspace((s) => s.setMockOption);
  const updateMockRule = useWorkspace((s) => s.updateMockRule);
  const addMockRule = useWorkspace((s) => s.addMockRule);
  const removeMockRule = useWorkspace((s) => s.removeMockRule);
  const resetMockRules = useWorkspace((s) => s.resetMockRules);
  const resetWorkspace = useWorkspace((s) => s.resetWorkspace);
  const setDialog = useWorkspace((s) => s.setDialog);

  const [active, setActive] = useState<SettingsTab>(tab ?? "appearance");
  const [ruleSearch, setRuleSearch] = useState("");
  const [previewRule, setPreviewRule] = useState("");

  const mock = settings.mock;
  const filteredRules = mock.rules.filter((r) => {
    const q = ruleSearch.trim().toLowerCase();
    if (!q) return true;
    return (
      r.pattern.toLowerCase().includes(q) ||
      r.rule.toLowerCase().includes(q) ||
      (r.note ?? "").toLowerCase().includes(q)
    );
  });

  const requestCount = collections.reduce(
    (acc, c) => acc + (c.children.filter((n) => n.type === "request").length ? 1 : 0),
    0,
  );
  let totalRequests = 0;
  for (const c of collections) {
    walk(c.children, (n) => {
      if (n.type === "request") totalRequests++;
    });
  }
  void requestCount;

  const currentMeta = SETTINGS_TABS.find((t) => t.id === active) ?? { label: "请求数据生成" };

  return (
    <Modal
      title="设置"
      onClose={() => setDialog(null)}
      width="860px"
      footer={<button className="ops-btn ops-btn-primary" onClick={() => setDialog(null)}>完成</button>}
    >
      <div className="set-dialog">
        <aside className="set-side">
          <div className="set-side-head">设置</div>
          {SETTINGS_TABS.map((t) => (
            <button
              key={t.id}
              className={cx("set-side-item", (active === t.id || (active === "mockdata" && t.id === "network")) && "active")}
              onClick={() => setActive(t.id)}
            >
              <span className={cx("set-side-icon", active === t.id && "active")}>
                <Icon name={t.icon} size={15} />
              </span>
              <span className="min-w-0 flex-1 text-left">
                <span className="block truncate text-[13px] font-medium leading-5">{t.label}</span>
                <span className="ops-faint block truncate text-[11px] leading-4">{t.desc}</span>
              </span>
            </button>
          ))}
        </aside>

        <div className="set-main">
          <div className="set-main-head">
            <div className="flex items-center gap-2 text-[16px] font-semibold">
              {active === "mockdata" && <button type="button" className="ops-btn ops-btn-ghost !px-1" aria-label="返回网络设置" title="返回网络设置" onClick={() => setActive("network")}><Icon name="chevron-right" size={14} className="rotate-180" /></button>}
              {currentMeta.label}
            </div>
          </div>

          <div className="set-main-body">
            {active === "appearance" && (
              <>
                <SettingGroup title="主题">
                  <SettingRow label="界面主题">
                    <div className="flex gap-1.5">
                      {(["dark", "light", "system"] as const).map((t) => (
                        <button
                          key={t}
                          className={cx(
                            "ops-btn ops-btn-secondary",
                            settings.theme === t && "ops-chip-active",
                          )}
                          onClick={() => setTheme(t)}
                        >
                          {t !== "system" && <Icon name={t === "dark" ? "moon" : "sun"} size={13} />}
                          {t === "system" ? "跟随系统" : t === "dark" ? "深色" : "浅色"}
                        </button>
                      ))}
                    </div>
                  </SettingRow>
                </SettingGroup>
                <SettingGroup title="界面">
                  <SettingRow
                    label="环境徽标颜色"
                    desc="每个环境按名称生成固定色块，便于在顶栏快速识别"
                  >
                    <div className="flex items-center gap-1">
                      {environments.slice(0, 6).map((e) => (
                        <EnvBadge key={e.id} envId={e.id} name={e.name} size={22} />
                      ))}
                    </div>
                  </SettingRow>
                </SettingGroup>
              </>
            )}

            {active === "network" && (
              <>
                <SettingGroup title="请求">
                  <SettingRow label="请求超时（毫秒）" desc="HTTP / GraphQL 请求的超时上限，超时自动中断">
                    <input
                      type="number"
                      className="ops-input ops-input-sm w-32"
                      value={settings.timeoutMs}
                      min={1000}
                      step={1000}
                      onChange={(e) => setTimeoutMs(Number(e.target.value) || 30000)}
                    />
                  </SettingRow>

                </SettingGroup>
                <ProxySettingsPanel />
                <SettingGroup title="可选工具">
                  <SettingRow label="请求数据生成" desc="发送请求时使用 @ 表达式与字段匹配规则；与内网 Mock 服务独立">
                    <button type="button" className="ops-btn ops-btn-secondary" onClick={() => setActive("mockdata")}>管理规则 <Icon name="chevron-right" size={13} /></button>
                  </SettingRow>
                </SettingGroup>
                <SettingGroup title="实时连接">
                  <SettingRow
                    label="WebSocket / SSE / Socket.IO / MQTT"
                    desc="关闭标签页自动断开连接；会话不落盘，刷新后重新连接"
                  >
                    <span className="ops-faint text-[11px]">自动管理</span>
                  </SettingRow>
                </SettingGroup>
              </>
            )}

            {active === "mock" && <MockSharingPanel />}
            {active === "mockdata" && (
              <>
                <SettingGroup>
                  <SettingRow
                    label="启用请求数据生成"
                    desc="发送请求时解析参数与 Body 中的 @ 表达式（如 @cname、@integer(1,100)）；不改变内网 Mock 服务的返回数据"
                  >
                    <Toggle checked={mock.enabled} onChange={(v) => setMockOption("enabled", v)} />
                  </SettingRow>
                  <SettingRow
                    label="智能字段匹配"
                    desc="JSON Body 中字段值未写 Mock 规则时，按字段名自动匹配下方规则生成"
                  >
                    <Toggle checked={mock.smart} onChange={(v) => setMockOption("smart", v)} />
                  </SettingRow>
                </SettingGroup>

                <SettingGroup title="智能匹配规则">
                  <div className="ops-hint">
                    <Icon name="info" size={14} />
                    <span>
                      按从上到下的顺序匹配，先命中先用；<b>* 通配任意字符</b>，类型需与 JSON 字段一致。
                      <a
                        href="/docs/mock"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="ops-link ml-1"
                      >
                        语法速查 →
                      </a>
                    </span>
                  </div>
                  <div className="mb-2 flex items-center gap-2">
                    <input
                      className="ops-input ops-input-sm w-48"
                      placeholder="搜索规则 / 表达式…"
                      value={ruleSearch}
                      onChange={(e) => setRuleSearch(e.target.value)}
                    />
                    <span className="ops-faint text-[11px]">{mock.rules.length} 条</span>
                    <div className="ml-auto flex gap-1.5">
                      <button className="ops-btn ops-btn-secondary" onClick={() => addMockRule()}>
                        <Icon name="plus" size={13} /> 新增规则
                      </button>
                      <button
                        className="ops-btn ops-btn-secondary"
                        title="恢复内置默认规则（会覆盖自定义规则）"
                        onClick={() => resetMockRules()}
                      >
                        <Icon name="eraser" size={13} /> 恢复默认
                      </button>
                    </div>
                  </div>

                  <div className="mock-rules">
                    <div className="mock-rule-head">
                      <span>数据类型</span>
                      <span>匹配方式</span>
                      <span>匹配规则</span>
                      <span>Mock 表达式</span>
                      <span>备注</span>
                      <span>启用</span>
                      <span />
                    </div>
                    {filteredRules.map((r) => (
                      <div key={r.id} className="mock-rule-row">
                        <select
                          className="ops-input ops-input-sm"
                          value={r.type}
                          onChange={(e) => updateMockRule(r.id, { type: e.target.value as never })}
                        >
                          <option value="string">string</option>
                          <option value="number">number</option>
                          <option value="integer">integer</option>
                          <option value="boolean">boolean</option>
                        </select>
                        <select
                          className="ops-input ops-input-sm"
                          value={r.match}
                          onChange={(e) => updateMockRule(r.id, { match: e.target.value as never })}
                        >
                          <option value="wildcard">通配符</option>
                          <option value="exact">完全匹配</option>
                          <option value="regex">正则</option>
                        </select>
                        <input
                          className="ops-input ops-input-sm mock-rule-pattern"
                          value={r.pattern}
                          placeholder="*name*"
                          onChange={(e) => updateMockRule(r.id, { pattern: e.target.value })}
                        />
                        <input
                          className="ops-input ops-input-sm mock-rule-expr"
                          value={r.rule}
                          placeholder="@cname"
                          onChange={(e) => updateMockRule(r.id, { rule: e.target.value })}
                        />
                        <input
                          className="ops-input ops-input-sm mock-rule-note"
                          value={r.note ?? ""}
                          placeholder="备注"
                          onChange={(e) => updateMockRule(r.id, { note: e.target.value })}
                        />
                        <Toggle
                          checked={r.enabled}
                          onChange={(v) => updateMockRule(r.id, { enabled: v })}
                        />
                        <button
                          className="ops-btn ops-btn-ghost ops-danger px-1.5"
                          title="删除规则"
                          onClick={() => removeMockRule(r.id)}
                        >
                          <Icon name="trash" size={13} />
                        </button>
                      </div>
                    ))}
                    {filteredRules.length === 0 && (
                      <div className="ops-faint py-6 text-center text-xs">没有匹配的规则</div>
                    )}
                  </div>
                </SettingGroup>

                <SettingGroup title="表达式预览">
                  <div className="flex items-center gap-2">
                    <input
                      className="ops-input ops-input-sm w-56"
                      placeholder="输入表达式预览，如 @email"
                      value={previewRule}
                      onChange={(e) => setPreviewRule(e.target.value)}
                    />
                    {previewRule.trim().startsWith("@") && (
                      <span className="mock-preview-value">{generateMock(previewRule.trim())}</span>
                    )}
                  </div>
                  <div className="mock-cheatsheet">
                    {MOCK_CHEATSHEET.map((c) => (
                      <button
                        key={c.expr}
                        className="mock-cheat-item"
                        title="点击试一试"
                        onClick={() => setPreviewRule(c.expr)}
                      >
                        <code>{c.expr}</code>
                        <span className="ops-faint">{c.desc}</span>
                        <span className="mock-cheat-gen">{generateMock(c.expr)}</span>
                      </button>
                    ))}
                  </div>
                </SettingGroup>
              </>
            )}

            {active === "ai" && <AiProviderSettings />}

            {active === "data" && (
              <>
                <SettingGroup title="工作区数据">
                  <SettingRow
                    label="本地存储"
                    desc="集合、环境与设置保存在本地 localStorage，不经过任何服务器"
                  >
                    <span className="ops-faint text-[11px]">浏览器本地</span>
                  </SettingRow>
                  <SettingRow label="数据概览">
                    <span className="ops-faint text-[11px]">
                      {collections.length} 个集合 · {totalRequests} 个接口 · {environments.length} 个环境
                    </span>
                  </SettingRow>
                </SettingGroup>
                <SettingGroup title="备份与恢复">
                  <SettingRow
                    label="导出全量备份"
                    desc="包含全部集合、环境与设置，可在其他设备导入恢复"
                  >
                    <button
                      className="ops-btn ops-btn-secondary"
                      onClick={() => setDialog({ type: "export", collectionId: collections[0]?.id ?? "" })}
                    >
                      <Icon name="download" size={13} /> 打开导出
                    </button>
                  </SettingRow>
                  <SettingRow
                    label="重置工作区"
                    desc="恢复到初始示例数据，当前数据不可恢复，建议先导出备份"
                  >
                    <button
                      className="ops-btn ops-btn-danger"
                      onClick={() => {
                        if (confirm("确定重置工作区？将恢复到初始示例数据（建议先导出备份）")) {
                          resetWorkspace();
                          setDialog(null);
                        }
                      }}
                    >
                      <Icon name="trash" size={13} /> 重置
                    </button>
                  </SettingRow>
                </SettingGroup>
              </>
            )}

            {active === "license" && <LicensePane />}
            {active === "about" && (
              <>
                <p className="ops-faint px-1 text-[11px]">
                  OpsxAPI · 专业接口调试工作台 · HTTP · GraphQL · WebSocket · SSE · Socket.IO · MQTT
                </p>
                <SettingGroup title="资源链接">
                  <SettingRow label="微信群" desc="扫码加入交流群">
                    <button
                      type="button"
                      className="ops-btn ops-btn-secondary"
                      title="打开微信群"
                      onClick={() => void openExternal(WECHAT_GROUP_URL)}
                    >
                      <Icon name="external-link" size={13} />
                    </button>
                  </SettingRow>
                  <SettingRow label="用户文档" desc="功能说明、协议调试与最佳实践">
                    <button type="button" className="ops-btn ops-btn-secondary" title="打开用户文档" onClick={() => void openExternal("/docs")}>
                      <Icon name="book-open" size={13} />
                    </button>
                  </SettingRow>
                  <SettingRow label="官网与价格" desc="产品介绍、版本对比与购买方案">
                    <button type="button" className="ops-btn ops-btn-secondary" title="打开官网" onClick={() => void openExternal("/home")}>
                      <Icon name="external-link" size={13} />
                    </button>
                  </SettingRow>
                  <SettingRow label="Mock 语法速查" desc="内置 Mock.js 风格表达式与智能匹配说明">
                    <button type="button" className="ops-btn ops-btn-secondary" title="查看 Mock 速查" onClick={() => void openExternal("/docs/mock")}>
                      <Icon name="flask-conical" size={13} />
                    </button>
                  </SettingRow>
                </SettingGroup>
                <p className="ops-faint px-1 text-[11px]">
                  MIT License · Rust
                </p>
              </>
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
}

/* ---------------- 授权：试用状态 + 在线/离线激活 ---------------- */

function LicensePane() {
  const status = useLicense((s) => s.status);
  const busy = useLicense((s) => s.busy);
  const error = useLicense((s) => s.error);
  const activate = useLicense((s) => s.activate);
  const deactivate = useLicense((s) => s.deactivate);
  const load = useLicense((s) => s.load);
  const [key, setKey] = useState("");
  const [email, setEmail] = useState("");
  const [ok, setOk] = useState(false);

  const doActivate = async () => {
    if (!key.trim()) return;
    setOk(false);
    const done = await activate(key, email);
    if (done) {
      setKey("");
      setOk(true);
    }
  };

  if (!status) {
    return (
      <div className="ops-hint">
        <Icon name="info" size={14} />
        <span>授权状态仅在桌面端可用；网页预览环境不涉及许可证。</span>
      </div>
    );
  }

  const until = status.expiresAt ? new Date(status.expiresAt * 1000).toLocaleDateString("zh-CN") : "永久";

  return (
    <div className="space-y-4">
      {status.phase === "active" ? (
        <div className="set-banner" style={{ borderColor: "var(--success)" }}>
          <div className="flex items-center gap-2 text-[13px] font-semibold" style={{ color: "var(--success)" }}>
            <Icon name="shield-check" size={15} /> 已授权
          </div>
          <div className="ops-faint mt-1 text-[12px] leading-6">
            {status.planType ? `计划：${status.planType} · ` : ""}
            {status.maxDevices ? `设备数：${status.maxDevices} · ` : ""}
            到期：{until}
            {status.email ? ` · ${status.email}` : ""}
          </div>
          <div className="ops-faint mt-1 text-[11px]">设备 ID：{status.deviceId}</div>
          <div className="mt-2 flex gap-2">
            <button className="ops-btn ops-btn-secondary !py-1 text-[12px]" disabled={busy} onClick={() => void deactivate()}>
              解绑本机
            </button>
            <button className="ops-btn ops-btn-ghost !py-1 text-[12px]" onClick={() => void load()}>
              刷新状态
            </button>
          </div>
        </div>
      ) : status.phase === "trialing" ? (
        <div className="set-banner" style={{ borderColor: "var(--accent)" }}>
          <div className="flex items-center gap-2 text-[13px] font-semibold" style={{ color: "var(--accent-strong)" }}>
            <Icon name="clock" size={15} /> 试用中 · 剩 {status.daysLeft} 天
          </div>
          <div className="ops-faint mt-1 text-[12px] leading-6">
            30 天全功能试用自首次启动自动开始。试用期结束后个人非商业用途可继续使用；工作中商用需购买授权。
          </div>
        </div>
      ) : (
        <div className="set-banner" style={{ borderColor: "var(--danger)" }}>
          <div className="flex items-center gap-2 text-[13px] font-semibold ops-danger">
            <Icon name="shield-check" size={15} /> 试用已结束
          </div>
          <div className="ops-faint mt-1 text-[12px] leading-6">
            个人非商业用途可继续使用；在工作中商用请购买授权。
          </div>
        </div>
      )}

      {status.phase !== "active" && (
        <div className="set-group">
          <div className="set-group-title">激活许可证</div>
          <div className="space-y-2">
            <input
              className="ops-input font-mono"
              placeholder="LIC- 在线授权码 或 LICOFF- 离线许可证"
              value={key}
              onChange={(e) => { setKey(e.target.value); setOk(false); }}
              onKeyDown={(e) => e.key === "Enter" && void doActivate()}
            />
            <input
              className="ops-input"
              placeholder="邮箱（可选，用于授权关联）"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <div className="flex items-center gap-2">
              <button className="ops-btn ops-btn-primary" disabled={busy || !key.trim()} onClick={() => void doActivate()}>
                {busy ? "激活中…" : "激活"}
              </button>
              <span className="ops-faint text-[11px]">
                LIC- 联网激活、可自助解绑；LICOFF- 完全离线激活（绑定本机）
              </span>
            </div>
          </div>
        </div>
      )}

      {ok && <div className="ops-success text-[12px]">激活成功，已授权 ✓</div>}
      {error && <div className="ops-danger text-[12px]">{error}</div>}

      <div className="flex items-center justify-between">
        <span className="ops-faint text-[11px]">定价与购买</span>
        <button
          className="ops-btn ops-btn-secondary !py-1 text-[12px]"
          onClick={() => void openExternal(`/pricing?intent=app.license.purchase.${status.phase}`)}
        >
          <Icon name="external-link" size={13} /> 查看定价
        </button>
      </div>
    </div>
  );
}