// ────── PAGE: 项目中心 (HUB) ──────
function PageHub({ setPage, openProject, pushToast, setProjectName }) {
  const { Ico, StatTile, Sparkline, SectionHead } = window;

  const [seedType, setSeedType] = React.useState(0);
  const [genre, setGenre] = React.useState('现代都市悬疑');
  const [scope, setScope] = React.useState('短篇 · 12 镜');
  const [tags, setTags] = React.useState(new Set(['悬疑', '都市']));
  const [storyText, setStoryText] = React.useState(
    '七年前的一桩数据黑市案重新浮出水面。前网络安全分析师沈青羽辞职归乡，本想躲开纷争，却在守夜人聚会的第七天，遇到了一个不该存在的孩子——他记得所有人删除过的数据。'
  );
  const [projectTitle, setProjectTitle] = React.useState('潜行者 · 第七夜');
  const [restoreText, setRestoreText] = React.useState('');
  const [statsHover, setStatsHover] = React.useState(null);

  const seedTypes = [
  { code: '01', label: '故事种子', desc: '用一句话或几个核心冲突，未来定义纲序。', active: true },
  { code: '02', label: '同文改编', desc: '已有大纲，转成可生产分镜结构。' },
  { code: '03', label: '日常题材', desc: '贴近生活的故事，建议日记式分镜。' },
  { code: '04', label: 'IP 改编', desc: '从原作的人物与世界观开始衍生。' }];


  const stats = [
  { k: 'ACTIVE PROJECTS', v: '3', u: '件', delta: '+2 周', spark: [10, 12, 14, 11, 15, 18, 17, 20, 22, 21, 25, 23] },
  { k: 'DRAFTS', v: '3', u: '', delta: '0', spark: [3, 5, 4, 6, 5, 7, 8, 7, 9, 8, 10, 9] },
  { k: 'STORYBOARDS', v: '0', u: '', delta: '0', spark: [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0] },
  { k: 'RENDER JOBS', v: '0', u: '', delta: '0', spark: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 1, 0] },
  { k: 'QUOTA / DAY', v: '62', u: '%', delta: '1.4k tok/h', spark: [40, 42, 48, 55, 52, 58, 62, 60, 65, 62, 68, 62] }];


  const recent = [
  { code: 'P-2684-A', name: '未命名项目', sub: '类乡测试', tag: '草稿', tagKind: 'badge', updated: '2026/4/27 02:24:31' },
  { code: 'P-2684-B', name: '考剑', sub: '断下不能的客之', tag: '进行中', tagKind: 'warn', updated: '2026/4/27 02:09:30' },
  { code: 'P-2684-C', name: '潜行者·第七夜', sub: '现代悬疑', tag: '进行中', tagKind: 'warn', updated: '2026/4/27 13:32:08' }];


  const allTags = ['悬疑', '都市', '科技', '职场', '迷雾', '复仇'];

  const onCreate = () => {
    setProjectName(projectTitle);
    pushToast({ kind: 'ok', msg: `项目 ${projectTitle} 已创建`, sub: 'P-2684-D · 拉起 Workbench' });
    setTimeout(() => setPage('bench'), 600);
  };

  return (
    <div className="page page-anim">
      {/* ── header ── */}
      <div className="pg-head">
        <div className="lhs">
          <div className="super">PROJECT HUB · 01</div>
          <h2>从故事到分镜图的短剧生产工作台</h2>
        </div>
        <div className="rhs">
          <div className="pg-meta"><span className="k">SESSION</span><span className="v">速隐 · 个人版</span></div>
          <div className="pg-meta"><span className="k">BUILD</span><span className="v">v1.4.2 · APR.27</span></div>
          <div className="pg-meta"><span className="k">MODE</span><span className="v v-accent">Solo · Local</span></div>
        </div>
      </div>

      {/* ── stats grid ── */}
      <div className="grid-5" style={{ marginBottom: 24 }}>
        {stats.map((s, i) =>
        <StatTile key={i} label={s.k} value={s.v} unit={s.u} delta={s.delta} sparkData={s.spark} />
        )}
      </div>

      {/* ── two columns: new project + restore ── */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18 }}>

        {/* ── NEW PROJECT ── */}
        <div className="card corner-ticks">
          <div className="card-head">
            <span className="super">NEW PROJECT · 选择起点</span>
            <button className="badge badge-warn">04 OPTIONS</button>
          </div>
          <div className="card-body">
            <div style={{ marginBottom: 6, fontSize: 18, fontWeight: 600 }}>从故事的源头开始</div>
            <div style={{ color: 'var(--fg-2)', fontSize: 12, marginBottom: 16 }}>
              选择一个起点 — 不同起点决定分镜骨架与生成顺序。
            </div>

            {/* seed type cards */}
            <div className="grid-2" style={{ marginBottom: 18 }}>
              {seedTypes.map((s, i) =>
              <div key={i} onClick={() => setSeedType(i)}
              className="scan-target"
              style={{
                background: i === seedType ? 'var(--bg-card-2)' : 'var(--bg-2)',
                border: `1px solid ${i === seedType ? 'var(--bd-accent)' : 'var(--bd)'}`,
                borderRadius: 6, padding: '14px 16px', cursor: 'default', position: 'relative',
                boxShadow: i === seedType ? 'inset 0 0 0 1px var(--bd-accent)' : 'none',
                transition: 'all .2s'
              }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                    <span className="lbl"><span className="lbl-accent">{s.code}</span> / TYPE</span>
                    {i === seedType && <span style={{
                    width: 10, height: 10, borderRadius: '50%', background: 'var(--accent)',
                    boxShadow: '0 0 8px var(--accent)'
                  }} />}
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4, color: i === seedType ? 'var(--accent)' : 'var(--fg)' }}>
                    {s.label}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--fg-2)', lineHeight: 1.5 }}>{s.desc}</div>
                </div>
              )}
            </div>

            <div className="lbl" style={{ marginBottom: 12 }}>—— PROJECT META</div>

            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">项目名称 <span className="req">●</span></div>
              <input className="field" value={projectTitle} onChange={(e) => setProjectTitle(e.target.value)} />
            </div>

            <div className="grid-2" style={{ marginBottom: 12 }}>
              <div className="field-grp">
                <div className="lbl">类型</div>
                <select className="field" value={genre} onChange={(e) => setGenre(e.target.value)}>
                  <option>现代都市悬疑</option>
                  <option>职场</option>
                  <option>科幻</option>
                  <option>古风武侠</option>
                </select>
              </div>
              <div className="field-grp">
                <div className="lbl">规模</div>
                <select className="field" value={scope} onChange={(e) => setScope(e.target.value)}>
                  <option>短篇 · 12 镜</option>
                  <option>中篇 · 36 镜</option>
                  <option>长篇 · 64+ 镜</option>
                </select>
              </div>
            </div>

            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">情绪标签</div>
              <div className="tag-row">
                {allTags.map((t) =>
                <span key={t} className={`tag ${tags.has(t) ? 'on' : ''}`}
                onClick={() => {
                  const next = new Set(tags);
                  next.has(t) ? next.delete(t) : next.add(t);
                  setTags(next);
                }}>{t}</span>
                )}
              </div>
            </div>

            <div className="field-grp">
              <div className="lbl">故事描述</div>
              <textarea className="field" value={storyText} onChange={(e) => setStoryText(e.target.value)} rows={3} />
            </div>

            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 18 }}>
              <button className="btn btn-ghost">保存草稿</button>
              <button className="btn btn-accent" onClick={onCreate}>
                <Ico.Arrow /> 创建并进入
              </button>
            </div>
          </div>
        </div>

        {/* ── PROJECT OPS ── */}
        <div className="card corner-ticks">
          <div className="card-head">
            <span className="super">PROJECT OPS · 进入 · 修改 · 归档 · 删除</span>
            <button className="icon-btn" style={{ width: 26, height: 26 }}><Ico.Refresh /></button>
          </div>
          <div className="card-body" style={{ padding: 16 }}>
            <div className="lbl" style={{ marginBottom: 8 }}>项目管理</div>

            <div style={{ background: 'var(--bg-2)', border: '1px solid var(--bd)', borderRadius: 6,
              padding: 12, marginBottom: 14 }}>
              <div className="lbl lbl-accent" style={{ marginBottom: 6 }}>● RESTORE · 从备份恢复</div>
              <div style={{ fontSize: 11, color: 'var(--fg-2)', marginBottom: 8 }}>
                贴入 project.backup.json，会创建一个新备份，不覆盖当前项目。
              </div>
              <textarea className="field field-mono" rows={3}
              value={restoreText} onChange={(e) => setRestoreText(e.target.value)}
              placeholder='// project.backup.json{"version":"1.4","name":"..."}' />
              <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                <button className="btn"><Ico.Upload /> 解析并导入</button>
                <button className="btn btn-ghost" onClick={() => setRestoreText('')}>清空</button>
              </div>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '10px 0' }}>
              <div className="lbl">—— RECENT · 最近</div>
            </div>

            {recent.map((r, i) =>
            <div key={i} className="scan-target"
            style={{
              display: 'grid', gridTemplateColumns: '32px 1fr auto auto',
              alignItems: 'center', gap: 12, padding: '10px 12px',
              border: '1px solid var(--bd)', borderRadius: 6, marginBottom: 8,
              background: 'var(--bg-2)', cursor: 'default'
            }}>
                <div className="num" style={{ fontSize: 11, color: 'var(--fg-3)' }}>0{i + 1}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{r.name}</div>
                  <div style={{ fontSize: 10, color: 'var(--fg-3)', marginTop: 2 }}>{r.sub} · <span className="num">{r.code}</span></div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <span className={`badge badge-${r.tagKind === 'warn' ? 'warn' : ''}`}>{r.tag}</span>
                  <div style={{ fontSize: 9, color: 'var(--fg-3)', marginTop: 4, fontFamily: 'var(--f-mono)' }}>{r.updated}</div>
                </div>
                <div style={{ display: 'flex', gap: 4 }}>
                  <button className="icon-btn" style={{ width: 24, height: 24 }}
                onClick={() => {setProjectName(r.name);openProject('bench');}}>
                    <Ico.Arrow s={11} />
                  </button>
                  <button className="icon-btn" style={{ width: 24, height: 24 }}><Ico.Edit /></button>
                  <button className="icon-btn" style={{ width: 24, height: 24 }}><Ico.Trash /></button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>);

}
window.PageHub = PageHub;