/* ============================================================
   ROOY · 03b 滑行中 · 自由模式
   ───────────────────────────────────────────────────────────
   需求：地图全屏 + 当前滑行的轻反馈，ROOY 偷懒中不主动出声，
   用户上拉 sheet 才看到详细。

   结构：basemap → peek sheet（170px：scope + 3 stat + ROOY 一行）
   → 上拉 expanded（550px：速度曲线 / 能力 / 左右脚 / 累计）。
   stop button 浮在 peek 顶 14px 上方，tap 进 03d 暂停态；结束走 03d
   的两步确认（继续 / 结束 pill），不再长按直结束。

   italic anchor：ROOY 反馈内联数字（0.08，标识"重心切换偏快"）。
   accent：ROOY 绿（peek 内 RooyLine dot 一次）。

   Anti-pattern：peek↔expanded 之间**不**画 hairline 分隔——hairline
   只用于列表 cell 之间，区块切换靠 spacing。
   ============================================================ */

function SkiScreenB({ onNav, defaultExpanded = false, paused = false }) {
  const [expanded, setExpanded] = React.useState(defaultExpanded);
  const sheetH = expanded ? 550 : 170;

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

      {/* basemap — 全屏铺底；trail 曲线与高度标记不变。底色是冷调
          雪面浅灰蓝（one-off，basemap 不属于 surface token 体系），
          与 ink 冷灰 / data 蓝 / rooy 青同一色温. */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
        background: '#E8ECF1',
        overflow: 'hidden',
      }}>
        <svg width="100%" height="600" viewBox="0 0 390 600" preserveAspectRatio="xMidYMin slice"
             style={{ display: 'block' }}>
          <defs>
            <linearGradient id="ski-b-mp" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="600">
              <stop offset="0%"    stopColor="#F4F6F9"/>
              <stop offset="66.7%" stopColor="#E8ECF1"/>
              <stop offset="100%"  stopColor="#E8ECF1"/>
            </linearGradient>
          </defs>
          <rect width="390" height="600" fill="url(#ski-b-mp)"/>

          {Array.from({ length: 19 }).map((_, i) => {
            const y = 18 + i * 30;
            const amp = 24 + (i % 4) * 9;
            return (
              <path key={i}
                d={`M -40 ${y} Q 80 ${y - amp} 180 ${y} T 400 ${y - amp / 2}`}
                fill="none" stroke="rgba(14,17,22,0.07)" strokeWidth="0.8"/>
            );
          })}
          {Array.from({ length: 5 }).map((_, i) => {
            const y = 65 + i * 120;
            return (
              <path key={i}
                d={`M -40 ${y} Q 80 ${y - 28} 180 ${y} T 400 ${y - 14}`}
                fill="none" stroke="rgba(14,17,22,0.14)" strokeWidth="1.2"/>
            );
          })}

          <text x="100" y="63"  style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>2400 M</text>
          <text x="100" y="183" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>2200 M</text>
          <text x="100" y="303" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>2000 M</text>
          <text x="100" y="423" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>1800 M</text>
          <text x="100" y="543" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>1600 M</text>

          <g transform="translate(265 475)">
            <path d="M 0 8 L 6 0 L 12 8 Z" fill="rgba(14,17,22,0.42)"/>
            <rect x="2" y="8" width="8" height="5" fill="rgba(14,17,22,0.42)"/>
            <text x="18" y="11" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.55)' }}>Furi 缆车站</text>
          </g>

          <path d="M 60 70 C 100 122, 70 191, 140 226 S 220 313, 180 357"
            fill="none" stroke="rgba(31,58,138,0.26)" strokeWidth="2" strokeLinecap="round" strokeDasharray="2 4"/>
          <path d="M 80 78 C 120 148, 90 226, 160 261 S 240 348, 200 383"
            fill="none" stroke="var(--r-data)" strokeWidth="3.5" strokeLinecap="round"/>
          <path d="M 145 235 C 180 296, 215 322, 200 357"
            fill="none" stroke="var(--r-gold)" strokeWidth="5" strokeLinecap="round"/>
          <circle cx="200" cy="383" r="18" fill="var(--r-data)" fillOpacity=".14"/>
          <circle cx="200" cy="383" r="10" fill="var(--r-data)" fillOpacity=".30"/>
          <circle cx="200" cy="383" r="5.5" fill="var(--r-data)"/>
          <circle cx="200" cy="383" r="5.5" fill="none" stroke="#fff" strokeWidth="1.5"/>
          <path d="M 200 383 L 240 52" stroke="rgba(14,17,22,0.4)" strokeWidth="1.4" strokeDasharray="3 4" strokeLinecap="round"/>
          <circle cx="232" cy="113" r="4" fill={R.ink} stroke="#fff" strokeWidth="1.5"/>
        </svg>
      </div>

      <StatusBar/>

      <div style={{ flex: 1 }}/>

      {paused ? (
        /* 03d · 暂停态 · 居中 pill pair（继续 + 结束）。pill 高 56
           = 03b 圆形 stop 同直径，视觉重量一致。移植自 zhutty ski-b。 */
        <div style={{
          position: 'absolute', left: '50%',
          bottom: 80 + 170 + 14,
          transform: 'translateX(-50%)',
          zIndex: 4,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <button
            onClick={(e) => { e.stopPropagation(); onNav && onNav('back'); }}
            style={{
              height: 56, padding: '0 24px',
              borderRadius: 999,
              background: R.rooy, color: '#fff',
              border: 'none', cursor: 'pointer',
              boxShadow: Shadow.lift,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              ...T.headline, letterSpacing: '-0.005em',
              whiteSpace: 'nowrap',
            }}
            aria-label="继续记录"
          >
            <svg width="14" height="16" viewBox="0 0 14 16">
              <path d="M2 1.5 L13 8 L2 14.5 Z" fill="#fff"/>
            </svg>
            继续
          </button>
          <button
            onClick={(e) => { e.stopPropagation(); onNav && onNav('presession-end'); }}
            style={{
              height: 56, padding: '0 24px',
              borderRadius: 999,
              background: R.alert, color: '#fff',
              border: 'none', cursor: 'pointer',
              boxShadow: Shadow.lift,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              ...T.headline, letterSpacing: '-0.005em',
              whiteSpace: 'nowrap',
            }}
            aria-label="结束记录"
          >
            {/* 白方块 —— 03b stop 内的红方块同 glyph 语言，色随 surface
                翻转（白底→红 / 红底→白） */}
            <span style={{ width: 14, height: 14, background: '#fff', borderRadius: 2 }}/>
            结束
          </button>
        </div>
      ) : (
        /* 03b · 滑行中 · 右下 56pt 圆形 stop。tap → 暂停 push 03d。
           固定在 peek 高度上沿 14px，展开时 sheet 升上来会盖住它（用户
           故意要的效果——展开就是在看详细数据，不需要再看 stop 入口）。 */
        <button onClick={(e) => { e.stopPropagation(); onNav && onNav('ski-d'); }} style={{
          position: 'absolute', right: 18, zIndex: 4,
          bottom: 80 + 170 + 14,
          width: 56, height: 56, borderRadius: 999,
          background: '#fff', border: 'none', padding: 0, cursor: 'pointer',
          boxShadow: Shadow.lift,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{ width: 18, height: 18, background: R.alert, borderRadius: 3 }}/>
        </button>
      )}

      {/* Sheet —— 圆角对称 B.sheetL（ski 常驻 panel 档）*/}
      <div style={{
        position: 'relative', zIndex: 5,
        background: R.bg,
        borderTopLeftRadius: B.sheetL,
        borderTopRightRadius: B.sheetL,
        paddingTop: 4,
        boxShadow: Shadow.sheet,
        /* marginBottom 比 TabBar 总高 (76pt) 略小，sheet 底部钻到 TabBar
           下面 ~6pt——TabBar backdrop blur 把这段盖掉，不留 basemap 露白
           的缝。原值 80 是配老 TabBar 86pt 算的，TabBar 收到 76 之后 80
           就比 TabBar 高 4pt，露出 basemap 那条横线. */
        marginBottom: 70,
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
        height: sheetH,
        transition: 'height 0.36s cubic-bezier(0.4,0,0.2,1)',
      }}>
        {/* drag handle —— 紧凑行 (03c 同款) */}
        <button
          onClick={() => setExpanded(!expanded)}
          style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            display: 'flex', justifyContent: 'center', width: '100%',
            padding: '8px 0 10px',
            flexShrink: 0,
          }}>
          <div style={{ width: 38, height: 5, borderRadius: 3, background: 'rgba(14,17,22,0.18)' }}/>
        </button>

        <div style={{
          flex: 1, minHeight: 0,
          overflowY: 'auto',
          WebkitOverflowScrolling: 'touch',
        }}>
          <SheetBody expanded={expanded}/>
        </div>
      </div>

      <TabBar active="ski" onTab={(t) => onNav && onNav(t)}/>
    </div>
  );
}

/* SheetBody —— peek (caption + 3 stat + ROOY) → divider → expanded 4 段。
   peek 顺序按"数据 → 教练"读：caption 告诉你这是哪趟、数字摆出来、
   ROOY 在下面给一句话 verdict。展开后再细看四块。 */
function SheetBody({ expanded }) {
  return (
    <>
      {/* ── PEEK · 1. trip scope — "label ⇄ trip name" space-between，
            让 "刚刚那趟" 视觉上读作 scope label，不像一句小标题. */}
      <div style={{
        padding: '0 22px',
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      }}>
        <span style={{ ...T.eyebrow, color: R.ink3 }}>刚刚那趟</span>
        <span style={{ ...T.footnote, color: R.ink2 }}>Furi 蓝道</span>
      </div>

      {/* ── PEEK · 2. 3 stat — flex 1 等宽 + 列间 vertical hairline.
          跟 03c peek 一致, 让"刚刚那趟"的三个核心数据像 dashboard
          一样分列读. */}
      <div style={{ margin: '10px 0 0', display: 'flex', alignItems: 'stretch' }}>
        <div style={{ flex: 1, paddingLeft: 22, paddingRight: 14 }}>
          <StatCol label="最高速" value="64" unit="km/h"/>
        </div>
        <div style={{ width: 0.5, background: R.hair2, alignSelf: 'stretch' }}/>
        <div style={{ flex: 1, paddingLeft: 18, paddingRight: 14 }}>
          <StatCol label="里程" value="1.4" unit="km"/>
        </div>
        <div style={{ width: 0.5, background: R.hair2, alignSelf: 'stretch' }}/>
        <div style={{ flex: 1, paddingLeft: 18, paddingRight: 22 }}>
          <StatCol label="用时" value="3:42"/>
        </div>
      </div>

      {/* ── PEEK · 3. ROOY 反馈 — dot inline 跟文字中部对齐 ── */}
      <p style={{
        margin: '14px 22px 0',
        ...T.body, color: R.ink, fontWeight: 500,
      }}>
        <span style={{
          display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
          background: R.rooy, marginRight: 10, verticalAlign: 'middle',
          position: 'relative', top: '-1px',
        }}/>
        右弯入弯快了 0.08s，比昨天稳。
      </p>

      {/* ── EXPANDED · 3 段，平铺无卡 ─────────────────
          顺序：速度曲线 → 左右脚 → 今日累计。
          peek↔expanded 不用 hairline，第一段 first padding-top 做气口. */}
      <Section label="速度曲线" sub="本趟 8 弯" first>
        <SpeedSparkline/>
      </Section>

      {/* 左右脚 —— bar + 50% 中线 reference 让"偏左/偏右"秒读，
          比纯数字更直观。fill 弱化到 ink3 (原 ink2 太重)，中线
          ink2 作为强 reference 锚 50%. "偏左 4" 作为 sub 是 ROOY
          主动 verdict，取代了平淡的 "重心分配". */}
      <Section label="左右脚" sub="偏左 4">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ ...T.footnote, color: R.ink3 }}>左</span>
            <span style={{ ...N.hero, fontSize: 22, color: R.ink, lineHeight: 1 }}>52</span>
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ ...N.hero, fontSize: 22, color: R.ink, lineHeight: 1 }}>48</span>
            <span style={{ ...T.footnote, color: R.ink3 }}>右</span>
          </span>
        </div>
        <div style={{ position: 'relative', height: 4 }}>
          <div style={{ position: 'absolute', inset: 0, background: R.hair2, borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: '52%', height: '100%', background: R.ink3, borderRadius: 2 }}/>
          </div>
          <div style={{
            position: 'absolute', left: '50%', top: -3, bottom: -3,
            width: 1.5, background: R.ink2, transform: 'translateX(-0.75px)',
          }}/>
        </div>
      </Section>

      {/* "今日累计" 是另一个时间尺度——前 3 段都是本趟，这段是当日。
          时间尺度切换靠加大 spacing 表达（gap=40）。
          4 项用 2x2 grid，让每项有呼吸——一行 4 项太挤. */}
      <Section label="今日累计" sub="到目前为止" gap last>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 12, columnGap: 24 }}>
          <DayStat l="里程" v="12.4" u="km"/>
          <DayStat l="垂降" v="8.4"  u="km"/>
          <DayStat l="趟数" v="14"/>
          <DayStat l="时长" v="4:32"/>
        </div>
      </Section>
    </>
  );
}

/* Section —— 平铺段，靠 spacing + caption 自立；不用白卡。
   caption 是 T.eyebrow + ink3，副 sub 是 T.footnote + ink4。
   first：peek↔expanded 不用 hairline 时，第一段顶气口拉大成 32。
   gap：标记时间尺度切换的段（本趟 → 今日），顶气口拉大成 40. */
function Section({ label, sub, first, last, gap, children }) {
  const top = first ? 32 : gap ? 40 : 22;
  return (
    <div style={{ padding: `${top}px 20px ${last ? 24 : 0}px` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
        <span style={{ ...T.eyebrow, color: R.ink3 }}>{label}</span>
        {sub && <span style={{ ...T.footnote, color: R.ink4 }}>{sub}</span>}
      </div>
      {children}
    </div>
  );
}

/* StatCol —— peek 的 3 列数字。label footnote 普通中文小字（不再
   uppercase），自然左对齐让三个 stat 跟 ski (03) 的 Stat 一致。 */
function StatCol({ label, value, unit }) {
  return (
    <div>
      <p style={{ ...T.footnote, color: R.ink3, marginBottom: 4 }}>{label}</p>
      <StatNumber value={value} unit={unit} size={30}/>
    </div>
  );
}

/* DayStat —— 今日累计 inline 项：label 灰小 + 数字 size 18 + unit 灰小。
   靠 parent flex 的 space-between 分散，无需 dot 分隔符. */
function DayStat({ l, v, u }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 5 }}>
      <span style={{ ...T.caption1, color: R.ink3 }}>{l}</span>
      <span style={{ ...N.hero, fontSize: 18, color: R.ink, letterSpacing: '-0.02em' }}>{v}</span>
      {u && <span style={{ ...T.caption1, color: R.ink3 }}>{u}</span>}
    </span>
  );
}

/* ── 速度曲线 sparkline —— 单色 data 折线 + dot-grid 底。
   数据按"弯"分组：8 段 turns，每段是一个弯的 speed samples。弯之
   间用 dashed vertical line 标分界——让 sub "8 弯" 字面可见，
   而不只是"一根曲线"。不高亮最快弯，所有弯平权. */
function SpeedSparkline() {
  const turns = [
    [18, 28, 36, 30, 20, 14, 12],
    [22, 36, 50, 55, 46, 30, 20, 16, 18],
    [28, 46, 62, 68, 58, 40, 28, 22, 30],
    [38, 48, 50, 40, 22, 14, 12],
    [26, 46, 64, 72, 60, 40, 28, 24, 30],
    [36, 42, 45, 36, 22, 16, 14],
    [28, 44, 58, 60, 50, 32, 22, 18],
    [24, 28, 32, 26, 22, 20],
  ];
  const speeds = turns.flat();
  // 边界点索引（每个弯起始位置，含尾边界）→ 内部分割线落在
  // (boundary - 0.5) 处，画在两个弯之间.
  const boundaries = turns.reduce(
    (acc, t) => [...acc, acc[acc.length - 1] + t.length],
    [0],
  ).slice(1, -1); // 去掉首尾，只留 7 条内部分隔

  const min = Math.min(...speeds), max = Math.max(...speeds);
  const range = max - min || 1;
  const w = 326, h = 80, padTop = 14, padBot = 10, padX = 6;
  const yRange = h - padTop - padBot;
  const xRange = w - padX * 2;
  const xAt = (i) => padX + (i / (speeds.length - 1)) * xRange;
  const pts = speeds.map((v, i) => ({
    x: xAt(i),
    y: padTop + (1 - (v - min) / range) * yRange,
  }));

  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(' ');
  const last = pts[pts.length - 1];

  return (
    <DottedGrid style={{ padding: '14px 0' }}>
      <svg width="100%" viewBox={`0 0 ${w} ${h}`}
        style={{ display: 'block', overflow: 'visible' }}>
        {/* turn dividers —— 实线 vertical 标 8 段分界。
            点阵 (discrete 圆点) + dashed (discrete 短段) 视觉碎片
            会互相干扰；改实线，形态语言跟点阵区分开，眼睛能立刻
            分清"参考线 vs 底纹"。stroke 极弱 (0.18) 不抢曲线. */}
        {boundaries.map((b, k) => {
          const x = xAt(b - 0.5);
          return (
            <line key={k} x1={x} x2={x} y1="0" y2={h}
              stroke="rgba(14,17,22,0.18)" strokeWidth="0.7"/>
          );
        })}
        <path d={`${path} L ${last.x.toFixed(2)} ${h - 1} L ${pts[0].x.toFixed(2)} ${h - 1} Z`}
          fill="var(--r-data)" fillOpacity="0.07"/>
        <path d={path} fill="none"
          stroke="var(--r-data)" strokeWidth="1.8"
          strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx={last.x} cy={last.y} r="3.5" fill="var(--r-data)"/>
      </svg>
    </DottedGrid>
  );
}

Object.assign(window, { SkiScreenB });
