// ─── 屏 7：战绩 / 北极星指标 + WSR 对内治理 ───
function StatsScreen() {
  const T = useT();
  const { go } = useApp();
  const s = STATS;
  return (
    <div style={{ padding: '4px 16px 24px' }}>
      <div style={{ padding: '6px 2px 14px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 23, fontWeight: 800, color: T.text, letterSpacing: -0.5 }}>战绩</div>
          <div style={{ fontSize: 12.5, color: T.sub, marginTop: 3 }}>不看在线时长，只看 Janus 替你省下与赢下的</div>
        </div>
        <div onClick={() => go('me')} style={{ width: 42, height: 42, borderRadius: '50%', background: `linear-gradient(135deg,${T.accent},${T.acc2})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 15, cursor: 'pointer' }}>LK</div>
      </div>

      {/* 北极星 · 隐形价值（一行三指标） */}
      <SectionLabel right={<Tag tone="plain" style={{ fontSize: 10 }}>本周</Tag>}>隐形价值 · 工具越隐形越成功</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 18 }}>
        <div style={{ display: 'flex' }}>
          {s.northStar.map((m, i) => (
            <div key={i} style={{ flex: 1, padding: '14px 8px', textAlign: 'center', borderRight: i < s.northStar.length - 1 ? `1px solid ${T.line}` : 'none' }}>
              <div style={{ fontFamily: NUMF, fontSize: 21, fontWeight: 800, color: T.accent, lineHeight: 1, letterSpacing: -0.5 }}>{m.v}</div>
              <div style={{ fontSize: 10.5, color: T.text, fontWeight: 600, marginTop: 6, lineHeight: 1.3 }}>{m.label}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* 能力跃迁 */}
      <SectionLabel>能力跃迁 · 把顶级打法喂给你</SectionLabel>
      <Card glow style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 10 }}>
          <span style={{ fontSize: 13.5, fontWeight: 600, color: T.text }}>{s.capability.label}</span>
          <span style={{ fontFamily: NUMF, fontSize: 22, fontWeight: 800, color: T.accent, lineHeight: 1 }}>{s.capability.now}<span style={{ fontSize: 13, color: T.sub }}> / 100</span></span>
        </div>
        <div style={{ position: 'relative', height: 8, borderRadius: 4, background: T.surface2, overflow: 'hidden', marginBottom: 6 }}>
          <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${s.capability.now}%`, background: `linear-gradient(90deg,${T.accent},${T.acc2})`, borderRadius: 4 }} />
          <div style={{ position: 'absolute', left: '90%', top: -2, width: 2, height: 12, background: T.good }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: T.sub }}>{s.capability.note}</span>
          <span style={{ fontSize: 10, color: T.good, fontWeight: 600 }}>资深线 90</span>
        </div>
      </Card>

      {/* 战绩 tally */}
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 18 }}>
        <div style={{ display: 'flex' }}>
          {[['赢单', s.tally.won, T.good], ['输单', s.tally.lost, T.bad], ['进行中', s.tally.live, T.accent]].map(([k, v, c], i) => (
            <div key={i} style={{ flex: 1, padding: '15px 0', textAlign: 'center', borderRight: i < 2 ? `1px solid ${T.line}` : 'none' }}>
              <div style={{ fontFamily: NUMF, fontSize: 26, fontWeight: 800, color: c, lineHeight: 1 }}>{v}</div>
              <div style={{ fontSize: 11, color: T.sub, marginTop: 5 }}>{s.tally.quarter}{k}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* 打单手册 · 组织能力标准化 */}
      <SectionLabel right={<span style={{ fontSize: 11, color: T.accent, fontWeight: 600 }}>已沉淀 {s.playbookTotal} 条</span>}>你的打单手册 · 每次复盘自动生长</SectionLabel>
      <Card pad={0} style={{ overflow: 'hidden', marginBottom: 8 }}>
        {s.playbook.map((p, i, a) => (
          <div key={i} style={{ display: 'flex', gap: 11, padding: '13px 15px', borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none', alignItems: 'flex-start' }}>
            <Icon name="bolt" size={16} color={T.accent} style={{ flexShrink: 0, marginTop: 1 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: T.text, lineHeight: 1.45 }}>{p.rule}</div>
              <div style={{ fontSize: 10.5, color: T.faint, marginTop: 3 }}>来自 · {p.from}</div>
            </div>
          </div>
        ))}
        <button onClick={() => go('review')} style={{ width: '100%', border: 'none', borderTop: `1px solid ${T.line}`, background: 'transparent', color: T.accent, fontSize: 12.5, fontWeight: 700, fontFamily: FONT, padding: '13px 0', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          查看最近一次复盘 <Icon name="arrowRight" size={15} color={T.accent} />
        </button>
      </Card>
    </div>
  );
}
window.StatsScreen = StatsScreen;