/* ============================================================
   ROOY · 10 单日汇总
   ───────────────────────────────────────────────────────────
   需求：当日数据 + ROOY 小总结 + 右上一键跳 04a 镜头切换（按
   session 日期筛选）。从 09 滑行历史列表点入。

   结构：NavBar → 今日 track map hero（地图 + 路线）→ "今天"段
   （雪况 + 累计合并）→ 滑行模式 → 高光时刻 → ROOY 见证。

   italic anchor：当日里程（累计段）—— 复用 08 雪季汇总的 editorial
   语汇，但 hero 从"巨大天数 italic"换成"今日路线图"（end-of-session
   关心的是这条路）。

   跟 08 的差异：没有"最常去"和"雪况分布"——单日没这两个概念。
   ============================================================ */

function DailyScreen({ onNav }) {
  const [showShare, setShowShare] = React.useState(false);
  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: R.bg, position: 'relative', color: R.ink, ...T.subhead
    }}>
      <StatusBar />

      <NavBar
        onBack={() => onNav && onNav('back')}
        title="今天"
        right={
        <button onClick={() => setShowShare(true)} 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: '6px 16px 0' }}>
          <DailyTrackMap />
        </div>

        {/* ── 今天 · 雪况 + 累计 一组 ─────────────────── */}
        <div style={{ height: 28 }} />
        <div style={{ padding: '0 22px' }}>
          {/* 雪况 — single-day report. Inline italic spans for short
              numeric fragments give it visual rhythm without becoming a
              full italic stat row. Sits at the TOP of the today-group. */}
          <DSnowReportRow />

          {/* 累计 stat rows — all italic 32 (matches 08b's BStatRow rhythm) */}
          <DStatRow label="累计里程" value="8.4" unit="km" />
          <DStatRow label="累计垂降" value="2.1" unit="km" />
          <DStatRow label="滑行时长" value="2:18" unit="h" />
          <DStatRow label="心流" value="1.6" unit="km" valueColor={R.gold} />
        </div>

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

        {/* ── 高光时刻 ───────────────────────────────── */}
        <SectionTitle style={{ padding: '0 22px' }}>高光时刻</SectionTitle>
        <div style={{ height: 14 }} />
        <div style={{ padding: '0 22px' }}>
          <DRecordRow first label="最高速" value="62" unit="km/h" where="Stockhorn 蓝道" when="10:42" />
          <DRecordRow label="最长单次" value="1.4" unit="km" where="Hörnli" when="11:08" />
          <DRecordRow label="最高单次垂降" value="380" unit="m" where="Stockhorn" when="10:42" />
          <DRecordRow label="最高海拔" value="3 532" unit="m" where="Stockhorn 顶" when="10:30" />
        </div>

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

        {/* ── 滑行模式 ───────────────────────────────── */}
        <EyebrowSection>滑行模式</EyebrowSection>
        <div style={{ padding: '0 22px' }}>
          <BModeSplit free={64} lesson={36} />
        </div>

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

        {/* ── ROOY 见证 · 今日里程碑 ─────────────────── */}
        <SectionTitle style={{ padding: '0 22px' }}>ROOY 见证</SectionTitle>
        <div style={{ height: 14 }} />
        <div style={{
          padding: '0 16px 4px', display: 'flex', gap: 10,
          overflowX: 'auto'
        }}>
          {[
          { n: '右弯立刃 40°', d: '今早 10:42', kind: 'trophy', hi: true },
          { n: '连三趟稳定', d: '今早 11:05', 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} />}
              </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>

      {showShare && (
        <div style={{ position: 'absolute', inset: 0, zIndex: Z.fullscreen }}>
          <DailyShareSheet onNav={(t) => { if (t === 'back') setShowShare(false); }}/>
        </div>
      )}
    </div>);

}

/* ── DailyTrackMap — 今日轨迹卡 ────────────────────────────
   Card sits in the hero slot. Subtle topographic contour lines as bg,
   ski-track polyline plotted on top with carved S-curves. Start (top)
   and finish (bottom) pins distinguish direction. Inline labels for
   place (top-left), altitude range (right edge), and a duration
   footer along the bottom. */
function DailyTrackMap() {
  return (
    <div style={{
      position: 'relative',
      width: '100%', height: 240,
      borderRadius: B.cardL, overflow: 'hidden',
      background: R.card,
      boxShadow: Shadow.card
    }}>
      {/* Topographic contours — faint, hand-drawn feel */}
      <svg width="100%" height="100%" viewBox="0 0 358 240"
      preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0 }}>
        {/* Subtle ROOY-color terrain tint at top, gold valley below */}
        <defs>
          <linearGradient id="dts-bg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stopColor="var(--r-rooy)" stopOpacity="0.04" />
            <stop offset="100%" stopColor="var(--r-gold)" stopOpacity="0.03" />
          </linearGradient>
        </defs>
        <rect width="358" height="240" fill="url(#dts-bg)" />

        {/* Contour lines — 5 条软等高线, opacity 0.18 → 0.10 让 hero 不被
            背景纹理压住 */}
        <g opacity="0.10" stroke={R.ink3} fill="none" strokeWidth="0.7">
          <path d="M -20 50   Q  90 30  180 40   T 380 24" />
          <path d="M -20 90   Q  80 70  170 78   T 380 62" />
          <path d="M -20 130  Q  70 110 160 118  T 380 102" />
          <path d="M -20 170  Q  60 150 150 158  T 380 142" />
          <path d="M -20 210  Q  50 190 140 198  T 380 182" />
        </g>

        {/* Ski track — 单线 ink S-curve. 去掉 gold halo underlay (hero
            重心还给地形 + 文字, 不靠光晕 sell completion). */}
        <path d="
            M 308 30
            C 290 64, 268 70, 252 96
            C 236 122, 264 138, 232 160
            C 200 184, 226 196, 184 204
            L 80 212
          "
        stroke={R.ink} strokeWidth="2.4" fill="none"
        strokeLinecap="round" strokeLinejoin="round" />

        {/* Start pin — 小 ink dot (高海拔起点) */}
        <g transform="translate(308, 30)">
          <circle r="4.5" fill={R.ink} />
          <circle r="1.5" fill="#fff" />
        </g>

        {/* End pin — gold check (低海拔完成态, 单 accent) */}
        <g transform="translate(80, 212)">
          <circle r="8" fill="var(--r-gold)" />
          <path d="M -3.5 0 L -0.5 3 L 4 -2.5" stroke="#fff" strokeWidth="1.8"
            fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </g>
      </svg>

      {/* Top-left — place narrative. Zermatt 改 N.hero 非 italic, 把
          italic anchor 让给下方"累计 8.4 km" (HANDOFF: 每屏 1 锚). */}
      <div style={{ position: 'absolute', top: 14, left: 16 }}>
        <p style={{
          ...T.eyebrow, color: R.ink3, marginBottom: 6
        }}>今日轨迹</p>
        <p style={{
          ...N.hero, fontSize: 24, color: R.ink,
          lineHeight: 1, letterSpacing: '-0.02em'
        }}>Zermatt</p>
        <p style={{ ...T.caption1, color: R.ink3, marginTop: 6 }}>
          Stockhorn — Furi
        </p>
      </div>

      {/* 海拔 inline labels — 紧跟 pin, 不再 corner anchor 跟 pin 撞角.
          "最高/最低" eyebrow 标签删掉, 数字 + m 单位本身自明.
          关键弯·3 annotation 也删 — metadata 已下沉到 review 屏. */}
      <p style={{
        position: 'absolute', top: 22, right: 56,
        ...T.footnote,
        whiteSpace: 'nowrap'
      }}>
        <span style={{ color: R.ink, fontWeight: 500 }}>3 532</span>
        <span style={{ color: R.ink3 }}> m</span>
      </p>

      <p style={{
        position: 'absolute', bottom: 22, left: 100,
        ...T.footnote,
        whiteSpace: 'nowrap'
      }}>
        <span style={{ color: R.ink, fontWeight: 500 }}>1 620</span>
        <span style={{ color: R.ink3 }}> m</span>
      </p>
    </div>);

}

/* DSnowReportRow — 雪况 row sitting at top of today's stat group.
   3 fragments share the SAME italic 22pt N.italic + small inline
   unit treatment so the eye reads them as a uniform set of facts
   (was: 硬粉 italic 22 vs −5°C / 12cm in body+subhead → mixed
   sizes felt random). Drop "C" suffix on temp: ° is universally
   read as temperature in this context and the tiny C felt like
   noise next to the bigger 硬粉. */
function DSnowReportRow() {
  const numStyle = {
    ...N.italic, fontSize: 24, color: R.ink, lineHeight: 1,
    fontWeight: 900, letterSpacing: '-0.02em'
  };
  const unitStyle = { ...T.subhead, color: R.ink3, fontWeight: 500, marginLeft: 2 };
  return (
    <div style={{
      padding: '14px 0',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12, height: "66px"
    }}>
      <span style={{ ...T.subhead, color: R.ink, fontWeight: 600 }}>雪况</span>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 16,
        fontFeatureSettings: '"tnum" 1'
      }}>
        <span style={numStyle}>硬粉</span>
        <span style={numStyle}>−5°</span>
        <span style={{ display: 'inline-flex', alignItems: 'baseline' }}>
          <span style={numStyle}>12</span>
          <span style={unitStyle}>cm</span>
        </span>
      </div>
    </div>);

}

/* DStatRow — 累计 stat row. Unified italic anchor across all today's
   accumulated values (距离 / 垂降 / 时长 / 心流) — keeps the visual
   rhythm consistent with 08b's BStatRow vocabulary. */
function DStatRow({ label, value, unit, 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.subhead, color: R.ink3, fontWeight: 500 }}>{unit}</span>
        }
      </div>
    </div>);

}

/* DRecordRow — single record row for 高光时刻. Copy of BRecordRow
   shape, scoped here so the daily file is self-contained. */
function DRecordRow({ 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>);

}

Object.assign(window, {
  DailyScreen, DailyTrackMap,
  DSnowReportRow, DStatRow, DRecordRow
});