/* ============================================================
   page-prod-flow.jsx — 生产流程 (流程图 + 工程文件源)
   ============================================================ */
function PageProdFlow() {
  const [rows, ops] = useTable("operators_v5", window.__SEED__.OPERATORS);
  const { editing } = useEditMode();

  const blank = { name: "", team: "线下自营", files: "", updated: "" };

  return (
    <>
      <FolderHead
        index="03"
        title="生产流程"
        sub="排期录入 → 拍摄制作 → 成片提交 → 完片入库"
      />

      <ProcessFlow steps={window.__SEED__.FLOW_PROD} title="生产四步流程" />

      <div className="section">
        <div className="section__head">
          <h3 className="section__title">工程文件源</h3>
          <span className="section__sub">操盘手的工程文件入口 · 与漫剧生产系统联动</span>
        </div>

        <div className="tbl-wrap">
          <table className="tbl tbl--compact tbl--fixed">
            <colgroup>
              <col style={{ width: 140 }} />
              <col />
              <col style={{ width: 110 }} />
              {editing && <col style={{ width: 56 }} />}
            </colgroup>
            <thead>
              <tr>
                <th>操盘手</th>
                <th>工程文件入口</th>
                <th>更新</th>
                {editing && <th className="center">操作</th>}
              </tr>
            </thead>
            <tbody>
              {rows.map(r => {
                const set = (k, v) => ops.setCell(r.id, k, v);
                return (
                  <tr key={r.id}>
                    <td className="col-name"><EditableCell value={r.name} onChange={v => set("name", v)} /></td>
                    <td className="col-url"><EditableCell value={r.files} onChange={v => set("files", v)} placeholder="工程文件链接" /></td>
                    <td className="col-id"><EditableCell value={r.updated} onChange={v => set("updated", v)} className="mono" placeholder="—" /></td>
                    {editing && (
                      <td><div className="cell center"><DeleteBtn onClick={() => ops.removeRow(r.id)} /></div></td>
                    )}
                  </tr>
                );
              })}
            </tbody>
          </table>
          <div className="tbl-foot">
            <button className="btn-add" onClick={() => ops.addRow(blank)}>＋ 新增操盘手</button>
            <span className="muted" style={{ fontSize: 11.5 }}>与漫剧生产系统联动 · 工程文件链接由系统自动维护,可手动覆盖</span>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { PageProdFlow });