/* ============================================================
   ROOY · 10a 单日分享弹窗
   ───────────────────────────────────────────────────────────
   需求：用户在 10 屏右上点分享键后弹出。预览将要分享出去的卡片
   （场名 + 日期 + 路线图 + 数据 + Made with [logo] 水印），下方
   一排分享渠道（保存 / 微信好友 / 朋友圈 / 更多）。

   结构：medium detent —— scrim（点关闭）+ 按内容高度的 sheet（drag
   handle 下滑关闭，无 ×）+ 预览卡 + flush 分享行。

   accent budget：外部品牌色（微信绿 #07C160）允许，是渠道身份信号，
   不计 ROOY 自身 budget；保存 / 更多走中性 systemFill（本地动作）——
   「品牌色 = 对外社交、中性 = 本地」的二分规则；心流数据保留 gold。

   非显然决定：
     · medium detent 而非全高 sheet —— 消除预览卡与分享行间的死空隙，
       上方留大面积 scrim 点关闭区。
     · 分享行 flush（R.bg + 顶部 hairline）而非独立白卡 —— 让预览卡
       成为唯一白块、视觉层级更清。
     · 水印用 assets/logo-wordmark.png 实物 logo（黑 wordmark），分享
       图自带品牌印记。
     · 依赖 daily.jsx 的 DailyTrackMap。

   dismiss 走全 app sheet 契约（shared.jsx 的 Scrim / B.sheet /
   Shadow.sheet / rooy-sheet-up）：scrim 点 + 下滑，无 × 按钮。
   ============================================================ */

/* ShareStat — 分享卡内的数据条（value + unit + 下方 label）。N.italic
   26 / weight 900，单行 baseline 对齐，2×2 grid 内紧凑可读。 */
function ShareStat({ v, u, l, color = R.ink }) {
  return (
    <div>
      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
        <span style={{
          ...N.italic, fontSize: 26, color, lineHeight: 1,
          fontWeight: 900, letterSpacing: '-0.02em',
        }}>{v}</span>
        {u && (
          <span style={{ ...T.footnote, color: R.ink3, fontWeight: 500 }}>{u}</span>
        )}
      </div>
      {l && <p style={{ ...T.caption1, color: R.ink3, marginTop: 2 }}>{l}</p>}
    </div>
  );
}

/* ShareChannel — 单个分享渠道。52pt tinted 圆 + glyph + 下方 label。
   品牌色 = 对外社交（微信绿），中性 systemFill = 本地动作（保存 / 更多）。 */
function ShareChannel({ label, bg, color, children }) {
  return (
    <button style={{
      background: 'transparent', border: 'none', cursor: 'pointer',
      padding: 0, display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 8,
    }}>
      <div style={{
        width: 52, height: 52, borderRadius: '50%',
        background: bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color,
      }}>
        {children}
      </div>
      <span style={{ ...T.caption1, color: R.ink2, fontWeight: 500 }}>{label}</span>
    </button>
  );
}

function DailyShareSheet({ onNav }) {
  const WECHAT_GREEN = '#07C160';

  return (
    <div
      onClick={() => onNav && onNav('back')}
      style={{
        height: '100%', display: 'flex', flexDirection: 'column',
        ...Scrim,
        position: 'relative',
      }}>
      <StatusBar dark/>

      {/* scrim filler —— medium detent：sheet 按内容高度贴底，上方
         整片 scrim 都是点关闭区。 */}
      <div style={{ flex: 1 }}/>

      {/* ── Sheet 主体（内容高度，贴底）── */}
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: R.bg,
          borderTopLeftRadius: B.sheet,
          borderTopRightRadius: B.sheet,
          boxShadow: Shadow.sheet,
          animation: 'rooy-sheet-up 320ms cubic-bezier(0.2,0,0,1) both',
        }}
      >
        {/* drag handle —— 下滑关闭的 affordance（scrim 点关闭是另一条
           路径）。无 × 按钮，无顶部 brand chip。 */}
        <SheetHandle paddingBottom={4}/>

        {/* ── Share preview card（唯一白块 / 视觉英雄）── */}
        <div style={{
          margin: '8px 16px 0',
          background: R.card, borderRadius: B.cardL,
          padding: 12, boxShadow: Shadow.card,
        }}>
          {/* track map */}
          <div style={{ borderRadius: B.card, overflow: 'hidden' }}>
            <DailyTrackMap/>
          </div>

          {/* identity row */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '14px 4px 0',
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: R.ink,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <span style={{
                ...N.italic, fontSize: 18, color: '#fff',
                fontWeight: 900, letterSpacing: '-0.02em',
              }}>R</span>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <p style={{ ...T.headline, color: R.ink }}>Zermatt 单日</p>
              <p style={{ ...T.footnote, color: R.ink3, marginTop: 1 }}>
                2025 / 3 / 20
              </p>
            </div>
          </div>

          {/* stat grid 2×2 */}
          <div style={{
            padding: '14px 4px 4px',
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: '14px 24px',
          }}>
            <ShareStat v="6"   u="趟"  l="滑行"/>
            <ShareStat v="8.4" u="km"  l="滑行里程"/>
            <ShareStat v="2.1" u="km"  l="累计垂降"/>
            <ShareStat v="1.6" u="km"  l="心流" color={R.gold}/>
          </div>

          {/* Made with [logo] —— 分享图自带品牌水印（右下）。logo 是黑
              wordmark PNG，白卡上清晰。 */}
          <div style={{
            marginTop: 12, padding: '0 4px',
            display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 6,
          }}>
            <span style={{ ...T.caption1, color: R.ink3 }}>Made with</span>
            <img src={(window.__ROOY_ASSET_BASE || '') + 'assets/logo-wordmark.png'} alt="ROOY"
              style={{ height: 14, width: 'auto', display: 'block' }}/>
          </div>
        </div>

        {/* ── Share buttons row —— flush（R.bg + 顶部 hairline）── */}
        <div style={{
          padding: '16px 16px 28px',
          display: 'flex', justifyContent: 'space-around',
          borderTop: `0.5px solid ${R.hair}`,
          marginTop: 16,
        }}>
          {/* 保存 —— 中性（本地动作），下载到相册 glyph */}
          <ShareChannel label="保存" bg={R.systemFill} color={R.ink}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <rect x="3" y="4" width="16" height="14" rx="2.5"
                stroke="currentColor" strokeWidth="1.8"/>
              <path d="M3 14l4-4 4 4 3-3 5 5"
                stroke="currentColor" strokeWidth="1.8"
                strokeLinecap="round" strokeLinejoin="round" fill="none"/>
              <circle cx="14" cy="8" r="1.4" fill="currentColor"/>
            </svg>
          </ShareChannel>

          {/* 微信好友 —— 品牌绿 chat bubble */}
          <ShareChannel label="微信好友" bg={WECHAT_GREEN} color="#fff">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M9 4.2c-3.6 0-6.5 2.4-6.5 5.4 0 1.7.9 3.2 2.4 4.2l-.5 1.9 2.3-1.2c.7.2 1.5.3 2.3.3 3.6 0 6.5-2.4 6.5-5.4S12.6 4.2 9 4.2z"
                fill="currentColor"/>
              <path d="M21.5 14.6c0-2.5-2.4-4.5-5.4-4.5-3 0-5.4 2-5.4 4.5s2.4 4.5 5.4 4.5c.7 0 1.4-.1 2-.3l1.9 1-.4-1.6c1.2-.8 1.9-2 1.9-3.6z"
                fill="currentColor"/>
              <circle cx="6.6" cy="8.5" r="0.9" fill={WECHAT_GREEN}/>
              <circle cx="11.2" cy="8.5" r="0.9" fill={WECHAT_GREEN}/>
              <circle cx="14.4" cy="13.6" r="0.7" fill={WECHAT_GREEN}/>
              <circle cx="17.8" cy="13.6" r="0.7" fill={WECHAT_GREEN}/>
            </svg>
          </ShareChannel>

          {/* 朋友圈 —— 品牌绿 圈 + 四象限点 */}
          <ShareChannel label="朋友圈" bg={WECHAT_GREEN} color="#fff">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="1.8"/>
              <circle cx="12" cy="5" r="1.6" fill="currentColor"/>
              <circle cx="19" cy="12" r="1.6" fill="currentColor"/>
              <circle cx="12" cy="19" r="1.6" fill="currentColor"/>
              <circle cx="5" cy="12" r="1.6" fill="currentColor"/>
            </svg>
          </ShareChannel>

          {/* 更多 —— 中性 ⋯ */}
          <ShareChannel label="更多" bg={R.systemFill} color={R.ink}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <circle cx="6" cy="11" r="1.6" fill="currentColor"/>
              <circle cx="11" cy="11" r="1.6" fill="currentColor"/>
              <circle cx="16" cy="11" r="1.6" fill="currentColor"/>
            </svg>
          </ShareChannel>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DailyShareSheet, ShareStat, ShareChannel });