// 使用统计 — 占位（未实现）

const StatsPage = ({ state }) => {
  const msgCount = (state.messages || []).length;
  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-title">使用统计 <span className="coming-soon-tag">即将开放</span></h1>
          <div className="page-sub">让数字也变成回忆的形状</div>
        </div>
      </div>

      <div className="stats-wrap">
        <div className="stats-stat-grid">
          <div className="card stat-card">
            <div className="label">总消息数</div>
            <div className="value">{msgCount}</div>
          </div>
          <div className="card stat-card">
            <div className="label">Token 使用量</div>
            <div className="value">— —</div>
          </div>
          <div className="card stat-card">
            <div className="label">花费</div>
            <div className="value">— —</div>
          </div>
          <div className="card stat-card">
            <div className="label">连续陪伴</div>
            <div className="value">— —</div>
          </div>
        </div>

        <div className="stats-chart-placeholder">
          最近 30 天趋势图 · 待实现
        </div>

        <div style={{marginTop: 28, padding: 20, background: 'var(--bg-soft)', borderRadius: 18, fontSize: 13, color: 'var(--ink-500)', lineHeight: 1.8}}>
          <strong style={{color: 'var(--ink-900)'}}>计划中的功能：</strong>
          <ul style={{margin: '10px 0 0 20px', padding: 0}}>
            <li>每月对话条数 + 高峰时段</li>
            <li>Token 使用与花费明细</li>
            <li>最常被收藏的句子 · 五郎最爱的词</li>
            <li>"想你最多的一天"自动识别</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

window.StatsPage = StatsPage;