/* ============================================================
   ROOY · 09 滑行历史
   ───────────────────────────────────────────────────────────
   需求：生涯卡片 + 雪季分组列表。每条 = 日期 + 雪场 + 趟数 / 里
   程 / 时长。当前雪季默认展开，往年默认折叠。

   结构：NavBar → 生涯黑卡 hero（avatar + name + 累计里程 italic）
   → 3 列累计 strip（在 hero 内）→ 雪季分组（年份 + 汇总行 + 可展
   开的当日记录列表）。

   italic anchor：累计里程数字（hero 内）—— 跟 Home 的"天数"互补，
   两屏都用 italic 但不会同屏出现。
   ============================================================ */

function HistoryScreen({ onNav }) {
  const [openSeasons, setOpenSeasons] = React.useState({ '25-26': true });

  const seasons = [
    {
      id: '25-26', year: '2025 — 26',
      summary: '12 天 | 64.8 km | 最爱 Zermatt',
      days: [
        { date: '4.30', place: 'Zermatt',     runs: 13, km: 8.4, time: '2:18 h', lesson: true },
        { date: '4.22', place: 'Verbier',     runs: 9,  km: 6.2, time: '1:42 h', lesson: false },
        { date: '4.18', place: 'Zermatt',     runs: 11, km: 7.1, time: '2:04 h', lesson: true },
        { date: '4.10', place: 'Saas-Fee',    runs: 7,  km: 4.6, time: '1:18 h', lesson: false },
        { date: '3.16', place: 'Zermatt',     runs: 14, km: 9.8, time: '2:42 h', lesson: true },
      ],
    },
    {
      id: '24-25', year: '2024 — 25',
      summary: '8 天 | 42.8 km | 最爱 万龙',
      days: [
        { date: '3.04', place: '万龙雪场',     runs: 12, km: 7.4, time: '3:12 h', lesson: true },
        { date: '2.18', place: '万龙雪场',     runs: 9,  km: 5.8, time: '2:38 h', lesson: false },
        { date: '1.25', place: '南山雪场',     runs: 7,  km: 4.2, time: '1:46 h', lesson: false },
      ],
    },
    {
      id: '23-24', year: '2023 — 24',
      summary: '4 天 | 18.2 km | 最爱 南山',
      days: [],
    },
  ];

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

      <NavBar onBack={() => onNav && onNav('home')} title="滑行历史"/>

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

        {/* Career hero — v6 · dark editorial card.
            italic anchor on cumulative km (187). The year list
            below is the per-season detail; the hero only carries
            the lifetime totals. Tap → 当季雪季汇总 (08). */}
        <div style={{ padding: '6px 16px 0' }}>
          <div onClick={() => onNav && onNav('season')} style={{
            borderRadius: B.hero, padding: '22px 22px 22px',
            background: R.ink, color: '#fff', cursor: 'pointer',
            position: 'relative', overflow: 'hidden',
            boxShadow: Shadow.hero,
          }}>
            {/* two-line topography — softened so it sits as background
                texture rather than competing with the italic anchor */}
            <TopoLines y1={50} y2={110} viewBoxH={200} preserveAspectRatio="none"/>

            <div style={{ position: 'relative' }}>
              <p style={{ ...T.eyebrow, color: R.inkD2 }}>生涯总览</p>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 12 }}>
                <span style={{ ...N.italic, fontSize: 108, color: '#fff', lineHeight: 0.86 }}>24</span>
                <span style={{
                  fontFamily: '"PingFang SC", -apple-system, system-ui',
                  fontSize: 22, fontWeight: 500,
                  color: R.inkD2, paddingBottom: 10,
                }}>天</span>
              </div>
              <div style={{
                marginTop: 16, paddingTop: 14,
                borderTop: `0.5px solid ${R.inkD4}`,
                display: 'flex', justifyContent: 'space-between',
              }}>
                <CareerStat l="累计里程" v="187" u="km"/>
                <CareerStat l="打卡雪场" v="4"/>
                <CareerStat l="雪季"     v="3"/>
              </div>
            </div>
          </div>
        </div>

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

        {/* Seasons */}
        {seasons.map((s, si) => {
          const open = openSeasons[s.id];
          return (
            <div key={s.id}>
              <div
                onClick={() => setOpenSeasons({ ...openSeasons, [s.id]: !open })}
                style={{
                  padding: '0 22px',
                  display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 12,
                }}>
                <div style={{ flex: 1 }}>
                  <span style={{ ...T.h1, color: R.ink }}>{s.year}</span>
                  <p style={{ ...T.footnote, color: R.ink3, marginTop: 6, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    {s.summary.split(' | ').map((part, i, arr) => (
                      <React.Fragment key={i}>
                        <span>{part}</span>
                        {i < arr.length - 1 && <span style={{ color: R.ink4 }}>|</span>}
                      </React.Fragment>
                    ))}
                  </p>
                </div>
                <button onClick={(e) => { e.stopPropagation(); onNav && onNav('season'); }} style={{
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  ...T.footnote, color: R.ink3,
                  minHeight: 44, padding: '8px 4px 8px 12px',
                }}>汇总 ›</button>
              </div>

              {open && s.days.length > 0 && (
                <div style={{ marginTop: 10 }}>
                  {s.days.map((d, i) => (
                    <DayRow key={i} day={d} onClick={() => onNav && onNav('daily')}/>
                  ))}
                </div>
              )}

              <div style={{ height: si < seasons.length - 1 ? 40 : 24 }}/>
            </div>
          );
        })}

      </div>
    </div>
  );
}


/* CareerStat — secondary stat cell inside the dark career hero.
   Used as a 3-up strip under the italic anchor. */
function CareerStat({ l, v, u }) {
  return (
    <div>
      <p style={{ ...T.footnote, color: R.inkD2, marginBottom: 6 }}>{l}</p>
      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 3 }}>
        <span style={{ ...N.hero, fontSize: 20, color: '#fff', lineHeight: 1 }}>{v}</span>
        {u && <span style={{ ...T.caption1, color: R.inkD2, fontWeight: 500 }}>{u}</span>}
      </div>
    </div>
  );
}

/* DayRow — 单日记录行：左 date pill (月/日) + 中 place + meta (趟
   数 / 里程 / 时长 vertical-bar 分隔). lesson flag 是 pill 角上的
   ROOY 绿小点，不放文字标签。 */
function DayRow({ day, onClick }) {
  const [month, dayNum] = day.date.split('.');
  return (
    <div onClick={onClick} style={{
      padding: '14px 22px',
      display: 'flex', gap: 16, alignItems: 'center',
      cursor: 'pointer',
    }}>
      <div style={{
        position: 'relative',
        width: 56, height: 56, borderRadius: B.card,
        background: R.systemFill,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <span style={{ ...T.footnote, color: R.ink3, lineHeight: 1 }}>{month} 月</span>
        <span style={{ ...T.h2, color: R.ink, marginTop: 4, lineHeight: 1 }}>{dayNum}</span>
        {day.lesson && (
          <span style={{
            position: 'absolute', top: -2, right: -2,
            width: 10, height: 10, borderRadius: '50%',
            background: R.rooy, border: `2px solid ${R.bg}`,
          }}/>
        )}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ ...T.headline, color: R.ink }}>{day.place}</p>
        <p style={{ ...T.footnote, color: R.ink3, marginTop: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span>{day.runs} 趟</span>
          <span style={{ color: R.ink4 }}>|</span>
          <span>{day.km} km</span>
          <span style={{ color: R.ink4 }}>|</span>
          <span>{day.time}</span>
        </p>
      </div>
      <Chevron/>
    </div>
  );
}

Object.assign(window, { HistoryScreen });