// ────── PAGE: 项目工作台 (Workbench) ──────
function PageWorkbench({ setPage, projectName, pushToast }) {
  const { Ico } = window;

  const nodes = [
    { id: 'N01', code: 'NO·01', name: '需求确认',         status: 'done',     time: '02 / 04', desc: '故事核心已定。' },
    { id: 'N02', code: 'NO·02', name: '创作方案',         status: 'progress', time: '进行中',   desc: '用一句话或几句话定义故事核心，先确定结构、主线和冲突。', active: true },
    { id: 'N03', code: 'NO·03', name: '角色档案',         status: 'todo' },
    { id: 'N04', code: 'NO·04', name: '角色参考图与分布', status: 'todo' },
    { id: 'N05', code: 'NO·05', name: '故事地图',         status: 'todo' },
    { id: 'N06', code: 'NO·06', name: '分集目录',         status: 'todo' },
    { id: 'N07', code: 'NO·07', name: '第 1 集脚本',       status: 'todo' },
    { id: 'N08', code: 'NO·08', name: '第 1 集视觉指导',   status: 'todo' },
    { id: 'N09', code: 'NO·09', name: '分镜本',           status: 'todo' },
    { id: 'N10', code: 'NO·10', name: '分镜词组化',       status: 'todo' },
    { id: 'N11', code: 'NO·11', name: 'AI 可行性合规检查', status: 'todo' },
    { id: 'N12', code: 'NO·12', name: '导出与交付包',     status: 'todo' },
  ];

  const [selected, setSelected] = React.useState('N02');
  const [progress, setProgress] = React.useState(17);
  const [running, setRunning] = React.useState(false);
  const sel = nodes.find(n => n.id === selected);

  const sideflow = [
    { st: 'done', name: '需求确认', tag: '已完成', sub: '02/04' },
    { st: 'active', name: '创作方案', tag: '进行中', sub: '' },
    { st: 'todo', name: '角色档案', tag: '未开始' },
    { st: 'todo', name: '故事地图 / 分集目录', tag: '未开始' },
    { st: 'todo', name: '分集本', tag: '未开始' },
    { st: 'todo', name: '视觉指导', tag: '未开始' },
    { st: 'todo', name: '分镜表', tag: '未开始' },
    { st: 'todo', name: '提示词模板化', tag: '未开始' },
  ];

  const precheck = [
    { name: '创作方案',     tag: 'BLM-5.1 · 主控制路由', st: 'ok',   note: '已就位' },
    { name: '分集脚本',     tag: 'BLM-5.1 · 主控制路由', st: 'ok',   note: '已就位' },
    { name: '视觉文本',     tag: 'BLM-5.1 · 主控制路由', st: 'ok',   note: '已就位' },
    { name: '资产校正',     tag: '关闭模型 · 未通选模型', st: 'warn', note: '需启用' },
    { name: '分镜生成',     tag: 'Nano Banana Pro · 主控 · API Key 未配置', st: 'warn', note: '需配置' },
    { name: '导出',         tag: 'BLM-5.1 · 主控制路由', st: 'ok',   note: '已就位' },
  ];

  const onPush = () => {
    setRunning(true);
    pushToast({ kind: 'ok', msg: `推进 NO·02 → 创作方案`, sub: '调用 BLM-5.1 · 预计 2.4s' });
    let p = progress;
    const id = setInterval(() => {
      p += 6;
      setProgress(Math.min(100, p));
      if (p >= 100) { clearInterval(id); setRunning(false); pushToast({ kind: 'ok', msg: 'NO·02 完成 · 已校验' }); }
    }, 220);
  };

  return (
    <div className="page page-anim">
      <div className="pg-head">
        <div className="lhs">
          <div className="super">WORKBENCH · 02</div>
          <h2>{projectName}</h2>
        </div>
        <div className="rhs">
          <div className="pg-meta"><span className="k">CURRENT</span><span className="v v-accent">NO·02 创作方案</span></div>
          <div className="pg-meta"><span className="k">PROGRESS</span><span className="v">{progress.toFixed(0)} / 100</span></div>
          <button className="btn" onClick={() => setPage('hub')}>返回项目中心</button>
        </div>
      </div>

      {/* ─── 3 columns ─── */}
      <div style={{ display: 'grid', gridTemplateColumns: '210px 1fr 280px', gap: 14, height: 'calc(100% - 120px)' }}>

        {/* ─── workflow column ─── */}
        <div className="card corner-ticks" style={{ overflow: 'auto' }}>
          <div className="card-head" style={{ padding: '12px 14px' }}>
            <span className="super">WORKFLOW · 工作流</span>
          </div>
          <div style={{ padding: 14 }}>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14, color: 'var(--fg)' }}>V1 生产节点</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, position: 'relative' }}>
              <div style={{ position: 'absolute', left: 7, top: 8, bottom: 8, width: 1,
                background: 'linear-gradient(180deg, var(--accent), var(--bd) 30%)' }} />
              {sideflow.map((s, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', position: 'relative' }}>
                  <div style={{
                    width: 14, height: 14, borderRadius: '50%', flexShrink: 0, marginTop: 6,
                    background: s.st === 'done' ? 'var(--ok)' : s.st === 'active' ? 'var(--accent)' : 'var(--bg-3)',
                    boxShadow: s.st === 'active' ? '0 0 12px var(--accent)' : 'none',
                    border: s.st === 'todo' ? '1px solid var(--bd-1)' : 'none',
                  }} />
                  <div style={{
                    flex: 1, padding: '8px 10px', borderRadius: 6,
                    background: s.st === 'active' ? 'var(--bg-card-2)' : 'var(--bg-2)',
                    border: `1px solid ${s.st === 'active' ? 'var(--bd-accent)' : 'var(--bd)'}`,
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 4 }}>{s.name}</div>
                    <span className={`badge ${s.st === 'done' ? 'badge-ok' : s.st === 'active' ? 'badge-warn' : ''}`}>
                      {s.tag}{s.sub && ` · ${s.sub}`}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* ─── center column ─── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, overflow: 'auto' }}>
          <div className="card corner-ticks">
            <div className="card-head">
              <span className="super">CURRENT STAGE · 原创剧本起点</span>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn"><Ico.Edit /> 切换版本 J</button>
                <button className="btn">先配版 · 调试</button>
              </div>
            </div>
            <div className="card-body">
              <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>从原创剧本开始</div>
              <div style={{ color: 'var(--fg-2)', fontSize: 12, marginBottom: 14 }}>
                用第一句话或几句话描述故事核心，进入主线、分镜本。视觉指导按分级模型支撑。
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                <span className="lbl">生产节点状态进度</span>
                <span className="sp" />
                <span className="num lbl-accent" style={{ fontSize: 11 }}>{progress.toFixed(1)}% · 2 / 12</span>
              </div>
              <div className="pbar" style={{ marginBottom: 18 }}><div className="pbar-fill" style={{ width: `${progress}%` }} /></div>

              <div className="grid-3" style={{ gap: 8 }}>
                {nodes.map((n, i) => {
                  const isActive = n.id === selected;
                  const isDone = n.status === 'done';
                  const isProgress = n.status === 'progress';
                  return (
                    <div key={n.id} onClick={() => setSelected(n.id)}
                      className="scan-target"
                      style={{
                        padding: '10px 12px', borderRadius: 6, cursor: 'default',
                        background: isActive ? 'var(--bg-card-2)' : 'var(--bg-2)',
                        border: `1px solid ${isActive ? 'var(--bd-accent)' : 'var(--bd)'}`,
                        boxShadow: isActive ? 'inset 0 0 0 1px var(--accent-soft)' : 'none',
                        position: 'relative', minHeight: 78, display: 'flex', flexDirection: 'column', gap: 4,
                      }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span className="lbl" style={{ fontSize: 9, color: isActive ? 'var(--accent)' : 'var(--fg-3)' }}>{n.code}</span>
                        {isDone && <Ico.Check />}
                        {isProgress && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 6px var(--accent)' }} />}
                      </div>
                      <div style={{ fontSize: 12, fontWeight: 600, color: isActive ? 'var(--accent)' : 'var(--fg)' }}>{n.name}</div>
                      <div style={{ fontSize: 10, color: 'var(--fg-3)', fontFamily: 'var(--f-mono)' }}>
                        {isDone ? '已完成' : isProgress ? '进行中' : '待开始'}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* current node panel */}
          <div className="card corner-ticks">
            <div className="card-head">
              <span className="super">● CURRENT NODE · {sel.code} {sel.name}</span>
            </div>
            <div className="card-body">
              <div style={{ fontSize: 13, color: 'var(--fg-1)', marginBottom: 12, lineHeight: 1.6 }}>
                {sel.desc || '该节点尚未开始。点击下方按钮启动。'}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontSize: 11 }}>
                <div>
                  <div className="lbl" style={{ marginBottom: 4 }}>下一步</div>
                  <div style={{ color: 'var(--fg-1)' }}>故事方案 → 角色档案</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="lbl" style={{ marginBottom: 4 }}>更新于</div>
                  <div className="num" style={{ color: 'var(--fg-1)' }}>2026/4/27 02:24:31 · by 速隐</div>
                </div>
              </div>
            </div>
          </div>

          {/* push button */}
          <div className="scan-target" style={{
            background: 'linear-gradient(90deg, var(--bg-card-2), var(--bg-card))',
            border: '1px solid var(--bd-accent)', borderRadius: 8, padding: '14px 18px',
            display: 'flex', alignItems: 'center', gap: 14, cursor: 'default',
            boxShadow: 'inset 0 0 0 1px var(--accent-soft)',
          }} onClick={onPush}>
            <div style={{ width: 36, height: 36, borderRadius: 6, background: 'var(--accent)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          color: '#0a0c10', boxShadow: '0 0 18px var(--accent-glow)' }}>
              <Ico.Play />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{running ? '正在推进...' : '继续推进'}</div>
              <div className="lbl" style={{ marginTop: 2 }}>EXECUTE NODE · NO·02 创作方案</div>
            </div>
            <div style={{ width: 80, height: 32 }}>
              <window.Sparkline data={[2,4,3,5,6,5,7,8,7,9,10,12]} />
            </div>
            <Ico.Arrow />
          </div>
        </div>

        {/* ─── right column: precheck ─── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, overflow: 'auto' }}>
          <div className="card corner-ticks">
            <div className="card-head">
              <span className="super">PRECHECK · 模型检查</span>
              <span className="badge badge-ok"><span className="dot" /> OK</span>
            </div>
            <div className="card-body" style={{ padding: 14 }}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>生成前置检查</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 14 }}>下一步未来模型已就绪</div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {precheck.map((p, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <div style={{
                      width: 8, height: 8, borderRadius: '50%', marginTop: 6, flexShrink: 0,
                      background: p.st === 'ok' ? 'var(--ok)' : 'var(--accent)',
                      boxShadow: p.st === 'ok' ? '0 0 6px var(--ok)' : '0 0 6px var(--accent)',
                    }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12, fontWeight: 600 }}>{p.name}</div>
                      <div style={{ fontSize: 10, color: 'var(--fg-3)', fontFamily: 'var(--f-mono)' }}>{p.tag}</div>
                    </div>
                    <span className={`badge ${p.st === 'ok' ? 'badge-ok' : 'badge-warn'}`} style={{ fontSize: 9 }}>
                      {p.note}
                    </span>
                  </div>
                ))}
              </div>

              <button className="btn" style={{ width: '100%', marginTop: 14, justifyContent: 'center' }}
                onClick={() => setPage('model')}>
                ▸ 打开模型设置
              </button>
            </div>
          </div>

          <div className="card corner-ticks">
            <div className="card-head">
              <span className="super">ASSETS · 资产概览</span>
              <button className="icon-btn" style={{ width: 22, height: 22 }} onClick={() => setPage('asset')}>
                <Ico.Arrow s={11} />
              </button>
            </div>
            <div className="card-body" style={{ padding: 14 }}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>数字资产</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 10 }}>
                {[
                  { k: '角色', v: 0 }, { k: '场景', v: 0 }, { k: '道具', v: 0 },
                  { k: '参考', v: 0 }, { k: '提示', v: 0 }, { k: '分镜', v: 0 },
                ].map((a, i) => (
                  <div key={i} style={{
                    background: 'var(--bg-2)', border: '1px solid var(--bd)',
                    borderRadius: 5, padding: '8px 10px', textAlign: 'center'
                  }}>
                    <div className="num" style={{ fontSize: 18, fontWeight: 700 }}>{a.v}</div>
                    <div className="lbl" style={{ fontSize: 9 }}>{a.k}</div>
                  </div>
                ))}
              </div>
              <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center' }}
                onClick={() => setPage('asset')}>
                <Ico.Plus s={11} /> QUICK · 角色档案生成
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.PageWorkbench = PageWorkbench;