/* ============================================================
   ROOY · 故障页弹窗（modal alerts）
   ───────────────────────────────────────────────────────────
   需求：滑行 / 配对 / 后台同步过程中可能遇到的硬件 / 网络 / 权限
   故障，用统一的 iOS HIG alert 风格弹出（dim backdrop + 居中
   alert card + icon + title + body + 底部按钮 hairline 分隔）。

   故障清单（按发生频率 / 严重度排序）：
     · F1 传感器断开    — 蓝牙连接中断，必须重连（关键，alert red）
     · F2 传感器电量低  — 还能滑一段，仅提示（警告，gold）
     · F3 GPS 信号弱    — 缆车厢 / 隧道遮挡，自动恢复（提示，ink3）
     · F4 位置权限拒    — 用户首次未授权，必须去设置（关键，data 蓝）

   accent budget（modal 浮层，不计屏内 budget）：
     · alert red — 关键故障（连接断开）
     · gold      — 警告（电量低）
     · ink3      — 中性提示（GPS 弱，"会自动恢复"不需要 alert 色）
     · data 蓝   — 跳设置的引导（用 data 色暗示"系统级"动作）

   iOS HIG 标准：
     · alert 宽 ~270pt（这里 286 适配中文留呼吸）
     · 按钮在 card 底部，hairline 分隔
     · 单按钮全宽；双按钮横排中间 vertical hairline
     · primary 按钮 fontWeight 600，secondary 400
     · destructive 按钮用 R.alert 红色文字

   ============================================================ */

/* FaultAlertModal — 故障 modal 通用容器。dim backdrop + 居中 alert
   card。`tone` 决定 icon 圆背景色调；`destructive` 让 primary 按钮
   变红色（"断开连接"这种需要警告的破坏性动作）。 */
function FaultAlertModal({
  tone = 'neutral',
  icon,
  title,
  body,
  primary = '知道了',
  secondary,
  destructive = false,
}) {
  /* tone → icon 圆背景 / 前景色映射 */
  const toneMap = {
    alert:   { bg: 'color-mix(in srgb, oklch(60% 0.21 24) 14%, transparent)', fg: R.alert },
    gold:    { bg: 'color-mix(in srgb, var(--r-gold) 16%, transparent)',      fg: R.gold },
    data:    { bg: 'color-mix(in srgb, var(--r-data) 12%, transparent)',      fg: R.data },
    neutral: { bg: R.systemFill,                                              fg: R.ink2 },
  };
  const t = toneMap[tone] || toneMap.neutral;

  const btnBase = {
    flex: 1, padding: '14px 0',
    background: 'transparent', border: 'none', cursor: 'pointer',
    ...T.body,
  };

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      ...Scrim,
      alignItems: 'center', justifyContent: 'center',
      padding: '0 32px',
      position: 'relative',
    }}>
      <StatusBar dark/>
      <div style={{ flex: 1 }}/>

      <div style={{
        width: '100%', maxWidth: 286,
        background: R.card, borderRadius: 14,
        boxShadow: Shadow.alert,
        overflow: 'hidden',
        animation: 'rooy-alert-in 220ms cubic-bezier(0.2,0,0,1) both',
      }}>
        {/* content */}
        <div style={{ padding: '24px 22px 18px', textAlign: 'center' }}>
          <div style={{
            width: 52, height: 52, borderRadius: 26,
            background: t.bg, color: t.fg,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 14,
          }}>
            {icon}
          </div>

          <h2 style={{
            ...T.h2, color: R.ink,
            marginBottom: 6,
          }}>{title}</h2>

          <p style={{
            ...T.subhead, color: R.ink2,
            lineHeight: '21px',
          }}>{body}</p>
        </div>

        {/* buttons */}
        <div style={{
          borderTop: `0.5px solid ${R.hair2}`,
          display: 'flex',
        }}>
          {secondary && (
            <>
              <button style={{ ...btnBase, color: R.ink2 }}>{secondary}</button>
              <div style={{ width: 0.5, background: R.hair2 }}/>
            </>
          )}
          <button style={{
            ...btnBase,
            fontWeight: 600,
            color: destructive ? R.alert : R.ink,
          }}>{primary}</button>
        </div>
      </div>

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

/* ── Icon glyphs ─ */

/* ── Icon glyphs ─
   统一 24×24 视口、1.7 线宽、圆角圆头，SF-Symbols 风。slash 只给
   "断开 / 被拒"两种 off 态（bluetooth / location），电量低 / GPS 弱
   是 low/weak 不是 off，所以不带 slash——slash 本身承担语义。 */

function BluetoothSlashGlyph() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      {/* bluetooth bind-rune outline */}
      <path d="M12 3 L18 8 L6 16 L12 21 L18 16 L6 8 Z"
        stroke="currentColor" strokeWidth="1.7"
        strokeLinejoin="round" strokeLinecap="round"/>
      <path d="M5 19 L19 5"
        stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  );
}

function BatteryLowGlyph() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="8.5" width="14.5" height="8.5" rx="2.2"
        stroke="currentColor" strokeWidth="1.7"/>
      {/* low charge fill — 左侧一小段 = 所剩无几 */}
      <rect x="5" y="10.5" width="3.5" height="4.5" rx="1.2" fill="currentColor"/>
      {/* 正极 nub */}
      <rect x="17.5" y="11.5" width="2" height="4" rx="1" fill="currentColor"/>
    </svg>
  );
}

function GpsWeakGlyph() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      {/* signal bars — 只有最近一格满，越远越淡 = 弱 */}
      <rect x="3"  y="15" width="3" height="5"  rx="0.9" fill="currentColor"/>
      <rect x="8"  y="12" width="3" height="8"  rx="0.9" fill="currentColor" opacity="0.42"/>
      <rect x="13" y="9"  width="3" height="11" rx="0.9" fill="currentColor" opacity="0.20"/>
      <rect x="18" y="6"  width="3" height="14" rx="0.9" fill="currentColor" opacity="0.10"/>
    </svg>
  );
}

function LocationOffGlyph() {
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      {/* map pin — 尖底 + 中心实心点 = 位置 */}
      <path d="M12 3 C 8.5 3 5.5 5.7 5.5 9.5 C 5.5 14 12 21 12 21 C 12 21 18.5 14 18.5 9.5 C 18.5 5.7 15.5 3 12 3 Z"
        stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/>
      <circle cx="12" cy="9.7" r="1.7" fill="currentColor"/>
      <path d="M4.5 19.5 L19.5 4.5"
        stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  );
}

/* ── 4 个 fault alert 实例 ─ */

function FaultSensorDisconnected() {
  return (
    <FaultAlertModal
      tone="alert"
      icon={<BluetoothSlashGlyph/>}
      title="传感器断开了"
      body="右脚传感器跟手机失去连接 — 这趟的滑行数据会暂停记录。"
      primary="重新连接"
      secondary="稍后处理"
    />
  );
}

function FaultSensorLowBattery() {
  return (
    <FaultAlertModal
      tone="gold"
      icon={<BatteryLowGlyph/>}
      title="传感器电量不足"
      body="左脚 12%、右脚 8% — 大约还能滑 30 分钟，建议这趟下来后充电。"
      primary="知道了"
    />
  );
}

function FaultGpsWeak() {
  return (
    <FaultAlertModal
      tone="neutral"
      icon={<GpsWeakGlyph/>}
      title="GPS 信号弱"
      body="缆车厢里收不到 GPS 是正常的 — 出隧道后会自动恢复，路线会接上。"
      primary="继续滑行"
    />
  );
}

function FaultLocationDenied() {
  return (
    <FaultAlertModal
      tone="data"
      icon={<LocationOffGlyph/>}
      title="需要打开位置权限"
      body="ROOY 用 GPS 记录路线和坡度。打开「设置 › 隐私 › 位置」并勾选「使用期间」。"
      primary="打开设置"
      secondary="暂不"
    />
  );
}

Object.assign(window, {
  FaultAlertModal,
  FaultSensorDisconnected,
  FaultSensorLowBattery,
  FaultGpsWeak,
  FaultLocationDenied,
  BluetoothSlashGlyph,
  BatteryLowGlyph,
  GpsWeakGlyph,
  LocationOffGlyph,
});