/* ============================================================
   page-cpr-flow.jsx — 版权流程
   流程图 + 4 类承制方申请通道矩阵 + 外部表&查询入口
   ============================================================ */
function PageCprFlow() {
  const [rows, ops] = useTable("apply_channels_v3", window.__SEED__.APPLY_CHANNELS);
  const [exts, extsOps] = useTable("external_forms_v3", window.__SEED__.EXTERNAL_FORMS);
  const { editing } = useEditMode();

  const blankCh = { channel: "", kind: "", bookApply: "", videoSubmit: "", extra: "", owner: "", note: "" };
  const blankExt = { kind: "", url: "", note: "" };

  const kindColor = (k) => ({
    "线下自营":         { tag: "#2F8F4C", bg: "#E6F2EA" },
    "线上达人":         { tag: "#C97A12", bg: "#FBEFD6" },
    "简笔奇迹(小白)":   { tag: "#1D4ED8", bg: "#DDE7F8" },
    "外部合作":         { tag: "#A04136", bg: "#F4DCD8" },
  }[k] || { tag: "#6E6A60", bg: "#ECE9E0" });

  return (
    <>
      <FolderHead
        index="02"
        title="版权流程"
        sub="承制方申请 → 不鸣初审 → 提交版权方 → 反馈结果"
      />

      <ProcessFlow steps={window.__SEED__.FLOW_CPR} title="版权申请四步流程" />

      <div className="section">
        <div className="section__head">
          <h3 className="section__title">承制方申请通道</h3>
          <span className="section__sub">不同承制方走不同的飞书表;书籍申请 + 视频回填一一对应</span>
        </div>

        <div className="callout" style={{ marginBottom: 12 }}>
          <strong>注意 ·</strong> 4 类承制方各有<strong>专属的申请表与视频收集表</strong>。
          收书阶段填「书籍申请」,完片后回「视频回填」,别拿错。
        </div>

        <div className="tbl-wrap tbl-wrap--scroll">
          <table className="tbl tbl--fixed">
            <colgroup>
              <col style={{ width: 130 }} />
              <col style={{ width: 110 }} />
              <col style={{ width: 230 }} />
              <col style={{ width: 230 }} />
              <col style={{ width: 220 }} />
              <col style={{ width: 140 }} />
              {editing && <col style={{ width: 60 }} />}
            </colgroup>
            <thead>
              <tr>
                <th>承制方</th>
                <th>类别</th>
                <th className="sub-head tint-warm">① 书籍申请</th>
                <th className="sub-head tint-blue">② 视频回填</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);
                const c = kindColor(r.channel);
                return (
                  <tr key={r.id}>
                    <td className="col-name" style={{ background: c.bg }}>
                      <div className="cell">
                        {editing ? (
                          <EditableCell value={r.channel} onChange={v => set("channel", v)} />
                        ) : (
                          <span style={{
                            background: c.tag, color: "#fff",
                            fontSize: 11.5, fontWeight: 500,
                            padding: "3px 9px", borderRadius: 3,
                            whiteSpace: "nowrap",
                          }}>{r.channel}</span>
                        )}
                      </div>
                    </td>
                    <td><EditableCell value={r.kind} onChange={v => set("kind", v)} /></td>
                    <td className="tint-warm col-url"><EditableCell value={r.bookApply} onChange={v => set("bookApply", v)} placeholder="飞书 · 书籍申请表" /></td>
                    <td className="tint-blue col-url"><EditableCell value={r.videoSubmit} onChange={v => set("videoSubmit", v)} placeholder="飞书 · 视频回填表" /></td>
                    <td className="col-url"><EditableCell value={r.extra} onChange={v => set("extra", v)} placeholder="—" /></td>
                    <td><EditableCell value={r.owner} onChange={v => set("owner", v)} /></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(blankCh)}>＋ 新增承制方通道</button>
          </div>
        </div>
      </div>

      <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={{ minWidth: 200 }} />
              {editing && <col style={{ width: 56 }} />}
            </colgroup>
            <thead>
              <tr>
                <th>表单类型</th>
                <th>URL</th>
                <th>备注</th>
                {editing && <th className="center">操作</th>}
              </tr>
            </thead>
            <tbody>
              {exts.map(r => {
                const set = (k, v) => extsOps.setCell(r.id, k, v);
                return (
                  <tr key={r.id}>
                    <td className="col-name"><EditableCell value={r.kind} onChange={v => set("kind", v)} /></td>
                    <td className="col-url"><EditableCell value={r.url} onChange={v => set("url", v)} placeholder="粘贴 URL" /></td>
                    <td><EditableCell value={r.note} onChange={v => set("note", v)} placeholder="—" /></td>
                    {editing && (
                      <td><div className="cell center"><DeleteBtn onClick={() => extsOps.removeRow(r.id)} /></div></td>
                    )}
                  </tr>
                );
              })}
            </tbody>
          </table>
          <div className="tbl-foot">
            <button className="btn-add" onClick={() => extsOps.addRow(blankExt)}>＋ 新增入口</button>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { PageCprFlow });