/* ============================================================
   Beacon CS — SETTINGS (global integrations · data access baseline)
   ============================================================ */
function connectionActionName(action) {
  return ({
    get_funds_history: "查询资金记录",
    get_account_status: "查询账户状态",
    list_messages: "查询站内消息",
    get_kyc_level: "查询身份认证等级",
    get_kyc_status: "查询身份认证状态",
    get_reject_code: "查询未通过原因代码",
    get_risk_flags: "查询风险信号",
    is_high_value: "判断是否属于高资产",
    create_handoff_brief: "创建转人工摘要",
    get_ticket_status: "查询工单状态",
  })[action] || "内部服务动作";
}

function SettingsView({ intent = {} }) {
  const { MCP_SERVERS, DND_MATRIX } = window.DATA;
  const { PageHead, Badge } = window;
  const Icons = window.Icons;
  const [tab, setTab] = useState("integrations");
  const [mcpSel, setMcpSel] = useState(null);
  const connectionList = MCP_SERVERS.filter(s => s.health !== "ok" || ["usm-mcp", "kyc-mcp", "risk-mcp", "ticket-mcp"].includes(s.id));
  useEffect(() => {
    const t = intent.tab || window.BeaconNav?.intent("settings")?.tab;
    if (t === "policy") window.BeaconNav?.go("train", { tab: "review" });
    else if (t === "redline") window.BeaconNav?.go("test", { tab: "safety" });
    else if (t) setTab(t === "mcp" ? "integrations" : t);
  }, [intent.tab]);

  return (
    <div className="content-pad fadein">
      <PageHead title="设置" sub="管理连接和数据权限。"
        right={<button className="btn sm"><Icons.doc s={14} /> 查看配置变更记录</button>} />

      <window.Tabs active={tab} onChange={setTab} tabs={[
        { id: "integrations", label: "集成配置" },
        { id: "boundary", label: "数据与权限" },
      ]} />

      {tab === "integrations" && (
        mcpSel ? <McpDetail s={mcpSel} onBack={() => setMcpSel(null)} />
        : (
          <div>
            <div className="spread" style={{ marginBottom: 12, gap: 12, alignItems: "flex-start" }}>
              <div className="note" style={{ flex: 1 }}><Icons.cube s={14} style={{ flexShrink: 0 }} /> 这里只设置连接和默认权限。运行状态见“分析”，流程绑定见“训练”。</div>
              <button className="btn sm" onClick={() => window.BeaconNav?.go("analyze", { tab: "health" })}><Icons.analyze s={13} /> 查看运行状态</button>
            </div>
            <div className="mcp-grid">
              {connectionList.map(s => (
                <button key={s.id} className="mcp-card" onClick={() => setMcpSel(s)}>
                  <div className="spread" style={{ marginBottom: 8 }}>
                    <span className="row" style={{ gap: 8 }}><Icons.cube s={16} className="muted" /><span style={{ fontWeight: 600, fontSize: 13 }}>{s.displayLabel}</span></span>
                    <Badge tone="green">已配置</Badge>
                  </div>
                  <div className="row" style={{ gap: 8, marginTop: 8 }}>
                    <span style={{ fontSize: 12, fontWeight: 500, color: s.mode.includes("写") || s.mode.includes("write") ? "var(--amber-ink)" : "var(--ink-3)" }}>{s.mode}</span>
                    {s.note.includes("禁止披露") ? <span className="risk-lock" title="隐藏字段会在服务端移除"><Icons.lock s={12} /></span> : null}
                  </div>
                  <div className="spread" style={{ marginTop: 10 }}>
                    <span className="muted" style={{ fontSize: 11.5 }}>默认授权 {s.allow.length} 项</span>
                    <span className="action-cta">管理<Icons.chevR s={13} /></span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )
      )}

      {tab === "boundary" && (
        <div>
          <div className="gate red" style={{ marginBottom: 16 }}>
            <div className="gate-ico"><Icons.lock s={17} sw={2} /></div>
            <div style={{ flex: 1, fontWeight: 500 }}>敏感字段在进入应用前由服务端移除。 <Badge tone="gray">始终启用</Badge></div>
          </div>
          <div className="card">
            <div className="card-head"><Icons.eyeOff s={15} /><span className="card-title">数据与权限</span><span className="card-sub">不同角色的全局可见范围</span><button className="btn sm ghost" style={{ marginLeft: "auto" }} onClick={() => window.BeaconNav?.go("test", { tab: "safety" })}>运行泄露测试</button></div>
            <table className="tbl dnd">
              <thead><tr><th>敏感字段</th><th>来源</th><th>终端用户</th><th>坐席（L1–L3）</th><th>法定签批人</th></tr></thead>
              <tbody>
                {DND_MATRIX.map((d, i) => (
                  <tr key={i}>
                    <td style={{ fontWeight: 600 }}>{d.field}</td>
                    <td>{d.mcpLabel}</td>
                    <td><VisCell v={d.user} /></td>
                    <td><VisCell v={d.agent} /></td>
                    <td><VisCell v={d.legal} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="card-pad row" style={{ gap: 18, borderTop: "1px solid var(--line-2)", fontSize: 12 }}>
              <span className="mono dnd-arch">进入界面前已由服务端移除</span>
              <span className="muted" style={{ marginLeft: "auto" }}>不会渲染原始值</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function VisCell({ v }) {
  const Icons = window.Icons;
  if (v === "blocked") return <span className="vis blocked"><Icons.lock s={12} sw={2.2} /> 已阻断</span>;
  if (v === "tiered") return <span className="vis tiered"><Icons.eye s={12} /> 分级可见</span>;
  return <span className="vis viewonly"><Icons.eye s={12} /> 只读</span>;
}

function McpDetail({ s, onBack }) {
  const Icons = window.Icons; const { Badge } = window;
  return (
    <div className="fadein">
      <button className="btn sm ghost" onClick={onBack} style={{ marginBottom: 14 }}><Icons.chevR s={14} style={{ transform: "rotate(180deg)" }} /> 返回集成配置</button>
      <div className="sec-2col">
        <div className="card">
          <div className="card-head"><Icons.cube s={16} /><span className="card-title">{s.displayLabel}</span><Badge tone="green">已配置</Badge></div>
          <div className="card-pad">
            <dl className="kv" style={{ marginBottom: 14 }}>
              <dt>用途</dt><dd>{s.label}</dd>
              <dt>默认权限</dt><dd><Badge tone={s.mode.includes("写") ? "purple" : "gray"}>{s.mode}</Badge></dd>
              <dt>配置状态</dt><dd><Badge tone="green">已连接</Badge></dd>
              <dt>允许项目</dt><dd>{s.allow.length} 项</dd>
            </dl>
            <div className="muted" style={{ fontSize: 12.5, lineHeight: 1.55 }}>{s.note}</div>
            <div className="row" style={{ gap: 8, marginTop: 14 }}>
              <button className="btn sm" onClick={() => window.BeaconNav?.go("analyze", { tab: "health" })}><Icons.analyze s={13} /> 查看运行状态</button>
              <button className="btn sm" onClick={() => window.BeaconNav?.go("train", { tab: "skills" })}><Icons.train s={13} /> 查看处理流程使用</button>
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><span className="card-title">默认允许范围</span><span className="card-sub">具体处理流程仍需单独绑定</span></div>
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            {s.allow.map((a, i) => {
              const write = a.includes("*");
              return (
                <div key={i} className="spread allow-row">
                  <span>
                    <span style={{ fontSize: 12.5 }}>{connectionActionName(a.replace("*", ""))}</span>
                    <span className="mono muted" style={{ display: "block", fontSize: 10.5, marginTop: 2 }}>研发标识：{a.replace("*", "")}</span>
                  </span>
                  {write ? <Badge tone="purple">修改操作需审核</Badge> : <Badge tone="gray">只读</Badge>}
                </div>
              );
            })}
            <div className="note" style={{ marginTop: 8 }}><Icons.shield s={13} style={{ flexShrink: 0 }} /> 列表外调用会被拒绝并记录。</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SettingsView = SettingsView;