// ────── PAGE: 分镜表 (Storyboard) ──────
function PageStoryboard({ setPage, projectName, pushToast }) {
  const { Ico } = window;

  const initialShots = [
    { id: 'SH-001', shot: '远景', dur: '3.2s', desc: '雪夜归途。山道上一道单影，灰青风衣被风掀起。', mood: '冷', status: 'rendered' },
    { id: 'SH-002', shot: '中景', dur: '2.8s', desc: '客栈门口铜铃随风作响，门内炉火映出剪影。', mood: '暖', status: 'rendered' },
    { id: 'SH-003', shot: '特写', dur: '1.4s', desc: '沈青羽推门，眼神微凝。', mood: '紧', status: 'pending' },
    { id: 'SH-004', shot: '主观', dur: '2.0s', desc: '隔着雾的客栈大堂，一个孩子坐在角落。', mood: '诡', status: 'pending' },
    { id: 'SH-005', shot: '近景', dur: '1.8s', desc: '孩子缓缓抬头，眼睛里映着她的脸。', mood: '诡', status: 'idle' },
    { id: 'SH-006', shot: '特写', dur: '1.0s', desc: '孩子嘴唇微动："你删除过的，我都记得。"', mood: '颤', status: 'idle' },
  ];

  const [shots, setShots] = React.useState(initialShots);
  const [sel, setSel] = React.useState('SH-003');
  const [rendering, setRendering] = React.useState(null);

  const onRender = (id) => {
    setRendering(id);
    pushToast({ kind: 'ok', msg: `渲染 ${id}`, sub: 'Nano Banana Pro · 预计 4.2s' });
    setTimeout(() => {
      setShots(s => s.map(x => x.id === id ? { ...x, status: 'rendered' } : x));
      setRendering(null);
      pushToast({ kind: 'ok', msg: `${id} 渲染完成` });
    }, 2400);
  };

  const selShot = shots.find(s => s.id === sel);

  return (
    <div className="page page-anim">
      <div className="pg-head">
        <div className="lhs">
          <div className="super">STORYBOARD · 05</div>
          <h2>{projectName} · 分镜表</h2>
        </div>
        <div className="rhs">
          <div className="pg-meta"><span className="k">SHOTS</span><span className="v">{shots.length}</span></div>
          <div className="pg-meta"><span className="k">RENDERED</span><span className="v v-accent">{shots.filter(s => s.status === 'rendered').length} / {shots.length}</span></div>
          <button className="btn" onClick={() => setPage('hub')}>返回项目中心</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 14, height: 'calc(100% - 120px)' }}>

        <div className="card corner-ticks" style={{ overflow: 'auto' }}>
          <div className="card-head">
            <span className="super">SHOT GRID · 6 镜 / 12 镜</span>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn"><Ico.Plus /> 新镜</button>
              <button className="btn btn-accent">全部渲染</button>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              {shots.map((s, i) => {
                const isSel = s.id === sel;
                const isRendering = rendering === s.id;
                return (
                  <div key={s.id} onClick={() => setSel(s.id)} className="scan-target"
                    style={{
                      background: 'var(--bg-card-2)',
                      border: `1px solid ${isSel ? 'var(--bd-accent)' : 'var(--bd)'}`,
                      borderRadius: 6, padding: 0, cursor: 'default', position: 'relative',
                      boxShadow: isSel ? 'inset 0 0 0 1px var(--accent-soft)' : 'none',
                      overflow: 'hidden',
                    }}>
                    {/* shot frame */}
                    <div className="dotgrid" style={{
                      aspectRatio: '16/9',
                      background: s.status === 'rendered' ? 'linear-gradient(135deg, var(--bg-3), var(--bg-elev))' : 'var(--bg-2)',
                      borderBottom: '1px solid var(--bd)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      position: 'relative',
                    }}>
                      {s.status === 'rendered' ? (
                        <svg width="60%" height="60%" viewBox="0 0 100 60" style={{ opacity: 0.4 }}>
                          <rect x="0" y="0" width="100" height="60" fill="var(--accent)" opacity="0.05" />
                          <path d={`M0 ${30 + i * 3} Q 25 ${20 + i * 2} 50 ${28 + i * 2} T 100 ${25 + i * 2}`}
                            stroke="var(--accent)" strokeWidth="0.8" fill="none" opacity="0.6" />
                          <circle cx="50" cy="35" r="6" fill="var(--accent)" opacity="0.3" />
                        </svg>
                      ) : (
                        <span className="lbl" style={{ fontSize: 9, color: 'var(--fg-3)' }}>FRAME 16:9</span>
                      )}
                      {/* corner shot id */}
                      <div style={{
                        position: 'absolute', top: 6, left: 6, padding: '2px 6px',
                        background: 'rgba(0,0,0,0.5)', borderRadius: 3,
                        fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--accent)', letterSpacing: '.08em',
                      }}>{s.id}</div>
                      <div style={{
                        position: 'absolute', top: 6, right: 6, padding: '2px 6px',
                        background: 'rgba(0,0,0,0.5)', borderRadius: 3,
                        fontFamily: 'var(--f-mono)', fontSize: 9, color: 'var(--fg-1)',
                      }}>{s.dur}</div>
                      {isRendering && (
                        <div style={{
                          position: 'absolute', inset: 0, background: 'rgba(245,166,35,0.1)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          flexDirection: 'column', gap: 8,
                        }}>
                          <div className="lbl lbl-accent">RENDERING ...</div>
                          <div style={{ width: '60%' }}>
                            <div className="pbar"><div className="pbar-fill" style={{ width: '50%' }} /></div>
                          </div>
                        </div>
                      )}
                    </div>
                    <div style={{ padding: 10 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                        <span className="badge">{s.shot}</span>
                        <span className={`badge badge-${s.status === 'rendered' ? 'ok' : s.status === 'pending' ? 'warn' : ''}`}>
                          {s.status === 'rendered' ? '已渲染' : s.status === 'pending' ? '待渲染' : '空闲'}
                        </span>
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--fg-1)', lineHeight: 1.5, minHeight: 32 }}>{s.desc}</div>
                      {s.status !== 'rendered' && (
                        <button className="btn btn-accent" style={{ width: '100%', marginTop: 8, justifyContent: 'center', padding: '5px' }}
                          onClick={(e) => { e.stopPropagation(); onRender(s.id); }}>
                          <Ico.Play s={10} /> 渲染本镜
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* ─── inspector ─── */}
        <div className="card corner-ticks" style={{ overflow: 'auto' }}>
          <div className="card-head">
            <span className="super">INSPECTOR · {selShot.id}</span>
          </div>
          <div className="card-body">
            <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>{selShot.shot} · {selShot.dur}</div>
            <div className="lbl" style={{ marginBottom: 14 }}>SHOT META</div>

            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">镜头描述</div>
              <textarea className="field" rows={3} defaultValue={selShot.desc} />
            </div>
            <div className="grid-2" style={{ marginBottom: 12 }}>
              <div className="field-grp">
                <div className="lbl">景别</div>
                <select className="field"><option>{selShot.shot}</option><option>远景</option><option>中景</option></select>
              </div>
              <div className="field-grp">
                <div className="lbl">时长</div>
                <input className="field field-mono" defaultValue={selShot.dur} />
              </div>
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">情绪</div>
              <input className="field" defaultValue={selShot.mood} />
            </div>
            <div className="field-grp" style={{ marginBottom: 14 }}>
              <div className="lbl">提示词</div>
              <textarea className="field field-mono" rows={4}
                defaultValue={`{C001 沈青羽}, {S001 旧城客栈}, {selShot.shot}, ${selShot.mood} mood, cinematic, ink-wash`} />
            </div>

            <div className="lbl" style={{ marginBottom: 8 }}>ASSET BINDINGS</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
              {[
                { k: 'C001', n: '沈青羽' },
                { k: 'S001', n: '旧城客栈' },
                { k: 'P-01', n: '主线·开口' },
              ].map((b, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 8, padding: '6px 10px',
                  background: 'var(--bg-2)', border: '1px solid var(--bd)', borderRadius: 5,
                  alignItems: 'center', fontSize: 11,
                }}>
                  <span className="num lbl-accent" style={{ fontWeight: 700 }}>{b.k}</span>
                  <span style={{ color: 'var(--fg-1)' }}>{b.n}</span>
                  <span className="sp" />
                  <Ico.Eye />
                </div>
              ))}
            </div>

            <button className="btn btn-accent" style={{ width: '100%', justifyContent: 'center' }}
              onClick={() => onRender(selShot.id)}>
              <Ico.Play /> 渲染本镜
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.PageStoryboard = PageStoryboard;