// ────── PAGE: 剧本与流程 (Script) — HERO PAGE ──────
function PageScript({ setPage, projectName, pushToast }) {
  const { Ico } = window;

  const phases = ['故事种子', '创作方案', '角色档案', '角色参考图与分布', '故事地图',
    '分集目录', '第 1 集脚本', '第 1 集视觉指导', '分镜本', '分镜词组化', 'AI 可行性合规检查', '导出交付'];
  const [phase, setPhase] = React.useState(0);

  const checks = [
    { ok: true,  k: '故事种子',   note: '至少一句话定调故事核心。',           tag: '通过',   kind: 'ok' },
    { ok: true,  k: '题材方向',   note: '项目已选定悬疑结构，是否古装审定的方向已定形完成。', tag: '通过', kind: 'ok' },
    { ok: false, k: '视觉风格',   note: '项目已选择视觉风格，建议结合面景关系或确保统一。',     tag: '注意', kind: 'warn' },
  ];

  const [storyInput, setStoryInput] = React.useState(
    '七年前的一桩数据黑市案重新浮出水面。前网络安全分析师沈青羽辞职归乡，本想躲开纷争，却在守夜人聚会的第七天，遇到了一个不该存在的孩子。'
  );
  const [origin, setOrigin] = React.useState('可信靠：边塞、归乡、走人、谍训、幻象的拷贝灵感了。');

  return (
    <div className="page page-anim">
      <div className="pg-head">
        <div className="lhs">
          <div className="super">SCRIPT · 04 — HERO</div>
          <h2>{projectName} · 故事 / 剧情地图 / 分集剧本</h2>
        </div>
        <div className="rhs">
          <button className="btn" onClick={() => setPage('hub')}>返回项目中心</button>
        </div>
      </div>

      {/* ── current suggestion top card ── */}
      <div className="card corner-ticks" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <span className="super">CURRENT · 当前建议 · 故事种子</span>
          <span className="badge badge-warn">SUGGESTION</span>
        </div>
        <div className="card-body">
          <div style={{ fontSize: 22, fontWeight: 600, marginBottom: 6 }}>原创剧本起点</div>
          <div style={{ color: 'var(--fg-2)', fontSize: 13, marginBottom: 18 }}>
            用一句话或几个核心冲突，未来定剧情、主线定冲突。
          </div>

          {/* phase tabs */}
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 18, padding: '4px',
                        background: 'var(--bg-1)', borderRadius: 6 }}>
            {phases.map((p, i) => (
              <div key={i} onClick={() => setPhase(i)}
                className="scan-target"
                style={{
                  padding: '6px 12px', borderRadius: 4, cursor: 'default',
                  background: i === phase ? 'var(--accent-soft)' : 'transparent',
                  border: `1px solid ${i === phase ? 'var(--bd-accent)' : 'transparent'}`,
                  color: i === phase ? 'var(--accent)' : 'var(--fg-2)',
                  fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '.06em',
                }}>{p}</div>
            ))}
          </div>

          <div className="lbl" style={{ marginBottom: 10 }}>—— PHASE GATE · 故事种子合规检查</div>

          {/* check rows */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
            {checks.map((c, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 14, padding: '10px 14px',
                background: c.kind === 'warn' ? 'rgba(245,166,35,0.06)' : 'var(--bg-2)',
                border: `1px solid ${c.kind === 'warn' ? 'var(--bd-accent)' : 'var(--bd)'}`,
                borderRadius: 6,
              }}>
                <div style={{
                  width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: c.kind === 'warn' ? 'rgba(245,166,35,0.18)' : 'rgba(92,220,154,0.15)',
                  color: c.kind === 'warn' ? 'var(--accent)' : 'var(--ok)',
                }}>
                  {c.kind === 'warn' ? <Ico.Warn /> : <Ico.Check />}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{c.k}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 2 }}>{c.note}</div>
                </div>
                <span className={`badge badge-${c.kind}`}>● {c.tag}</span>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-accent" onClick={() => {
              pushToast({ kind: 'ok', msg: '已保存当前阶段', sub: '推进至 创作方案' });
              setPhase(Math.min(phases.length - 1, phase + 1));
            }}>
              <Ico.Arrow /> 保存并继续
            </button>
            <button className="btn"><Ico.Edit /> 编辑设置</button>
          </div>
        </div>
      </div>

      {/* ── 3 columns: input / plan / map ── */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>

        <div className="card corner-ticks">
          <div className="card-head">
            <span className="super">INPUT · 故事输入</span>
          </div>
          <div className="card-body">
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 10 }}>从 0 到 1 的素材入口</div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">一句话故事</div>
              <textarea className="field" rows={4} value={storyInput} onChange={e => setStoryInput(e.target.value)} />
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">故事来源</div>
              <textarea className="field" rows={3} value={origin} onChange={e => setOrigin(e.target.value)} />
            </div>
            <div className="field-grp">
              <div className="lbl">素材文件</div>
              <button className="btn" style={{ width: '100%', justifyContent: 'center' }}>
                <Ico.Folder /> 选择文件 · 未选择文件
              </button>
            </div>
          </div>
        </div>

        <div className="card corner-ticks">
          <div className="card-head">
            <span className="super">PLAN · 创作方案</span>
          </div>
          <div className="card-body">
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 10 }}>定位、冲突、节奏与视觉</div>
            <div className="grid-2" style={{ marginBottom: 12 }}>
              <div className="field-grp">
                <div className="lbl">定位</div>
                <input className="field" defaultValue="短篇 · 12 镜" />
              </div>
              <div className="field-grp">
                <div className="lbl">主题</div>
                <input className="field" defaultValue="归乡 · 错位" />
              </div>
            </div>
            <div className="grid-2" style={{ marginBottom: 12 }}>
              <div className="field-grp">
                <div className="lbl">主冲突</div>
                <input className="field" defaultValue="谍者归来" />
              </div>
              <div className="field-grp">
                <div className="lbl">角色关系</div>
                <input className="field" defaultValue="父女 · 师徒" />
              </div>
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">节奏</div>
              <input className="field" defaultValue="缓 — 续 — 急 — 缓" />
            </div>
            <div className="field-grp">
              <div className="lbl">视觉风格</div>
              <input className="field" defaultValue="水墨 · 偏冷 · 少人物点缀" />
            </div>
          </div>
        </div>

        <div className="card corner-ticks">
          <div className="card-head">
            <span className="super">MAP · 剧情电图</span>
          </div>
          <div className="card-body">
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 10 }}>剧情点</div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">剧情指标</div>
              <input className="field field-mono" defaultValue="P-01" />
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">类型</div>
              <select className="field"><option>主线 · 开口</option><option>支线</option><option>转折</option></select>
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">地点</div>
              <input className="field" defaultValue="寒霜 · 客栈门口" />
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">时刻</div>
              <input className="field" defaultValue="冬夜 · 雷后" />
            </div>

            {/* mini timeline */}
            <div className="lbl" style={{ marginBottom: 6, marginTop: 8 }}>—— ARC TIMELINE</div>
            <svg width="100%" height="50" viewBox="0 0 280 50">
              <line x1="10" y1="25" x2="270" y2="25" stroke="var(--bd-1)" strokeWidth="1" />
              {[
                { x: 30, t: 'P-01', hl: true },
                { x: 70, t: 'P-02' },
                { x: 110, t: 'P-03' },
                { x: 150, t: 'P-04' },
                { x: 190, t: 'P-05' },
                { x: 230, t: 'P-06' },
                { x: 260, t: 'END' },
              ].map((p, i) => (
                <g key={i}>
                  <circle cx={p.x} cy="25" r={p.hl ? 5 : 3} fill={p.hl ? 'var(--accent)' : 'var(--bd-2)'}
                    style={{ filter: p.hl ? 'drop-shadow(0 0 6px var(--accent))' : 'none' }} />
                  <text x={p.x} y="45" textAnchor="middle" fill={p.hl ? 'var(--accent)' : 'var(--fg-3)'}
                    style={{ fontFamily: 'var(--f-mono)', fontSize: 9 }}>{p.t}</text>
                </g>
              ))}
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}
window.PageScript = PageScript;