"use client";

import { useEffect, useRef, useState, type ReactNode } from "react";
import {
  Activity,
  ClipboardList,
  FileSearch,
  Loader2,
  Mail,
  Trash2,
} from "lucide-react";
import {
  AdminSegmented,
  AdminSettingsActions,
  AdminSettingsGroup,
  AdminSettingsRow,
  AdminSwitch,
} from "@/components/admin";
import { apiOperations } from "@/lib/api";
import ConfirmDialog from "@/components/ConfirmDialog";
import FilterRules, { type Rule } from "./FilterRules";

export type ModuleName = "security" | "mail" | "storage" | "filter" | "maintenance";
type Data = Record<string, string | number | boolean | string[] | Rule[]>;
type Snapshot = {
  data: Data;
  version: number;
  state: string;
  site_url: string;
  local_directory: string;
  encryption_ready: boolean;
  recovery_override: boolean;
  template_preview?: string;
};
type Field = {
  key: string;
  label: string;
  type?: "number" | "switch" | "secret" | "select" | "list" | "textarea" | "datetime";
  hint?: string;
  /** 控件下方较长说明（如模板变量释义） */
  hintBelow?: ReactNode;
  min?: number;
  max?: number;
  rows?: number;
  wide?: boolean;
  options?: [string, string][];
  advanced?: boolean;
  s3?: boolean;
};
type Group = { title: string; description?: string; fields: Field[] };

const NUM = (key: string, label: string, min: number, max: number, unit: string): Field => ({
  key,
  label,
  type: "number",
  min,
  max,
  hint: `${min}–${max} ${unit}`.trim(),
});

/** 邮件模板占位符释义（注册验证与找回密码共用） */
const MAIL_TEMPLATE_VARS = (
  <dl className="ops-mail-vars">
    <div>
      <dt>{"{{site_name}}"}</dt>
      <dd>站点名称（取自基本信息）</dd>
    </div>
    <div>
      <dt>{"{{purpose}}"}</dt>
      <dd>用途文案：账号验证 / 密码找回</dd>
    </div>
    <div>
      <dt>{"{{code}}"}</dt>
      <dd>验证码（正文必须包含）</dd>
    </div>
    <div>
      <dt>{"{{link}}"}</dt>
      <dd>引导用户回站完成验证/重置的链接</dd>
    </div>
    <div>
      <dt>{"{{site_url}}"}</dt>
      <dd>站点正式地址（SITE_URL）</dd>
    </div>
    <div>
      <dt>{"{{logo}}"}</dt>
      <dd>浅色 Logo 的完整 img 标签（勿写入 src）</dd>
    </div>
    <div>
      <dt>{"{{logo_url}}"}</dt>
      <dd>浅色 Logo 的绝对图片 URL</dd>
    </div>
  </dl>
);

const schemas: Record<ModuleName, Group[]> = {
  security: [
    {
      title: "注册准入",
      fields: [
        { key: "allow_register", label: "开放注册", type: "switch", hint: "关闭后仍保留注册入口，用户可看到关闭提示" },
        { key: "register_notice", label: "关闭注册提示", hint: "关闭注册时在注册页展示" },
        { key: "verify_email", label: "注册邮箱验证", type: "switch" },
        { key: "password_reset", label: "邮件找回密码", type: "switch" },
      ],
    },
    {
      title: "登录保护与频率",
      fields: [
        NUM("login_window", "失败观察窗口", 60, 3600, "秒"),
        NUM("login_failures", "账号失败阈值", 3, 50, "次"),
        NUM("post_interval", "发帖最小间隔", 0, 3600, "秒"),
        NUM("comment_interval", "评论最小间隔", 0, 3600, "秒"),
        NUM("search_minute", "搜索频率", 1, 120, "次/分"),
      ],
    },
    {
      title: "账号邮件保护",
      fields: [
        NUM("resend_interval", "验证码重发间隔", 30, 3600, "秒"),
        NUM("email_hourly", "邮箱发送上限", 1, 20, "次/时"),
      ],
    },
  ],
  mail: [
    {
      title: "SMTP 服务",
      fields: [
        { key: "enabled", label: "启用邮件", type: "switch" },
        { key: "host", label: "SMTP 主机" },
        {
          key: "tls",
          label: "加密方式",
          type: "select",
          options: [
            ["tls", "隐式 TLS（465）"],
            ["starttls", "STARTTLS（587）"],
          ],
        },
        NUM("port", "SMTP 端口", 1, 65535, ""),
        { key: "username", label: "登录用户名" },
        { key: "password", label: "密码 / 授权码", type: "secret" },
      ],
    },
    {
      title: "发件身份",
      fields: [
        { key: "from_name", label: "发件人名称" },
        { key: "from", label: "发件人邮箱" },
        { key: "reply_to", label: "回复邮箱" },
        { ...NUM("timeout", "连接超时", 2, 30, "秒"), advanced: true },
        { ...NUM("retention", "发送记录保留", 1, 365, "天"), advanced: true },
      ],
    },
    {
      title: "邮件模板",
      description:
        "注册验证与找回密码共用；主题或正文留空则恢复内置模板。发送与预览会把 <style> 中的 class 规则内联到元素上（手机 QQ 等客户端会丢弃 style 标签）。变量值发送时转义；正文不做 HTML 过滤。",
      fields: [
        {
          key: "subject_template",
          label: "主题",
          hint: "建议含站点名与用途",
          hintBelow: (
            <p className="ops-mail-vars-lead">
              可用 {"{{site_name}}"}（站点名）、{"{{purpose}}"}（账号验证 / 密码找回）。
            </p>
          ),
        },
        {
          key: "body_template",
          label: "正文 HTML",
          type: "textarea",
          rows: 10,
          wide: true,
          hint: "必须包含 {{code}}；样式写在元素 style 或 <style> 的 class 规则中",
          hintBelow: (
            <>
              <p className="ops-mail-vars-lead">可用占位符（发送时替换为实际内容）：</p>
              {MAIL_TEMPLATE_VARS}
            </>
          ),
        },
      ],
    },
  ],
  storage: [
    {
      title: "新上传目标",
      fields: [
        {
          key: "backend",
          label: "存储后端",
          type: "select",
          options: [
            ["local", "本地存储"],
            ["s3", "S3 兼容存储"],
          ],
        },
        { key: "endpoint", label: "Endpoint", s3: true },
        { key: "bucket", label: "Bucket", s3: true },
        { key: "region", label: "Region", s3: true },
        { key: "access_key", label: "Access Key", type: "secret", s3: true },
        { key: "secret_key", label: "Secret Key", type: "secret", s3: true },
        { key: "cdn", label: "公开图片 CDN", s3: true, advanced: true },
        { key: "prefix", label: "对象前缀", s3: true, hint: "以 / 结尾" },
        { key: "path_style", label: "路径寻址", type: "switch", s3: true, advanced: true },
      ],
    },
    {
      title: "上传规则",
      fields: [
        NUM("image_max_mb", "正文图片上限", 1, 50, "MiB"),
        NUM("attachment_max_mb", "单个附件上限", 1, 100, "MiB"),
        NUM("attachment_max_count", "每帖附件数", 1, 20, "个"),
        { key: "attachment_ext_limit", label: "扩展名白名单", type: "switch" },
        { key: "attachment_exts", label: "允许扩展名", type: "list", hint: "逗号分隔、不含点" },
      ],
    },
    { title: "文件访问", fields: [] },
  ],
  filter: [
    {
      title: "内容过滤",
      fields: [{ key: "enabled", label: "启用过滤", type: "switch" }],
    },
  ],
  maintenance: [
    {
      title: "运行模式",
      fields: [
        {
          key: "mode",
          label: "模式",
          type: "select",
          options: [
            ["normal", "正常运行"],
            ["readonly", "只读"],
            ["paused", "暂停访问（503）"],
          ],
        },
        { key: "title", label: "维护标题" },
        { key: "message", label: "维护说明", type: "textarea", rows: 3 },
        { key: "until", label: "预计恢复", type: "datetime" },
        { key: "contact", label: "联系方式" },
        NUM("retry_after", "建议重试间隔", 30, 86400, "秒"),
      ],
    },
    {
      title: "临时文件",
      fields: [NUM("temp_days", "临时文件保留", 1, 365, "天")],
    },
  ],
};

function isoToLocal(iso: string): string {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return "";
  const p = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
}

function localToIso(local: string): string {
  if (!local) return "";
  const d = new Date(local);
  if (Number.isNaN(d.getTime())) return "";
  return d.toISOString();
}

function formatLocalDisplay(iso: string): string {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return d.toLocaleString("zh-CN", { hour12: false });
}

/** 预览用 srcDoc：去掉脚本后注入量高助手；沙箱仅 allow-scripts、不同源 */
function mailPreviewSrcDoc(html: string): string {
  const cleaned = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
  return `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>邮件预览</title><style>html,body{margin:0;padding:0;overflow:hidden;background:#fff}</style></head><body>${cleaned}<script>
(function(){
  function send(){
    var h=Math.max(document.documentElement.scrollHeight,document.body?document.body.scrollHeight:0);
    parent.postMessage({source:"j13-mail-preview",height:h},"*");
  }
  send();
  if(window.ResizeObserver){new ResizeObserver(send).observe(document.documentElement);}
  document.querySelectorAll("img").forEach(function(img){if(!img.complete)img.addEventListener("load",send);});
  window.addEventListener("message",function(e){if(e.data&&e.data.source==="j13-mail-preview-ping")send();});
})();
<\/script></body></html>`;
}

/** 按正文高度撑开 iframe，避免固定高度出现内部滚动条 */
function MailTemplatePreview({ html }: { html: string }) {
  const frameRef = useRef<HTMLIFrameElement>(null);
  const [height, setHeight] = useState(0);
  const srcDoc = mailPreviewSrcDoc(html);

  useEffect(() => {
    setHeight(0);
  }, [html]);

  useEffect(() => {
    const onMsg = (e: MessageEvent) => {
      if (e.source !== frameRef.current?.contentWindow) return;
      const data = e.data as { source?: string; height?: number } | null;
      if (data?.source !== "j13-mail-preview" || typeof data.height !== "number") return;
      const h = Math.ceil(data.height);
      if (h > 0) setHeight(h);
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <details
      className="ops-preview"
      onToggle={(e) => {
        if (!(e.target as HTMLDetailsElement).open) return;
        // 展开后请 iframe 再报一次高度
        frameRef.current?.contentWindow?.postMessage({ source: "j13-mail-preview-ping" }, "*");
      }}
    >
      <summary>注册验证邮件预览</summary>
      <iframe
        ref={frameRef}
        title="邮件正文预览"
        sandbox="allow-scripts"
        srcDoc={srcDoc}
        className="ops-mail-preview"
        style={height > 0 ? { height } : undefined}
      />
    </details>
  );
}

export default function OperationsPanel({
  name,
  onDirtyChange,
}: {
  name: ModuleName;
  onDirtyChange: (dirty: boolean) => void;
}) {
  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
  const [draft, setDraft] = useState<Data>({});
  const [clear, setClear] = useState<string[]>([]);
  const [editingSecret, setEditingSecret] = useState<string[]>([]);
  const [error, setError] = useState("");
  const [saving, setSaving] = useState(false);
  const [busy, setBusy] = useState("");
  const [result, setResult] = useState<unknown>(null);
  const [tested, setTested] = useState("");
  const [recipient, setRecipient] = useState("");
  const [text, setText] = useState("");
  const [scope, setScope] = useState("body");
  const [records, setRecords] = useState<Record<string, unknown>[]>([]);
  const [recordsLoaded, setRecordsLoaded] = useState(false);
  const [confirmClean, setConfirmClean] = useState(false);
  const [cleanKind, setCleanKind] = useState("clear-mail-logs");
  const [candidates, setCandidates] = useState<string[]>([]);
  const serialized = JSON.stringify(draft) + JSON.stringify(clear) + recipient + scope + text;
  const dirty = !!snapshot && (JSON.stringify(draft) !== JSON.stringify(snapshot.data) || clear.length > 0);

  useEffect(() => {
    onDirtyChange(dirty);
    return () => onDirtyChange(false);
  }, [dirty, onDirtyChange]);

  useEffect(() => {
    let active = true;
    setRecords([]);
    setRecordsLoaded(false);
    setResult(null);
    apiOperations<Snapshot>("/api/admin/settings/modules/" + name)
      .then((s) => {
        if (!active) return;
        setSnapshot(s);
        setDraft(s.data);
      })
      .catch((e) => {
        if (active) setError(e.message);
      });
    return () => {
      active = false;
    };
  }, [name]);

  const update = (key: string, value: Data[string]) => setDraft((d) => ({ ...d, [key]: value }));

  const save = async () => {
    if (!snapshot || saving) return;
    setSaving(true);
    setError("");
    try {
      const s = await apiOperations<Snapshot>("/api/admin/settings/modules/" + name, "PUT", {
        version: snapshot.version,
        data: draft,
        clear,
      });
      setSnapshot(s);
      setDraft(s.data);
      setClear([]);
      setEditingSecret([]);
    } catch (e) {
      const msg = (e as Error).message;
      setError(msg);
      const key = msg.split("：")[0];
      document.getElementById("ops-" + key)?.focus();
      document.getElementById("ops-" + key)?.scrollIntoView({ block: "center", behavior: "smooth" });
      document.querySelector(".ops-savebar")?.scrollIntoView({ block: "nearest", behavior: "smooth" });
    } finally {
      setSaving(false);
    }
  };

  const run = async (action: string) => {
    if (busy) return;
    setBusy(action);
    setError("");
    try {
      let output: unknown;
      if (action === "records") {
        const r = await apiOperations<{ records: Record<string, unknown>[] }>(
          "/api/admin/settings/modules/" + name + "/records"
        );
        setRecords((r.records || []).slice(0, 50));
        setRecordsLoaded(true);
        return;
      }
      if (action === "diagnostics") output = await apiOperations("/api/admin/diagnostics");
      else if (action === "scan" || action === "clear-mail-logs" || action === "clean-temporary")
        output = await apiOperations("/api/admin/maintenance/actions", "POST", {
          action,
          confirm: action !== "scan",
          ids: candidates,
        });
      else
        output = await apiOperations("/api/admin/settings/modules/" + name + "/test", "POST", {
          data: draft,
          clear,
          action,
          recipient,
          text,
          scope,
        });
      if (action === "scan")
        setCandidates(((output as { candidates?: { id: string }[] }).candidates || []).map((c) => c.id));
      if (action === "clean-temporary") setCandidates([]);
      setResult(output);
      setTested(serialized);
    } catch (e) {
      setError((e as Error).message);
      setResult(null);
    } finally {
      setBusy("");
    }
  };

  const beginReplace = (key: string) => {
    setEditingSecret((keys) => (keys.includes(key) ? keys : [...keys, key]));
    setClear((keys) => keys.filter((k) => k !== key));
    update(key, "");
  };
  const cancelReplace = (key: string) => {
    setEditingSecret((keys) => keys.filter((k) => k !== key));
    update(key, "");
  };
  const beginRemove = (key: string) => {
    setEditingSecret((keys) => keys.filter((k) => k !== key));
    setClear((keys) => (keys.includes(key) ? keys : [...keys, key]));
    update(key, "");
  };
  const cancelRemove = (key: string) => setClear((keys) => keys.filter((k) => k !== key));

  const fields = (list: Field[]) =>
    list
      .filter((f) => !f.s3 || draft.backend === "s3")
      .map((f) => {
        const id = "ops-" + f.key;
        const configured = !!draft[f.key + "_configured"];
        const removing = f.type === "secret" && clear.includes(f.key);
        const replacing = f.type === "secret" && !removing && (!configured || editingSecret.includes(f.key));

        if (f.key === "mode" && f.type === "select" && f.options) {
          return (
            <AdminSettingsRow key={f.key} label={f.label}>
              <AdminSegmented
                role="group"
                size="sm"
                ariaLabel={f.label}
                value={String(draft[f.key] ?? "normal")}
                onChange={(v) => update(f.key, v)}
                options={f.options.map(([k, l]) => ({ key: k, label: l }))}
              />
            </AdminSettingsRow>
          );
        }

        return (
          <AdminSettingsRow
            key={f.key}
            wide={f.wide}
            label={replacing || f.type !== "secret" ? <label htmlFor={id}>{f.label}</label> : f.label}
            hint={f.type === "secret" || f.type === "datetime" ? undefined : f.hint}
            hintBelow={f.hintBelow}
          >
            {f.type === "switch" ? (
              <AdminSwitch
                label={f.label}
                checked={!!draft[f.key]}
                disabled={saving}
                onChange={() => update(f.key, !draft[f.key])}
              />
            ) : f.type === "select" ? (
              <select
                id={id}
                className="field ops-select"
                value={String(draft[f.key] ?? "")}
                onChange={(e) => update(f.key, e.target.value)}
              >
                {f.options?.map(([v, l]) => (
                  <option key={v} value={v}>
                    {l}
                  </option>
                ))}
              </select>
            ) : f.type === "datetime" ? (
              <div className="ops-datetime">
                <input
                  id={id}
                  type="datetime-local"
                  className="field ops-datetime-input"
                  value={isoToLocal(String(draft[f.key] ?? ""))}
                  onChange={(e) => update(f.key, localToIso(e.target.value))}
                />
                <div className="ops-datetime-actions">
                  {draft[f.key] ? (
                    <span className="meta text-[12px]">{formatLocalDisplay(String(draft[f.key]))}</span>
                  ) : (
                    <span className="meta text-[12px]">未设置</span>
                  )}
                  <button type="button" className="ops-text-btn" onClick={() => update(f.key, "")}>
                    清除
                  </button>
                </div>
              </div>
            ) : f.type === "textarea" ? (
              <textarea
                id={id}
                className={"field " + (f.wide ? "ops-template" : "ops-input")}
                rows={f.rows || 3}
                value={String(draft[f.key] ?? "")}
                onChange={(e) => update(f.key, e.target.value)}
              />
            ) : f.type === "secret" ? (
              <SecretControl
                id={id}
                noun={secretNoun(f.key)}
                configured={configured}
                removing={removing}
                replacing={replacing}
                value={String(draft[f.key] ?? "")}
                onChange={(v) => update(f.key, v)}
                onReplace={() => beginReplace(f.key)}
                onCancelReplace={() => cancelReplace(f.key)}
                onRemove={() => beginRemove(f.key)}
                onCancelRemove={() => cancelRemove(f.key)}
              />
            ) : (
              <input
                id={id}
                className={"field " + (f.type === "number" ? "ops-number" : "ops-input")}
                type={f.type === "number" ? "number" : "text"}
                min={f.min}
                max={f.max}
                value={
                  f.type === "list"
                    ? ((draft[f.key] as string[]) || []).join(",")
                    : String(draft[f.key] ?? "")
                }
                onChange={(e) =>
                  update(
                    f.key,
                    f.type === "number"
                      ? Number(e.target.value)
                      : f.type === "list"
                        ? e.target.value.split(",").map((s) => s.trim())
                        : e.target.value
                  )
                }
              />
            )}
          </AdminSettingsRow>
        );
      });

  if (!snapshot) return <div className="panel p-5" role="status">{error || "正在读取配置…"}</div>;

  const recordsTitle =
    name === "mail"
      ? "最近发送记录"
      : name === "storage"
        ? "历史存储引用"
        : name === "filter"
          ? "过滤相关记录"
          : name === "security"
            ? "本模块变更记录"
            : "维护操作记录";

  return (
    <div className="ops-panel">
      {(name === "mail" || name === "storage") && !snapshot.encryption_ready && (
        <p className="ops-hint">
          未配置 SETTINGS_MASTER_KEY，无法保存凭据。本地写在 backend/app.ini [security]，生产用同名环境变量。
        </p>
      )}
      {name === "maintenance" && snapshot.recovery_override && (
        <p role="alert" className="ops-alert">
          部署恢复开关正强制正常运行；关闭后已保存模式才会生效。
        </p>
      )}

      <fieldset disabled={saving} className="ops-fields">
        {schemas[name].map((group) => (
          <AdminSettingsGroup key={group.title} title={group.title} description={group.description}>
            {fields(group.fields.filter((f) => !f.advanced))}
            {group.fields.some((f) => f.advanced && (!f.s3 || draft.backend === "s3")) && (
              <details className="ops-advanced">
                <summary>高级</summary>
                {fields(group.fields.filter((f) => f.advanced))}
              </details>
            )}
          </AdminSettingsGroup>
        ))}
        {name === "storage" && (
          <p className="ops-hint">部署目录（只读）：{snapshot.local_directory}</p>
        )}
        {name === "mail" && snapshot.template_preview && (
          <MailTemplatePreview html={snapshot.template_preview} />
        )}
        {name === "filter" && (
          <FilterRules rules={(draft.rules as Rule[]) || []} onChange={(rules) => update("rules", rules)} />
        )}
      </fieldset>

      <section className="admin-settings-group ops-savebar">
        <div className="admin-settings-group-body">
          <AdminSettingsActions
            dirty={dirty}
            saving={saving}
            saveLabel="保存本页"
            error={error}
            saveDisabled={!dirty || saving || !!busy}
            onSave={() => void save()}
            onDiscard={() => {
              setDraft(snapshot.data);
              setClear([]);
              setEditingSecret([]);
              setError("");
            }}
          />
        </div>
      </section>

      {(name === "mail" || name === "storage" || name === "filter") && (
        <AdminSettingsGroup title="测试">
          {name === "mail" && (
            <AdminSettingsRow label="测试收件邮箱">
              <input
                aria-label="测试收件邮箱"
                className="field ops-input"
                type="email"
                value={recipient}
                onChange={(e) => setRecipient(e.target.value)}
              />
            </AdminSettingsRow>
          )}
          {name === "filter" && (
            <>
              <AdminSettingsRow label="范围">
                <select
                  aria-label="测试范围"
                  className="field ops-select"
                  value={scope}
                  onChange={(e) => setScope(e.target.value)}
                >
                  <option value="body">正文</option>
                  <option value="title">标题</option>
                  <option value="comment">评论</option>
                  <option value="username">用户名</option>
                </select>
              </AdminSettingsRow>
              <AdminSettingsRow label="文本" wide>
                <textarea
                  aria-label="测试文本"
                  rows={4}
                  className="field ops-input"
                  value={text}
                  onChange={(e) => setText(e.target.value)}
                />
              </AdminSettingsRow>
            </>
          )}
          <div className="ops-actions">
            {name === "mail" ? (
              <>
                <button
                  type="button"
                  className="btn btn-line btn-sm"
                  disabled={!!busy || saving}
                  onClick={() => void run("connection")}
                >
                  测试连接
                </button>
                <button
                  type="button"
                  className="btn btn-line btn-sm"
                  disabled={!!busy || !recipient || saving}
                  onClick={() => void run("send")}
                >
                  发送测试邮件
                </button>
              </>
            ) : (
              <button
                type="button"
                className="btn btn-line btn-sm"
                disabled={!!busy || saving}
                onClick={() => void run("test")}
              >
                {name === "filter" ? "测试规则" : "测试读写与清理"}
              </button>
            )}
          </div>
        </AdminSettingsGroup>
      )}

      {name === "maintenance" && (
        <AdminSettingsGroup title="诊断与维护">
          <div className="ops-tool-grid">
            <button
              type="button"
              className="ops-tool-card"
              disabled={!!busy}
              onClick={() => void run("diagnostics")}
            >
              <Activity size={18} aria-hidden />
              <span className="ops-tool-title">运行诊断</span>
              <span className="ops-tool-desc">数据库、存储、任务与邮件状态</span>
            </button>
            <button type="button" className="ops-tool-card" disabled={!!busy} onClick={() => void run("scan")}>
              <FileSearch size={18} aria-hidden />
              <span className="ops-tool-title">扫描临时文件</span>
              <span className="ops-tool-desc">只扫描，不删除</span>
            </button>
            <button
              type="button"
              className="ops-tool-card"
              disabled={!!busy || !candidates.length}
              onClick={() => {
                setCleanKind("clean-temporary");
                setConfirmClean(true);
              }}
            >
              <Trash2 size={18} aria-hidden />
              <span className="ops-tool-title">清理临时文件</span>
              <span className="ops-tool-desc">
                {candidates.length ? `已扫描 ${candidates.length} 个` : "请先扫描"}
              </span>
            </button>
            <button
              type="button"
              className="ops-tool-card"
              disabled={!!busy}
              onClick={() => {
                setCleanKind("clear-mail-logs");
                setConfirmClean(true);
              }}
            >
              <Mail size={18} aria-hidden />
              <span className="ops-tool-title">清理邮件记录</span>
              <span className="ops-tool-desc">超过保留期的已完成记录</span>
            </button>
          </div>
        </AdminSettingsGroup>
      )}

      {busy && (
        <p className="ops-busy" role="status">
          <Loader2 size={14} className="animate-spin" aria-hidden /> 正在执行…
        </p>
      )}

      {result !== null && (
        <div className="ops-result-panel" role="status">
          <div className="ops-result-head">
            <strong>{tested !== serialized ? "结果已过期（表单已改）" : "操作结果"}</strong>
            <button type="button" className="ops-text-btn" onClick={() => setResult(null)}>
              关闭
            </button>
          </div>
          <div className="ops-result-body">
            <ResultView value={result} />
          </div>
        </div>
      )}

      <AdminSettingsGroup title={recordsTitle}>
        <div className="ops-actions">
          <button type="button" className="btn btn-line btn-sm" disabled={!!busy} onClick={() => void run("records")}>
            <ClipboardList size={14} aria-hidden />
            {recordsLoaded ? "刷新记录" : "读取记录"}
          </button>
          {recordsLoaded && <span className="meta text-[12.5px]">{records.length} 条（最多 50）</span>}
        </div>
        {recordsLoaded && records.length === 0 && <p className="ops-hint">暂无记录</p>}
        {recordsLoaded && records.length > 0 && (
          <div className="ops-records">
            {records.map((r, i) => (
              <details className="ops-record" key={String(r.id || r.revision || i)}>
                <summary className="ops-record-summary">
                  <RecordSummary row={r} />
                </summary>
                <div className="ops-record-body">
                  <ResultView value={r} />
                </div>
              </details>
            ))}
          </div>
        )}
      </AdminSettingsGroup>

      <ConfirmDialog
        open={confirmClean}
        title={cleanKind === "clean-temporary" ? "清理已扫描的临时文件" : "清理过期邮件记录"}
        message={
          cleanKind === "clean-temporary"
            ? "仅删除扫描出的过期临时文件；保留草稿与正在上传的文件。"
            : "仅删除超过保留期且已完成或最终失败的记录。"
        }
        onConfirm={() => {
          setConfirmClean(false);
          void run(cleanKind);
        }}
        onCancel={() => setConfirmClean(false)}
      />
    </div>
  );
}

function secretNoun(key: string) {
  if (key === "password") return "授权码";
  if (key === "access_key") return "Access Key";
  if (key === "secret_key") return "Secret Key";
  return "凭据";
}

function SecretControl({
  id,
  noun,
  configured,
  removing,
  replacing,
  value,
  onChange,
  onReplace,
  onCancelReplace,
  onRemove,
  onCancelRemove,
}: {
  id: string;
  noun: string;
  configured: boolean;
  removing: boolean;
  replacing: boolean;
  value: string;
  onChange: (value: string) => void;
  onReplace: () => void;
  onCancelReplace: () => void;
  onRemove: () => void;
  onCancelRemove: () => void;
}) {
  if (removing)
    return (
      <div className="ops-secret" id={id} tabIndex={-1}>
        <div className="ops-secret-card is-remove" role="status">
          <div>
            <p className="ops-secret-title">保存后将移除</p>
            <p className="ops-secret-note">已存的{noun}会被删除。</p>
          </div>
          <button type="button" className="btn btn-line btn-sm" onClick={onCancelRemove}>
            保留
          </button>
        </div>
      </div>
    );
  if (!replacing)
    return (
      <div className="ops-secret" id={id}>
        <div className="ops-secret-card">
          <div>
            <p className="ops-secret-title">已保存</p>
            <p className="ops-secret-note">保存本页时继续使用。</p>
          </div>
          <div className="ops-secret-actions">
            <button type="button" className="btn btn-line btn-sm" onClick={onReplace}>
              更换
            </button>
            <button type="button" className="ops-text-btn is-danger" onClick={onRemove}>
              移除
            </button>
          </div>
        </div>
      </div>
    );
  return (
    <div className="ops-secret">
      <input
        id={id}
        autoComplete="new-password"
        className="field ops-input"
        type="password"
        value={value}
        placeholder={configured ? `新的${noun}` : noun}
        onChange={(e) => onChange(e.target.value)}
        autoFocus={configured}
      />
      {configured && (
        <button type="button" className="ops-text-btn" onClick={onCancelReplace}>
          取消更换
        </button>
      )}
    </div>
  );
}

function RecordSummary({ row }: { row: Record<string, unknown> }) {
  const kind = String(row.kind || row.module || row.action || row.status || "记录");
  const when = String(row.created_at || row.updated_at || row.tested_at || "");
  const extra = String(row.recipient || row.summary || row.word || row.state || "");
  return (
    <>
      <span className="ops-record-kind">{translateEnum(kind)}</span>
      {extra ? <span className="ops-record-extra">{truncate(extra, 48)}</span> : null}
      {when ? <span className="ops-record-when meta">{formatLocalDisplay(when) || when}</span> : null}
    </>
  );
}

const ENUM_MAP: Record<string, string> = {
  block: "拦截",
  log: "仅记录",
  pass: "通过",
  body: "正文",
  title: "标题",
  comment: "评论",
  username: "用户名",
  queued: "排队",
  sending: "发送中",
  retry: "等待重试",
  accepted: "已接受",
  failed: "失败",
  register: "注册验证",
  reset: "密码找回",
};

function translateEnum(value: string) {
  return ENUM_MAP[value] || value;
}

function truncate(s: string, max: number) {
  if (s.length <= max) return s;
  return s.slice(0, max - 1) + "…";
}

const labels: Record<string, string> = {
  candidates: "可清理文件",
  size: "字节",
  removed: "已清理",
  failed: "失败",
  message: "说明",
  result: "结果",
  text: "可读文本",
  hits: "命中",
  skipped: "跳过区域",
  id: "编号",
  word: "词语",
  scope: "范围",
  start: "起点",
  end: "终点",
  action: "动作",
  excepted: "例外覆盖",
  version: "应用版本",
  uptime_seconds: "运行秒数",
  database: "数据库",
  cache: "缓存",
  tasks: "任务服务",
  queued_mail: "排队邮件",
  storage: "存储",
  mail_test: "邮件历史测试",
  tested_at: "测试时间",
  note: "备注",
  state: "状态",
  kind: "业务类型",
  recipient: "脱敏收件人",
  status: "状态",
  attempts: "尝试次数",
  summary: "摘要",
  created_at: "创建时间",
  updated_at: "更新时间",
  revision: "配置版本",
  references: "引用对象数",
  actor_id: "操作者",
  module: "模块",
  fields: "变更字段",
  expired_partial_count: "过期临时文件数",
  expired_partial_bytes: "占用字节",
  protected_draft_attachments: "保留的草稿附件数",
  retention_days: "保留天数",
  count: "处理数量",
};

export function ResultView({ value, field = "" }: { value: unknown; field?: string }) {
  if (Array.isArray(value)) {
    if (value.length === 0) return <span>—</span>;
    if (value.length > 20)
      return (
        <div className="ops-results">
          <p className="meta text-[12px] mb-1">共 {value.length} 项，显示前 20</p>
          <ul className="ops-results-list">
            {value.slice(0, 20).map((v, i) => (
              <li key={i}>
                <ResultView value={v} />
              </li>
            ))}
          </ul>
        </div>
      );
    return (
      <ul className="ops-results-list">
        {value.map((v, i) => (
          <li key={i}>
            <ResultView value={v} />
          </li>
        ))}
      </ul>
    );
  }
  if (value && typeof value === "object")
    return (
      <dl className="ops-results">
        {Object.entries(value).map(([k, v]) => (
          <div key={k}>
            <dt>{labels[k] || k}</dt>
            <dd>
              <ResultView value={v} field={k} />
            </dd>
          </div>
        ))}
      </dl>
    );
  let display: unknown = value;
  if (typeof value === "string" && ["result", "action", "scope", "status", "kind"].includes(field)) {
    display = translateEnum(value);
  }
  if (typeof display === "string" && display.length > 120) {
    return (
      <span className="ops-truncate" title={display}>
        {truncate(display, 120)}
      </span>
    );
  }
  return <span>{display === true ? "是" : display === false ? "否" : String(display ?? "—")}</span>;
}