/* ============================================================
   ROOY · 弹窗 & 浮层画廊（Alerts & Overlays gallery）
   ───────────────────────────────────────────────────────────
   集中展示统一浮层系统里「故障 alert 之外」的形态：
     · Toast      — 顶部瞬时轻提示（成功 / 带操作）
     · ActionSheet — 底部破坏性确认（登出 / 断开传感器）

   全部基于 shared.jsx 的统一层：Scrim / Shadow.alert / Shadow.sheet
   / Z / 共享 keyframes。dismiss 契约：sheet/action = scrim 点 + 下滑；
   toast = 自动消失，无需操作。

   画廊背景用一张极简设置页作 scrim 衬底，让浮层读起来是「modal
   盖在真实屏上」而不是浮在真空。
   ============================================================ */

/* OverlaySettingsBg — scrim 衬底。一张克制的设置 list，给浮层一个
   「真实屏被盖住」的语境。children（浮层本体）叠在它上面。 */
function OverlaySettingsBg({ children }) {
  return (
    <div style={{
      height: '100%', position: 'relative',
      background: R.bg, display: 'flex', flexDirection: 'column',
    }}>
      <StatusBar/>
      <NavBar title="设置"/>
      <div style={{ flex: 1, overflow: 'hidden' }}>
        <InsetGroup>
          <InsetRow left="账号" right="ye@rooy.app"/>
          <InsetRow left="已配对传感器" right="2 个" accessory/>
          <InsetRow left="滑行数据同步" right="iCloud" accessory/>
        </InsetGroup>
        <InsetGroup style={{ marginTop: 20 }}>
          <InsetRow left="通知" accessory/>
          <InsetRow left="隐私" accessory/>
        </InsetGroup>
      </div>
      <HomeIndicator/>
      {children}
    </div>
  );
}

/* ── Toast ─ */

function ToastSuccessScreen() {
  return (
    <OverlaySettingsBg>
      <Toast text="已复制分享链接"/>
    </OverlaySettingsBg>
  );
}

function ToastActionScreen() {
  return (
    <OverlaySettingsBg>
      <Toast text="已加入课程" action="去看看"/>
    </OverlaySettingsBg>
  );
}

/* ── ActionSheet ─ */

/* ActionSheetLogout — 点设置里红色「退出登录」行后弹出。title 给一句
   后果说明；destructive 行用 R.alert；取消分组隔开。 */
function ActionSheetLogoutScreen() {
  return (
    <OverlaySettingsBg>
      <ActionSheet
        title="退出后需重新登录才能查看滑行记录"
        actions={[
          { label: '退出登录', destructive: true, onClick: () => {} },
        ]}
      />
    </OverlaySettingsBg>
  );
}

/* ActionSheetDisconnect — 断开 2 个传感器。两步后果 + 破坏性确认。 */
function ActionSheetDisconnectScreen() {
  return (
    <OverlaySettingsBg>
      <ActionSheet
        title="将断开左脚 + 右脚传感器，滑行数据会暂停记录"
        actions={[
          { label: '断开连接', destructive: true, onClick: () => {} },
        ]}
      />
    </OverlaySettingsBg>
  );
}

Object.assign(window, {
  OverlaySettingsBg,
  ToastSuccessScreen, ToastActionScreen,
  ActionSheetLogoutScreen, ActionSheetDisconnectScreen,
});