/* ============================================================
   ROOY · 02a 滑行总结 · 继续
   ───────────────────────────────────────────────────────────
   需求：滑完一趟后的中间态（不是结束）。ROOY 给一句总结 + 当日
   累计数据，按钮变"继续滑行"。

   骨架完全复用 02（地图版）：basemap（地形 → 静音 scrim → 定位
   信息层）/ header / 天气卡 / 白卡 / SlideToStart。只换：白卡
   内容 = 一句 ROOY 总结 + 3 列累计数据（趟数 / 里程 / 时间），
   按钮文案 → "继续滑行"；地图上多一条已滑轨迹。

   跨屏入口：白卡 eyebrow 行右侧"今日详情 ›" → 10 单日汇总
   （看完整路线图 / 高光 / ROOY 见证）。卡本体是 ROOY 教练时刻，
   不整张可点，只这一个明确入口跳详情。

   italic anchor：天气 −7°（同 02，跨屏稳定）。
   accent budget：data 蓝（定位点 + 总结 3-up 数据；已滑轨迹压在 scrim 之下，
   不算强度）；rooy 2（传感器 pip + 滑行总结 pill）；gold 0。主导 = ink。

   非显然的设计决定：已滑轨迹画在 scrim 之下——压暗成"今天的
   记忆"当 ambient 背景，完整轨迹图归 10 单日汇总；定位点回到
   缆车站 = 正要再上（与"继续滑行"呼应）。
   ============================================================ */

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

      {/* basemap — 02 同款地形 + 已滑轨迹（scrim 之下） */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
        overflow: 'hidden',
      }}>
        <svg width="100%" height="100%" viewBox="0 0 390 844" preserveAspectRatio="xMidYMin slice"
             style={{ display: 'block' }}>
          <defs>
            <linearGradient id="presession-end-mp" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="844">
              <stop offset="0%"    stopColor="#F4F6F9"/>
              <stop offset="50%"   stopColor="#E8ECF1"/>
              <stop offset="100%"  stopColor="#E8ECF1"/>
            </linearGradient>
          </defs>
          <rect width="390" height="844" fill="url(#presession-end-mp)"/>

          {Array.from({ length: 27 }).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: 7 }).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="303" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>2000 M</text>
          <text x="100" y="543" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>1600 M</text>
          <text x="24"  y="640" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>1400 M</text>

          {/* 缆车虚线 — 从山脚站向上山方向 */}
          <path d="M 150 632 L 250 70" stroke="rgba(14,17,22,0.4)" strokeWidth="1.4" strokeDasharray="3 4" strokeLinecap="round"/>

          {/* 已滑轨迹 — 从上山滑回缆车站；在 scrim 之下压暗成
              "今天的记忆"，不与卡片内容抢视线 */}
          <path d="M 120 90 C 160 220, 90 380, 150 480 S 205 585, 152 624"
            fill="none" stroke="var(--r-data)" strokeWidth="3.5" strokeLinecap="round"/>
        </svg>

        {/* 静音 scrim — 同 02：中间态地图仍是"未激活"底图 */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'color-mix(in srgb, var(--r-bg) 60%, transparent)',
        }}/>

        {/* info 层 — 定位点与缆车站，浮在 scrim 上 */}
        <svg width="100%" height="100%" viewBox="0 0 390 844" preserveAspectRatio="xMidYMin slice"
             style={{ position: 'absolute', inset: 0 }}>
          <g transform="translate(178 596)">
            <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>

          {/* 定位 — 回到缆车站，正要再上 */}
          <circle cx="150" cy="632" r="18" fill="var(--r-data)" fillOpacity=".14"/>
          <circle cx="150" cy="632" r="10" fill="var(--r-data)" fillOpacity=".30"/>
          <circle cx="150" cy="632" r="5.5" fill="var(--r-data)"/>
          <circle cx="150" cy="632" r="5.5" fill="none" stroke="#fff" strokeWidth="1.5"/>
        </svg>
      </div>

      <StatusBar/>

      <div style={{ flex: 1, position: 'relative' }}>

        {/* ── Header — 同 02 ── */}
        <div style={{ padding: '8px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ paddingTop: 4 }}>
            <p style={{ ...T.footnote, color: R.ink3, marginBottom: 4 }}>5 月 3 日 · 周五 · 瑞士阿尔卑斯</p>
            <h1 style={{ ...T.title, color: R.ink }}>Zermatt</h1>
          </div>
          <button onClick={() => onNav && onNav('pairing-connected')} style={{
            width: 44, height: 44, borderRadius: '50%',
            background: R.card, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
            marginTop: 12,
            boxShadow: Shadow.lift,
          }}>
            <SensorGlyph color={R.ink}/>
            <span style={{
              position: 'absolute', bottom: -1, right: -1,
              width: 12, height: 12, borderRadius: '50%',
              background: R.rooy, border: `2px solid ${R.bg}`,
            }}/>
          </button>
        </div>

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

        {/* ── 天气卡 — 02 同款（含 76pt 大字，垂直 padding 20 比内容卡多一档呼吸） ── */}
        <div style={{
          margin: '0 16px', borderRadius: B.cardL, padding: '20px 20px',
          background: R.card,
          boxShadow: Shadow.cardSoft,   /* 内容白卡对齐 01q 主屏（cardSoft），同 02 */
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
              <span style={{ ...N.italic, fontSize: 76, color: R.ink, lineHeight: 0.85 }}>−7</span>
              <span style={{ ...N.italic, fontSize: 34, color: R.ink, paddingBottom: 5 }}>°</span>
            </div>
            <SunGlyph size={56} color={R.ink3}/>
          </div>

          <div style={{
            marginTop: 16, paddingTop: 16, borderTop: `0.5px solid ${R.hair}`,
            display: 'flex', justifyContent: 'space-between',
          }}>
            <CCond l="新雪"     v="12" u="cm"/>
            <CCond l="开放雪道" v="38" u="/ 52"/>
            <CCond l="风速"     v="12" u="km/h"/>
          </div>
        </div>

        {/* 28：同 02，白卡与天气卡拉开一档 */}
        <div style={{ height: 28 }}/>

        {/* ── 总结白卡 · 今日滑行总结（原黑卡；白底后 TopoLines 白描线不可见，移除）── */}
        <div style={{
          margin: '0 16px', borderRadius: B.cardL, padding: '16px 20px',
          background: R.card, color: R.ink,
          position: 'relative', overflow: 'hidden',
          boxShadow: Shadow.cardSoft,
        }}>
          <div style={{ position: 'relative' }}>
            {/* eyebrow 行：左 label / 右"今日详情 ›"快捷入口 → 10 单日汇总.
                action 复用 eyebrow 字号 + R.ink3，跟左边 label 同档不抢戏；
                靠位置 + chevron 传"可点"，不靠加重或换色. */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <StatusBadge tone="rooy">滑行总结</StatusBadge>
              <button onClick={() => onNav && onNav('daily')} style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                padding: '4px 0', minHeight: 28,
                ...T.eyebrow, color: R.ink3,
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>
                今日详情
                <svg width="6" height="10" viewBox="0 0 7 12">
                  <path d="M1 1l5 5-5 5" stroke="currentColor" strokeWidth="1.6"
                    fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            </div>

            <p style={{
              ...T.para, color: R.ink2, marginTop: 14,
            }}>
              到目前为止
              <span style={{ color: R.data, fontWeight: 600 }}> 8.4 km</span>
              ，稳得住。今天右弯立刃比上一段更早立得稳，节奏在回来。
            </p>

            {/* 3-up stats — 趟数 / 里程 / 时间. 复用 01q 雪季卡 CCond
                排版（footnote label + N.hero 28 + unit caption1，
                space-between 三联、无 divider）；value 走 data 蓝
                （今日累计 = 数据），label ink3. */}
            <div style={{
              marginTop: 14, paddingTop: 16,
              borderTop: `0.5px solid ${R.hair}`,
              display: 'flex', justifyContent: 'space-between',
            }}>
              <CCond l="趟数" v="12" c={R.data} />
              <CCond l="里程" v="8.4" u="km" c={R.data} />
              <CCond l="时间" v="2:18" u="h" c={R.data} />
            </div>
          </div>
        </div>

      </div>

      {/* SlideToStart — 同 02 但 label 继续滑行 */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 108,
        transform: 'translateX(-50%)',
        width: 280, zIndex: 40,
      }}>
        <SlideToStart label="继续滑行" onStart={() => onNav && onNav('ski')} />
      </div>

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

Object.assign(window, { PreSessionScreenEnd });