// ────── PAGE: 模型设置 ──────
function PageSettings({ setPage, pushToast }) {
  const { Ico } = window;
  const [apiKey, setApiKey] = React.useState('');

  const models = [
    { name: 'BLM-5.1', sub: '主控制路由 · 文案推理',     active: true,  status: 'ok' },
    { name: 'Nano Banana Pro', sub: '图像生成 · 主控',   active: false, status: 'warn' },
    { name: 'Whisper-LR',      sub: '语音 · 音轨脚本',    active: false, status: 'idle' },
    { name: 'StyleNet-V2',     sub: '风格迁移 · 后处理', active: true,  status: 'ok' },
  ];

  return (
    <div className="page page-anim">
      <div className="pg-head">
        <div className="lhs">
          <div className="super">SETTINGS · 07</div>
          <h2>模型设置</h2>
        </div>
        <div className="rhs">
          <button className="btn" onClick={() => setPage('hub')}>返回项目中心</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 14 }}>
        <div className="card corner-ticks">
          <div className="card-head"><span className="super">MODELS · 已注册模型</span></div>
          <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {models.map((m, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 14, padding: 14,
                background: 'var(--bg-2)', border: '1px solid var(--bd)', borderRadius: 6
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 6,
                  background: m.active ? 'var(--accent-soft)' : 'var(--bg-3)',
                  border: `1px solid ${m.active ? 'var(--bd-accent)' : 'var(--bd)'}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: m.active ? 'var(--accent)' : 'var(--fg-3)',
                }}><Ico.Model /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{m.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{m.sub}</div>
                </div>
                <span className={`badge badge-${m.status === 'ok' ? 'ok' : m.status === 'warn' ? 'warn' : ''}`}>
                  {m.status === 'ok' ? '已就位' : m.status === 'warn' ? '需配置' : '空闲'}
                </span>
                <button className="btn">{m.active ? '关闭' : '启用'}</button>
              </div>
            ))}
          </div>
        </div>

        <div className="card corner-ticks">
          <div className="card-head"><span className="super">API · 凭据管理</span></div>
          <div className="card-body">
            <div className="field-grp" style={{ marginBottom: 12 }}>
              <div className="lbl">API KEY</div>
              <input className="field field-mono" type="password" value={apiKey}
                onChange={e => setApiKey(e.target.value)} placeholder="sk-..." />
            </div>
            <button className="btn btn-accent" style={{ width: '100%', justifyContent: 'center' }}
              onClick={() => pushToast({ kind: 'ok', msg: 'API 凭据已保存' })}>
              保存凭据
            </button>

            <div className="lbl" style={{ marginTop: 24, marginBottom: 10 }}>—— USAGE · 24h</div>
            <div style={{ height: 80 }}>
              <window.Sparkline data={[40, 52, 48, 60, 55, 70, 68, 82, 75, 90, 85, 95]} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--f-mono)', marginTop: 6 }}>
              <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.PageSettings = PageSettings;