/* ============================================================
   ROOY · 08 雪季汇总
   ───────────────────────────────────────────────────────────
   需求：一个雪季的 editorial summary，杂志式排版。

   结构：NavBar → italic 12 天 hero（vivid cobalt，no black card）
   + 跟上季 delta → 4 stat row（里程/垂降/时长/心流）→ 高光时刻 →
   最常去 / 雪况 / 模式分布 → ROOY 见证（该季成就 rail）。

   italic anchor：12（滑行天数 hero）。data 蓝撑住 hero。

   ⚠ 编辑性 inline label（"SEASON · 2025" / "DAYS" / "ON SNOW" 等
   uppercase + tracking 英文）**仅在本屏出现**。其他屏 eyebrow 已
   全部去 uppercase + tracking 回归 CN-iOS 标准。本屏 inline 风格
   也是为什么这里 hero 不用黑卡 —— 黑卡是 Home 雪季叙事的位置，
   08 是 editorial 复盘，是两种语言。
   ============================================================ */

function SeasonScreenB({ onNav }) {
  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: R.bg, position: 'relative', color: R.ink, ...T.subhead,
    }}>
      <StatusBar/>

      <NavBar
        onBack={() => onNav && onNav('history')}
        title="雪季汇总"
        right={(
          <button style={{ width: 44, height: 44, background: 'transparent', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M4 9l5-5 5 5M9 4v12" stroke={R.ink} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M3 17h14" stroke={R.ink} strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        )}
      />

      <div style={{ flex: 1, overflowY: 'auto', position: 'relative', zIndex: 1, paddingBottom: 48 }}>

        {/* ── HERO · 纯排版 ────────────────────────── */}
        <div style={{ padding: '14px 22px 0' }}>
          <p style={{
            ...T.eyebrow, color: R.data, fontWeight: 600,
            letterSpacing: '0.14em',
          }}>SEASON · 2025</p>

          <div style={{
            display: 'flex', alignItems: 'flex-end', gap: 14, marginTop: 6,
          }}>
            <span style={{
              ...N.italic, fontSize: 172, color: R.data, lineHeight: 0.84,
              fontWeight: 900, letterSpacing: '-0.02em',
              fontFeatureSettings: '"tnum" 0',
            }}>12</span>
            <div style={{
              paddingBottom: 18, display: 'flex', flexDirection: 'column',
            }}>
              <span style={{
                ...N.italic,
                fontSize: 32, color: R.ink, fontWeight: 900,
                lineHeight: 0.95, letterSpacing: '-0.01em',
              }}>DAYS</span>
              <span style={{
                fontFamily: '"SF Pro Display", system-ui',
                fontSize: 12, color: R.ink3, fontWeight: 700,
                letterSpacing: '0.14em',
                marginTop: 6,
              }}>ON SNOW</span>
            </div>
          </div>

          <p style={{ ...T.footnote, color: R.ink3, marginTop: 6 }}>
            较上季同期 ↑ <span style={{ color: R.ink, fontWeight: 600 }}>4 天</span>
          </p>
        </div>

        <div style={{ height: 22 }}/>

        {/* ── STAT ROWS · hairline rows (padded, not full-bleed) ── */}
        <div style={{ padding: '0 22px' }}>
          <BStatRow label="累计里程" value="164.8" unit="km" first/>
          <BStatRow label="累计垂降" value="48.3" unit="km"/>
          <BStatRow label="滑行时长" value="56"   unit="h"/>
          <BStatRow label="心流"     value="66.2"  unit="km" valueColor={R.gold}/>
        </div>

        <div style={{ height: 36 }}/>

        {/* ── 最常去 · 高光前的独立 section ───────── */}
        <SectionTitle style={{ padding: '0 22px' }}>最常去</SectionTitle>
        <div style={{ height: 14 }}/>
        <div style={{
          padding: '0 22px',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16,
        }}>
          <div>
            <p style={{
              ...N.italic, fontSize: 40, color: R.ink, lineHeight: 1,
              fontWeight: 900, letterSpacing: '-0.02em',
            }}>Zermatt<span>.</span></p>
            <p style={{ ...T.footnote, color: R.ink3, marginTop: 8 }}>瑞士阿尔卑斯 · 3 820 m</p>
          </div>
          <div style={{ textAlign: 'right', paddingBottom: 2 }}>
            <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{
                ...N.italic, fontSize: 32, color: R.ink, lineHeight: 1,
                fontWeight: 900,
              }}>7</span>
              <span style={{ ...T.caption1, color: R.ink3, fontWeight: 500 }}>次</span>
            </div>
            <p style={{ ...T.caption1, color: R.ink3, marginTop: 6 }}>38 h</p>
          </div>
        </div>

        <div style={{ height: 36 }}/>

        {/* ── 高光时刻 ──────────────────────────── */}
        <SectionTitle style={{ padding: '0 22px' }}>高光时刻</SectionTitle>
        <div style={{ height: 14 }}/>
        <div style={{ padding: '0 22px' }}>
          <BRecordRow first label="最高速"       value="87"    unit="km/h" where="Stockhorn"        when="3.15"/>
          <BRecordRow       label="最长单次"     value="3.2"   unit="km"   where="La Chaux"         when="2.08"/>
          <BRecordRow       label="最高单次垂降" value="980"   unit="m"    where="Hörnli"           when="3.15"/>
          <BRecordRow       label="最高海拔"     value="3 820" unit="m"    where="Klein Matterhorn" when="3.16"/>
        </div>

        <div style={{ height: 32 }}/>

        {/* ── 雪况 + 滑行模式 · 两个独立图表，eyebrow 承担小标识 ── */}
        <EyebrowSection>雪况</EyebrowSection>
        <div style={{ padding: '0 22px' }}>
          <BSnowMix items={[
            { label: '粉雪', pct: 28, color: R.data },
            { label: '压雪', pct: 46, color: R.ink2 },
            { label: '冰雪', pct: 14, color: R.ink3 },
            { label: '春雪', pct: 12, color: R.ink4 },
          ]}/>
        </div>

        <div style={{ height: 24 }}/>

        <EyebrowSection>滑行模式</EyebrowSection>
        <div style={{ padding: '0 22px' }}>
          <BModeSplit free={72} lesson={28}/>
        </div>

        <div style={{ height: 38 }}/>

        {/* ── ROOY 见证 ────────────────────────── */}
        <SectionTitle
          style={{ padding: '0 22px' }}
          meta="· 本季 4 个"
          action="全部"
          onAction={() => {}}
        >
          ROOY 见证
        </SectionTitle>
        <div style={{ height: 14 }}/>

        <div style={{
          padding: '0 16px 4px', display: 'flex', gap: 10,
          overflowX: 'auto',
        }}>
          {[
            { n: '首破 40°',     d: '4 月 30 日', kind: 'trophy', hi: true },
            { n: '生涯 100 km',  d: '4 月 22 日', kind: 'flag' },
            { n: '刃滑 I',       d: '4 月 18 日', kind: 'medal' },
            { n: '平行式',       d: '4 月 10 日', kind: 'flag' },
          ].map((m, i, arr) => (
            <div key={i} onClick={() => {}} style={{
              flexShrink: 0, width: 148, minHeight: 124,
              padding: '16px 16px', borderRadius: B.card,
              background: R.card, cursor: 'pointer',
              marginRight: i === arr.length - 1 ? 16 : 0,
              border: m.hi ? `1px solid ${R.gold}33` : 'none',
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 11,
                background: m.hi ? `${R.gold}1a` : R.systemFill,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16,
              }}>
                {m.kind === 'trophy' && <TrophyGlyph size={18} color={m.hi ? 'var(--r-gold)' : R.ink2}/>}
                {m.kind === 'flag'   && <FlagGlyph   size={18} color={R.ink2}/>}
                {m.kind === 'medal'  && <MedalGlyph  size={18} color={R.ink2}/>}
              </div>
              <p style={{ ...T.subhead, color: R.ink, fontWeight: 600 }}>{m.n}</p>
              <p style={{ ...T.footnote, color: m.hi ? R.gold : R.ink3, marginTop: 8 }}>{m.d}</p>
            </div>
          ))}
        </div>

      </div>
    </div>
  );
}

/* B-prefix helpers — self-contained for 08b. */

function BStatRow({ label, value, unit, first, valueColor }) {
  return (
    <div style={{
      padding: '16px 0',
      borderTop: `0.5px solid ${R.hair}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <span style={{ ...T.subhead, color: R.ink, fontWeight: 600 }}>{label}</span>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span style={{
          ...N.italic, fontSize: 32, color: valueColor || R.ink, lineHeight: 1,
          fontWeight: 900, letterSpacing: '-0.02em',
          fontFeatureSettings: '"tnum" 1',
        }}>{value}</span>
        {unit && (
          <span style={{ ...T.caption1, color: R.ink3, fontWeight: 500 }}>{unit}</span>
        )}
      </div>
    </div>
  );
}

function BRecordRow({ label, value, unit, where, when, first }) {
  return (
    <div style={{
      padding: '14px 0',
      borderTop: first ? 'none' : `0.5px solid ${R.hair}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ ...T.subhead, color: R.ink, fontWeight: 600 }}>{label}</p>
        <p style={{ ...T.footnote, color: R.ink3, marginTop: 4 }}>
          {where} <span style={{ color: R.ink4 }}>· {when}</span>
        </p>
      </div>
      <div style={{ flexShrink: 0, textAlign: 'right' }}>
        <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
          <span style={{
            ...N.italic, fontSize: 32, color: R.ink, lineHeight: 1,
            fontWeight: 900, letterSpacing: '-0.02em',
          }}>{value}</span>
          {unit && (
            <span style={{ ...T.caption1, color: R.ink3, fontWeight: 500 }}>{unit}</span>
          )}
        </div>
      </div>
    </div>
  );
}

function BSnowMix({ items }) {
  return (
    <div>
      <div style={{ display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', marginBottom: 14 }}>
        {items.map((it, i) => (
          <div key={i} style={{ width: `${it.pct}%`, background: it.color }}/>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 18px' }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: it.color }}/>
            <span style={{ ...T.footnote, color: R.ink2, flex: 1 }}>{it.label}</span>
            <span style={{
              ...N.hero, fontSize: 15, color: R.ink, fontWeight: 700,
            }}>{it.pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function BModeSplit({ free, lesson }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12 }}>
        <div style={{ flex: free }}>
          <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 3 }}>
            <span style={{ ...N.hero, fontSize: 28, color: R.ink, lineHeight: 1 }}>{free}</span>
            <span style={{ ...T.caption1, color: R.ink3, fontWeight: 500 }}>%</span>
          </div>
          <p style={{ ...T.footnote, color: R.ink3, marginTop: 4 }}>自由滑行</p>
        </div>
        <div style={{ flex: lesson, textAlign: 'right' }}>
          <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 3 }}>
            <span style={{ ...N.hero, fontSize: 28, color: R.rooy, lineHeight: 1 }}>{lesson}</span>
            <span style={{ ...T.caption1, color: R.ink3, fontWeight: 500 }}>%</span>
          </div>
          <p style={{ ...T.footnote, color: R.ink3, marginTop: 4 }}>跟 ROOY 上课</p>
        </div>
      </div>
      <div style={{ display: 'flex', height: 6, borderRadius: 3, overflow: 'hidden', background: R.hair }}>
        <div style={{ width: `${free}%`, background: R.ink2 }}/>
        <div style={{ width: `${lesson}%`, background: R.rooy }}/>
      </div>
    </div>
  );
}

Object.assign(window, {
  SeasonScreenB, BStatRow, BRecordRow, BSnowMix, BModeSplit,
});