// ────── PAGE: 导出 ──────
function PageExport({ setPage, projectName, pushToast }) {
  const { Ico } = window;
  const [format, setFormat] = React.useState('mp4');
  const [quality, setQuality] = React.useState('high');
  const [exporting, setExporting] = React.useState(false);
  const [progress, setProgress] = React.useState(0);

  const onStart = () => {
    setExporting(true); setProgress(0);
    const id = setInterval(() => {
      setProgress(p => {
        if (p >= 100) { clearInterval(id); setExporting(false); pushToast({ kind: 'ok', msg: '导出完成', sub: `${projectName}.${format}` }); return 100; }
        return p + Math.random() * 6 + 2;
      });
    }, 280);
  };

  const formats = [
    { k: 'mp4', label: 'MP4 视频', sub: 'H.264 · 1920×1080' },
    { k: 'pdf', label: 'PDF 分镜表', sub: '矢量 · 可编辑' },
    { k: 'json', label: 'JSON 工程', sub: '完整工程包 · 可还原' },
    { k: 'png', label: 'PNG 序列', sub: '逐帧 · 透明通道' },
  ];

  return (
    <div className="page page-anim">
      <div className="pg-head">
        <div className="lhs">
          <div className="super">EXPORT · 06</div>
          <h2>{projectName} · 导出与交付</h2>
        </div>
        <div className="rhs">
          <button className="btn" onClick={() => setPage('hub')}>返回项目中心</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div className="card corner-ticks">
          <div className="card-head"><span className="super">FORMAT · 选择格式</span></div>
          <div className="card-body">
            <div className="grid-2">
              {formats.map(f => (
                <div key={f.k} onClick={() => setFormat(f.k)} className="scan-target"
                  style={{
                    padding: 14, borderRadius: 6, cursor: 'default',
                    background: format === f.k ? 'var(--bg-card-2)' : 'var(--bg-2)',
                    border: `1px solid ${format === f.k ? 'var(--bd-accent)' : 'var(--bd)'}`,
                  }}>
                  <div className="lbl lbl-accent" style={{ marginBottom: 4 }}>· {f.k.toUpperCase()}</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{f.label}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 4 }}>{f.sub}</div>
                </div>
              ))}
            </div>

            <div className="lbl" style={{ marginTop: 18, marginBottom: 8 }}>—— QUALITY</div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['draft', 'standard', 'high', 'ultra'].map(q => (
                <button key={q} className={`btn ${quality === q ? 'btn-accent' : ''}`} onClick={() => setQuality(q)}
                  style={{ flex: 1, justifyContent: 'center' }}>
                  {q.toUpperCase()}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="card corner-ticks">
          <div className="card-head"><span className="super">EXPORT · 启动</span></div>
          <div className="card-body">
            <div style={{ fontSize: 13, color: 'var(--fg-2)', marginBottom: 14 }}>
              将分镜本、提示词、资产指针打包导出。
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
              {['分镜本 · 6 镜', '角色资产 · 1', '场景资产 · 1', '提示词模板 · 1', '工程元数据'].map(t => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12,
                                       padding: '6px 10px', background: 'var(--bg-2)', borderRadius: 4 }}>
                  <Ico.Check />
                  <span style={{ color: 'var(--fg-1)' }}>{t}</span>
                </div>
              ))}
            </div>

            {exporting && (
              <>
                <div className="lbl" style={{ marginBottom: 6 }}>EXPORTING · {progress.toFixed(0)}%</div>
                <div className="pbar" style={{ marginBottom: 14 }}>
                  <div className="pbar-fill" style={{ width: `${progress}%` }} />
                </div>
              </>
            )}

            <button className="btn btn-accent" style={{ width: '100%', justifyContent: 'center' }}
              onClick={onStart} disabled={exporting}>
              <Ico.Play /> {exporting ? '导出中...' : '开始导出'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.PageExport = PageExport;