// ────── PAGE: 数字资产 (Assets) — three columns ──────
function PageAssets({ setPage, projectName }) {
  const { Ico } = window;
  const [tab, setTab] = React.useState('character');
  const [exterior, setExterior] = React.useState(true);

  // radar chart data
  const radarStats = [
    { name: 'COMBAT',     v: 0.85 },
    { name: 'STRATEGY',   v: 0.78 },
    { name: 'EMPATHY',    v: 0.50 },
    { name: 'VOLATILITY', v: 0.75, hl: true },
    { name: 'GRACE',      v: 0.40 },
    { name: 'WIT',        v: 0.65 },
  ];
  const cx = 110, cy = 110, R = 80;
  const radarPts = radarStats.map((s, i) => {
    const a = (Math.PI * 2 * i) / radarStats.length - Math.PI / 2;
    const r = s.v * R;
    return { x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r, ax: cx + Math.cos(a) * (R + 16), ay: cy + Math.sin(a) * (R + 16) };
  });

  const palette = ['#3a2f1f', '#2e3849', '#3d4a5c', '#bf8f3a', '#d6a851', '#e7c478', '#f0d8a0'];

  return (
    <div className="page page-anim">
      <div className="pg-head">
        <div className="lhs">
          <div className="super">ASSETS · 03</div>
          <h2>{projectName} · 数字资产</h2>
        </div>
        <div className="rhs">
          <button className="btn" onClick={() => setPage('hub')}>返回项目中心</button>
        </div>
      </div>

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

        {/* ── COL 1 — character ── */}
        <div className="card corner-ticks" style={{ overflow: 'auto' }}>
          <div className="card-head">
            <span className="super">CHARACTER · 角色资产</span>
            <span className="num" style={{ fontSize: 11, color: 'var(--fg-2)' }}>C001 · LEAD</span>
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{ fontSize: 26, fontWeight: 700, fontFamily: 'var(--f-mono)' }}>C001 <span style={{ color: 'var(--fg-3)', fontSize: 14, fontWeight: 400 }}> 沈青羽</span></div>
              <span className="sp" />
              {/* signal bars */}
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2 }}>
                {[8, 12, 16, 20, 14].map((h, i) => (
                  <div key={i} style={{ width: 4, height: h, background: i < 4 ? 'var(--accent)' : 'var(--bd-2)' }} />
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '88px 1fr', gap: 14, marginBottom: 14 }}>
              <div className="dotgrid" style={{
                aspectRatio: '3/4', background: 'var(--bg-2)',
                border: '1px dashed var(--bd-1)', borderRadius: 4, position: 'relative',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <div className="lbl" style={{ fontSize: 9, color: 'var(--fg-3)', textAlign: 'center', lineHeight: 1.4 }}>REF / FRONT</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <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>

            <div className="grid-2" style={{ marginBottom: 12 }}>
              <div className="field-grp">
                <div className="lbl">性别</div>
                <select className="field"><option>女</option><option>男</option><option>其他</option></select>
              </div>
              <div className="field-grp">
                <div className="lbl">年龄</div>
                <input className="field" defaultValue="29" />
              </div>
            </div>

            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">性格基调</div>
              <textarea className="field" rows={2} defaultValue="冷静 · 持重 · 偶执于一桩旧案。" />
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">视觉特征</div>
              <textarea className="field" rows={2} defaultValue="灰青色风衣 · 银线纹 · 战斗手腕带 · 锁骨上铜铃。" />
            </div>
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">导出标签</div>
              <textarea className="field" rows={2} defaultValue="边境军中走过的孤剑 · 归乡时无人相迎。" />
            </div>
            <div className="field-grp" style={{ marginBottom: 14 }}>
              <div className="lbl">关键关系</div>
              <input className="field" defaultValue="师妹 · 邻家女里 · 旧友 · 影" />
            </div>

            <div className="lbl" style={{ marginBottom: 8, textAlign: 'center' }}>—— CHARACTER PROFILE</div>

            <div className="radar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
              <svg width="220" height="220">
                {[0.25, 0.5, 0.75, 1].map((s, i) => (
                  <polygon key={i} fill="none" stroke="var(--bd)" strokeWidth="0.6"
                    points={radarStats.map((_, j) => {
                      const a = (Math.PI * 2 * j) / radarStats.length - Math.PI / 2;
                      return `${cx + Math.cos(a) * R * s},${cy + Math.sin(a) * R * s}`;
                    }).join(' ')} />
                ))}
                {radarStats.map((_, i) => {
                  const a = (Math.PI * 2 * i) / radarStats.length - Math.PI / 2;
                  return <line key={i} x1={cx} y1={cy} x2={cx + Math.cos(a) * R} y2={cy + Math.sin(a) * R} stroke="var(--bd)" strokeWidth="0.6" />;
                })}
                <polygon fill="rgba(245,166,35,0.18)" stroke="var(--accent)" strokeWidth="1.5"
                  points={radarPts.map(p => `${p.x},${p.y}`).join(' ')} />
                {radarPts.map((p, i) => <circle key={i} cx={p.x} cy={p.y} r="2.5" fill="var(--accent)" />)}
              </svg>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {radarStats.map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 11 }}>
                    <span style={{ color: 'var(--fg-3)', minWidth: 80 }}>{s.name}</span>
                    <span className="num" style={{ color: s.hl ? 'var(--err)' : 'var(--fg-1)', fontWeight: 700 }}>
                      {s.v.toFixed(2)}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* ── COL 2 — scene ── */}
        <div className="card corner-ticks" style={{ overflow: 'auto' }}>
          <div className="card-head">
            <span className="super">SCENE · 场景资产</span>
            <button className={`badge ${exterior ? 'badge-ok' : ''}`} onClick={() => setExterior(!exterior)}>
              <span className="dot" /> {exterior ? 'EXTERIOR' : 'INTERIOR'}
            </button>
          </div>
          <div className="card-body">
            <div style={{ fontSize: 26, fontWeight: 700, fontFamily: 'var(--f-mono)', marginBottom: 12 }}>S001 <span style={{ color: 'var(--fg-3)', fontSize: 14, fontWeight: 400 }}> 旧档 · 地下数据港</span></div>

            <div className="dotgrid" style={{
              aspectRatio: '16/8', background: 'var(--bg-2)',
              border: '1px dashed var(--bd-1)', borderRadius: 6,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 14,
            }}>
              <div className="lbl" style={{ color: 'var(--fg-3)' }}>SCENE PLATE 16:9</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>
                <select className="field"><option>室内 · 中景</option><option>室外 · 全景</option></select>
              </div>
            </div>

            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">时间 / 季节</div>
              <input className="field" defaultValue="冬夜 · 雪后 · 清晨" />
            </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: 14 }}>
              <div className="lbl">视觉重点</div>
              <textarea className="field" rows={3} defaultValue="檐下铜铃 · 风雪中的灯笼 · 门内炉火" />
            </div>
            <div className="field-grp" style={{ marginBottom: 14 }}>
              <div className="lbl">声景 / 气味</div>
              <textarea className="field" rows={2} defaultValue="风的呜咽 · 钢铃 · 远处犬吠 · 炉火劈啪" />
            </div>

            <div className="lbl" style={{ marginBottom: 8 }}>—— PALETTE / LIGHT</div>
            <div style={{ display: 'flex', gap: 4, marginBottom: 12 }}>
              {palette.map((c, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ height: 28, background: c, borderRadius: 3 }} />
                  <div className="num" style={{ fontSize: 8, color: 'var(--fg-3)', textAlign: 'center' }}>{c.toUpperCase().slice(1)}</div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <div style={{ position: 'relative', width: 56, height: 56 }}>
                <svg width="56" height="56" viewBox="0 0 56 56">
                  <circle cx="28" cy="28" r="22" fill="none" stroke="var(--bd-1)" strokeWidth="3" />
                  <circle cx="28" cy="28" r="22" fill="none" stroke="var(--accent)" strokeWidth="3"
                    strokeDasharray={`${0.62 * 138} 138`} strokeDashoffset="0" transform="rotate(-90 28 28)" strokeLinecap="round" />
                </svg>
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--f-mono)', fontWeight: 700, fontSize: 12 }}>62</div>
              </div>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--fg-2)', lineHeight: 1.7 }}>
                <div>主光: 烛火 · 暖 2700K</div>
                <div>辅光: 雪反 · 冷 6500K</div>
                <div>对比度: 中高 · 0.62</div>
              </div>
            </div>
          </div>
        </div>

        {/* ── COL 3 — prompts ── */}
        <div className="card corner-ticks" style={{ overflow: 'auto' }}>
          <div className="card-head">
            <span className="super">PROMPTS · 提示词资产</span>
          </div>
          <div className="card-body" style={{ padding: 14 }}>
            <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 14 }}>模板与变量</div>

            <div className="field-grp" style={{ marginBottom: 10 }}>
              <div className="lbl">类型</div>
              <select className="field"><option>角色</option><option>场景</option><option>分镜</option></select>
            </div>
            <div className="field-grp" style={{ marginBottom: 10 }}>
              <div className="lbl">名称</div>
              <input className="field" defaultValue="角色参考图标识符" />
            </div>
            <div className="field-grp" style={{ marginBottom: 10 }}>
              <div className="lbl">版本</div>
              <input className="field field-mono" defaultValue="1.5.0" />
            </div>
            <div className="field-grp" style={{ marginBottom: 14 }}>
              <div className="lbl">模板体</div>
              <textarea className="field field-mono" rows={6}
                defaultValue={`{character.name}, {character.outfit}, in {scene.location}, {scene.time}, cinematic lighting, ink-wash style`} />
            </div>

            <button className="btn btn-accent" style={{ width: '100%', justifyContent: 'center', marginBottom: 14 }}>
              <Ico.Plus /> 新增模板编组
            </button>

            <div className="lbl" style={{ marginBottom: 8 }}>—— IMAGES · 绑定与指针</div>

            <div className="field-grp" style={{ marginBottom: 10 }}>
              <div className="lbl">名称</div>
              <input className="field" defaultValue="C001 角色参考图 v1" />
            </div>
            <div className="field-grp" style={{ marginBottom: 10 }}>
              <div className="lbl">资源 URL</div>
              <input className="field field-mono" defaultValue="ref://char/C001/v01.png" />
            </div>

            <div className="grid-2" style={{ marginBottom: 14 }}>
              <div className="field-grp">
                <div className="lbl">类型</div>
                <select className="field"><option>角色</option></select>
              </div>
              <div className="field-grp">
                <div className="lbl">使用范围</div>
                <select className="field"><option>主参</option></select>
              </div>
            </div>

            <div className="field-grp" style={{ marginBottom: 14 }}>
              <div className="lbl">指针标识</div>
              <input className="field field-mono" defaultValue="C001 / 002 / struct-A" />
            </div>

            <div style={{ display: 'flex', gap: 8 }}>
              {['REF V01', 'REF V02', 'REF V03'].map((t, i) => (
                <div key={i} className="dotgrid" style={{
                  flex: 1, aspectRatio: '1', background: 'var(--bg-2)',
                  border: i === 0 ? '1px solid var(--bd-accent)' : '1px dashed var(--bd-1)',
                  borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <span className="lbl" style={{ fontSize: 8, color: i === 0 ? 'var(--accent)' : 'var(--fg-3)' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.PageAssets = PageAssets;