/* ZY console — 受控动作四闸门弹窗（预检 → 审批 → 执行 → 回执）。全站复用，
   经 App.jsx 的 onAct={a=>setGate(a)} 被 KitCrm/KitFreight/KitFinance/KitCommission/
   KitManual/KitProcurement/KitCost/KitCmd/ExceptionDrawer/ApprovalDrawer 等共用。
   对齐 DESIGN.md：受控动作必须有预检、确认短语、老板写入口令、回滚说明、留痕；
   危险动作额外标红。老板写入口令 = 与确认短语不同的第二因子——短语防误触，
   口令证明"我是老板本人"，二者都必填才能执行。 */
const DSGATE = window.ZYDesignSystem_d746df;

function KitControlledAction({ action, onClose }) {
  const { Icon } = DSGATE;
  const [phrase, setPhrase] = React.useState("");
  const [bossToken, setBossToken] = React.useState(""); // session-only，从不持久化
  const [done, setDone] = React.useState(false);
  const [showBoundary, setShowBoundary] = React.useState(false);
  const [edits, setEdits] = React.useState(() => {
    const m = {}; (action && action.editFields || []).forEach(f => { m[f.key] = f.value; }); return m;
  });
  if (!action) return null;

  const danger = action.danger;
  const phraseOk = phrase.trim() === action.phrase;
  const tokenOk = bossToken.trim().length > 0;
  const ok = phraseOk && tokenOk;
  const setField = (k, v) => setEdits(e => ({ ...e, [k]: v }));
  const derived = action.derive ? action.derive(edits) : null;
  const dirty = (action.editFields || []).some(f => Number(edits[f.key]) !== Number(f.value));
  const submit = () => { if (!ok) return; setDone(true); setBossToken(""); if (action.onSubmit) action.onSubmit(edits); };
  const close = () => { setBossToken(""); onClose(); };

  const GATES = ["预检", "审批", "执行", "回执"];

  return (
    <div className="camodal__scrim" onClick={close}>
      <div className="camodal" onClick={e => e.stopPropagation()}>
        {done ? (
          <div className="cadone">
            <span className="cadone__ic"><Icon name="CheckCheck" size={26} /></span>
            <div className="cadone__t">{action.title} · 已提交</div>
            <div className="cadone__d">已生成执行单并写入业务数据，回读校验通过，操作已留痕。如需撤销，按回滚说明在时限内操作。</div>
            <button className="btn btn--ghost" onClick={close} style={{ marginTop: 6 }}>关闭</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="camodal__head">
              <span className={"camodal__ic" + (danger ? " camodal__ic--danger" : "")}><Icon name={danger ? "ShieldAlert" : "ShieldCheck"} size={20} /></span>
              <div>
                <div className="camodal__t">{action.title}</div>
                <div className="camodal__sub">{danger ? "危险动作 · 受控执行" : "受控动作"} · {action.subject}</div>
              </div>
              <button className="camodal__x" onClick={close}><Icon name="X" size={17} /></button>
            </div>

            <div className="camodal__body">
              {/* 四闸门·紧凑步骤 */}
              <div style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                {GATES.map((g, i) => (
                  <React.Fragment key={i}>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 600, color: i === 0 ? "var(--accent-ink)" : "var(--fg-3)" }}>
                      <span className="cagate__n">{i + 1}</span>{g}
                    </span>
                    {i < GATES.length - 1 && <Icon name="ChevronRight" size={13} style={{ color: "var(--fg-4)" }} />}
                  </React.Fragment>
                ))}
              </div>

              {/* 可修改字段 — 修改即重算毛利 */}
              {action.editFields && action.editFields.length > 0 && (
                <div>
                  <div className="caphrase__l">可修改字段 · 修改即重算毛利{dirty && <span className="caedit__tag">已改动</span>}</div>
                  <div className="caedit">
                    {action.editFields.map(f => (
                      <label className="caedit__f" key={f.key}>
                        <span className="caedit__k">{f.label}</span>
                        <span className="caedit__in">
                          <span className="caedit__unit">¥</span>
                          <input className="caedit__i" type="number" value={edits[f.key]}
                            onChange={e => setField(f.key, e.target.value === "" ? "" : Number(e.target.value))} />
                        </span>
                      </label>
                    ))}
                  </div>
                  {derived && (
                    <div className="caedit__out">
                      {derived.map((d, i) => (
                        <div className="caedit__or" key={i}>
                          <span className="caedit__ok">{d.k}</span>
                          <span className={"caedit__ov num " + (d.tone || "")}>{d.v}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* 预检材料 / 影响范围 */}
              {action.preview && action.preview.length > 0 && (
                <div>
                  <div className="caphrase__l">预检材料 · 影响范围</div>
                  <div className="capreview">
                    {action.preview.map((p, i) => (
                      <div className="capreview__r" key={i}>
                        <span className="capreview__k">{p.k}</span>
                        {p.to != null
                          ? <span><span className="capreview__from">{p.from}</span><span className="capreview__to">{p.to}</span></span>
                          : <span className="capreview__v">{p.v}</span>}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* 只读 / 不写入边界（默认收起，架构师/老板都可展开核实） */}
              {(action.wont || action.forbidden) && (
                <div className="cabound">
                  <button className="cabound__toggle" onClick={() => setShowBoundary(v => !v)}>
                    <Icon name={showBoundary ? "ChevronDown" : "ChevronRight"} size={13} />
                    只读 / 不写入边界 · 来源 {action.source || "—"}
                  </button>
                  {showBoundary && (
                    <React.Fragment>
                      {(action.wont || []).map((w, i) => (
                        <div className="cabound__li" key={"w" + i}><Icon name="Check" size={13} />{w}</div>
                      ))}
                      {(action.forbidden || []).map((f, i) => (
                        <div className="cabound__li cabound__li--no" key={"f" + i}><Icon name="Ban" size={13} />默认关闭的高危写入：{f}</div>
                      ))}
                    </React.Fragment>
                  )}
                </div>
              )}

              {/* 确认短语 */}
              <div>
                <div className="caphrase__l">请输入确认短语 <b>{action.phrase}</b> 以执行：</div>
                <input className="caphrase__i" value={phrase} placeholder={action.phrase}
                  onChange={e => setPhrase(e.target.value)} onKeyDown={e => { if (e.key === "Enter" && tokenOk) submit(); }} />
              </div>

              {/* 老板写入口令（C1） */}
              <div className="bosstoken">
                <div className="bosstoken__l"><Icon name="Lock" size={13} />老板写入口令</div>
                <div className="bosstoken__hint">此为真实写入。需老板写入口令方可执行——登录身份不足以写入。</div>
                <input className="bosstoken__i" type="password" value={bossToken} placeholder="输入老板写入口令"
                  onChange={e => setBossToken(e.target.value)} onKeyDown={e => { if (e.key === "Enter" && phraseOk) submit(); }} />
              </div>
            </div>

            <div className="camodal__foot">
              <span className="camodal__note"><Icon name="RotateCcw" size={13} />回滚：{action.rollbackNote || "时限内可撤销，操作留痕"}</span>
              <span style={{ display: "flex", gap: 8 }}>
                <button className="btn btn--ghost" onClick={close}>取消</button>
                <button className={"btn " + (danger ? "btn--danger" : "btn--solid")} disabled={!ok} onClick={submit}>{action.submitLabel || "确认执行"}</button>
              </span>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { KitControlledAction });