/* ============================================================
   Beacon CS — DEPLOY (evidence check · permission check · publish)
   ============================================================ */
function DeployView({ intent = {} }) {
  const { RELEASES } = window.DATA;
  const { PageHead, Badge } = window;
  const Icons = window.Icons;
  const [publishOpen, setPublishOpen] = useState(false);
  const [releases, setReleases] = useState(() => RELEASES.map(item => window.PROTOTYPE_STATE.publishedVersions[item.ver] || item));
  const candidateReady = intent.candidateReady === true || window.PROTOTYPE_STATE.testSuitePassed === true;
  const publishRelease = (release) => {
    const published = {
      ...release,
      stage: "production",
      canary: 100,
      by: "Eden",
      when: "刚刚发布",
      gate: "passed",
    };
    window.PROTOTYPE_STATE.publishedVersions[release.ver] = published;
    setReleases(items => items.map(item => item.ver === release.ver ? published : item));
  };

  const stageBadge = (s) => ({
    production: <Badge tone="green" dot="var(--green)">线上生效</Badge>,
    canary: <Badge tone="blue" dot="var(--blue)">逐步开放</Badge>,
    "awaiting-review": <Badge tone="amber" dot="var(--amber)">待发布</Badge>,
  })[s];

  return (
    <div className="content-pad fadein">
      <PageHead title="发布" sub="发布前核对来源、内容范围、工具分支和测试。"
        right={<button className="btn sm"><Icons.git s={14} /> 查看发布历史</button>} />

      <div className="col" style={{ gap: 14 }}>
        {releases.map(r => (
          <div key={r.ver} className="card card-pad rel-card">
            <div className="spread">
              <div>
                <div className="row" style={{ gap: 10 }}>
                  <span className="mono" style={{ fontWeight: 600, fontSize: 14 }}>{r.ver}</span>
                  {stageBadge(r.stage)}
                  {r.gate === "human-gate" ? <window.Redline>需要发布权限</window.Redline> : null}
                </div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>{r.target} · 操作人 {r.by} · {r.when}</div>
              </div>
              {r.stage === "awaiting-review"
                ? <div className="row" style={{ gap: 8 }}>
                    {candidateReady ? <Badge tone="green">测试已通过</Badge> : <Badge tone="red">测试未通过</Badge>}
                    <button className="btn primary sm" onClick={() => setPublishOpen(r)}><Icons.checkCircle s={14} /> 打开发布检查</button>
                  </div>
                : <div className="row" style={{ gap: 14 }}>
                    <div style={{ textAlign: "right" }}><div className="muted" style={{ fontSize: 11 }}>开放比例</div><div style={{ fontWeight: 600 }}>{r.canary}%</div></div>
                    <button className="btn sm">调整开放比例</button>
                  </div>}
            </div>
            {r.stage === "canary" && (
              <div style={{ marginTop: 12 }}>
                <div className="spread" style={{ marginBottom: 5 }}><span className="muted" style={{ fontSize: 12 }}>开放比例</span><span style={{ fontSize: 12, fontWeight: 600 }}>{r.canary}% 用户流量</span></div>
                <window.Meter pct={r.canary} color="var(--blue)" />
              </div>
            )}
          </div>
        ))}
      </div>

      {publishOpen ? <PublishGate rel={publishOpen} candidateReady={candidateReady} onPublish={publishRelease} onClose={() => setPublishOpen(false)} /> : null}
    </div>
  );
}

function PublishGate({ rel, candidateReady, onPublish, onClose }) {
  const Icons = window.Icons; const { Badge } = window;
  const [approved, setApproved] = useState(false);
  const openTarget = (section, nextTab, extra = {}) => window.BeaconNav?.go(section, nextTab ? { tab: nextTab, ...extra } : extra);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div className="row" style={{ gap: 10 }}>
            <div className="gate-ico" style={{ background: "rgba(245,158,11,.16)" }}><Icons.shield s={18} sw={2} /></div>
            <div><div style={{ fontWeight: 700, fontSize: 15 }}>发布检查</div><div className="muted" style={{ fontSize: 12.5 }}>{rel.ver} · {rel.target}</div></div>
          </div>
          <button className="btn ghost sm" aria-label="关闭发布审核" onClick={onClose}><Icons.x s={16} /></button>
        </div>
        <div className="modal-body">
          <dl className="kv" style={{ marginBottom: 16 }}>
            <dt>质量检查</dt><dd><Badge tone="green">已通过</Badge></dd>
            <dt>来源是否仍有效</dt><dd><Badge tone="green">当前有效</Badge></dd>
            <dt>因来源变化而停用的内容</dt><dd><Badge tone="green">0</Badge></dd>
            <dt>高风险问答 / 处理流程</dt><dd><Badge tone="green">当前有效</Badge></dd>
            <dt>工具结果分支</dt><dd><Badge tone="green">6 / 6 通过</Badge></dd>
            <dt>发送前红线检查</dt><dd><Badge tone="green">已通过</Badge></dd>
            <dt>无依据高风险结论泄露</dt><dd><Badge tone="green">0</Badge></dd>
            <dt>低风险回答方式</dt><dd><Badge tone="green">继续边生成边显示</Badge></dd>
            <dt>审计记录</dt><dd>问答 / 处理流程版本 · 工具结果类别 · 最终出口</dd>
            <dt>低风险和高频问题可回答范围</dt><dd><Badge tone="green">-1.4 / -3.2 个百分点</Badge></dd>
            <dt>当前无法解决</dt><dd>{candidateReady ? <Badge tone="green">上升 0.8 个百分点，未超过上限</Badge> : <Badge tone="amber">上升 2.7 个百分点，超过上限</Badge>}</dd>
            <dt>上线前对照测试结果</dt><dd>{candidateReady ? <Badge tone="green">全部通过</Badge> : <Badge tone="amber">1 项未达标</Badge>}</dd>
            <dt>发布权限</dt><dd><Badge tone="green">当前用户已具备</Badge></dd>
          </dl>
          <div className="four-el" style={{ marginBottom: 16 }}>
            <div className="four-el-h">发布依据</div>
            <div className="col" style={{ gap: 8 }}>
              {(rel.evidence || ["已发布常见问答：已检查", "改动后重新测试：已检查", "未允许内容使用：0"]).map((e, i) => (
                <div key={i} className="spread rc-row">
                  <span style={{ fontSize: 12.5 }}>{e}</span>
                  <Badge tone="green">通过</Badge>
                </div>
              ))}
            </div>
          </div>
          {approved ? (
            <div className="gate" style={{ background: "var(--green-bg)", borderColor: "var(--green-bd)", color: "#15803D" }}><div className="gate-ico" style={{ background: "rgba(22,163,74,.15)" }}><Icons.check s={17} sw={2.4} /></div><div style={{ flex: 1, fontWeight: 500 }}>版本已发布，测试、权限和操作人已记录。</div></div>
          ) : candidateReady ? (
            <div className="gate" style={{ background: "var(--green-bg)", borderColor: "var(--green-bd)", color: "#15803D" }}><div className="gate-ico" style={{ background: "rgba(22,163,74,.15)" }}><Icons.checkCircle s={17} sw={2} /></div><div style={{ flex: 1, fontWeight: 500 }}>检查通过，当前用户可发布。</div></div>
          ) : (
            <div className="gate red"><div className="gate-ico"><Icons.lock s={17} sw={2} /></div><div style={{ flex: 1, fontWeight: 500 }}>上线前对照测试有 1 项未达标：当前无法解决上升超过 2 个百分点。发布前必须退回测试。</div></div>
          )}
        </div>
        <div className="modal-foot">
          <span className="muted" style={{ fontSize: 12 }}><Icons.shield s={13} /> 发布记录操作人、内容版本、工具测试和红线结果。</span>
          <div className="row" style={{ gap: 8 }}>
            {approved
              ? <><button className="btn sm" onClick={onClose}>关闭</button><button className="btn primary sm" onClick={() => openTarget("analyze", "outcome")}>观察上线结果</button></>
              : candidateReady
                ? <><button className="btn sm" onClick={onClose}>暂不发布</button><button className="btn primary sm" onClick={() => { onPublish(rel); setApproved(true); }}><Icons.checkCircle s={13} /> 发布版本</button></>
                : <><button className="btn sm" onClick={() => openTarget("test", "shadow", { returned: "deploy" })}>退回测试</button><button className="btn locked sm" disabled><Icons.lock s={13} /> 发布已锁定</button></>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.DeployView = DeployView;