/* ============================================================
   ROOY · 15 设置
   ───────────────────────────────────────────────────────────
   需求：iOS Settings 风格的设置首页。从 Home 头像进入。

   结构：用户身份卡（头像 + 昵称 + 副标，点击 → 15a 基本信息编辑）
   → 多组 InsetGroup（账户 / 隐私 / 硬件 / 通知 / 反馈 / 关于 / 注销）。

   no italic anchor（utility）。rooy 主导 = ROOY Pro 升级入口卡的「PRO」
   字标；传感器"已连接"状态 dot 为次要降级。登出 + 断开传感器用 R.alert。
   ============================================================ */

function SettingsScreen({ onNav }) {
  const [showLogout, setShowLogout] = React.useState(false);
  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: R.bg, color: R.ink, ...T.subhead,
      position: 'relative',
    }}>
      <StatusBar/>
      <NavBar onBack={() => onNav && onNav('home')} title="设置"/>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 36 }}>

        {/* Profile card — links to profile edit */}
        <div style={{ padding: '6px 16px 0' }}>
          <button onClick={() => onNav && onNav('settings-profile')} style={{
            width: '100%', textAlign: 'left',
            background: R.card, border: 'none',
            borderRadius: B.cardL, padding: '14px 16px', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <UserAvatar size={56}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <p style={{ ...T.h2, color: R.ink }}>Yuki</p>
              <p style={{ ...T.footnote, color: R.ink3, marginTop: 4 }}>高阶滑手 滑雪发烧友</p>
            </div>
            <Chevron/>
          </button>
        </div>

        {/* ROOY Pro 锚点 — 设置里永远能找到的升级入口。白卡 + 「PRO」
            字标 + 标题 + 权益副标。突出手法对齐成就页 current 卡：
            1.5px rooy 描边 + 贴边极轻 rooy 光晕（无偏移不浮高，和其他
            flat 卡同层级）。rooy 唯一 accent。 */}
        <div style={{ padding: '10px 16px 0' }}>
          <button onClick={() => onNav && onNav('rooy-pro')} style={{
            width: '100%', textAlign: 'left',
            background: R.card, border: `1.5px solid ${R.rooy}`,
            borderRadius: B.cardL, padding: '14px 16px', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 14,
            boxShadow: '0 0 14px ' + R.rooyTint12,
          }}>
            <span style={{
              flexShrink: 0,
              fontFamily: '"SF Pro Display", -apple-system, system-ui, sans-serif',
              fontWeight: 800, fontSize: 22,
              letterSpacing: '0.03em', color: R.rooy, lineHeight: 1,
            }}>PRO</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <p style={{ ...T.body, color: R.ink, fontWeight: 600 }}>升级会员</p>
              <p style={{ ...T.footnote, color: R.ink3, marginTop: 3 }}>
                无限陪练 · 深度复盘 · 进阶课程
              </p>
            </div>
            <Chevron/>
          </button>
        </div>

        <SettingsSection title="通用">
          <InsetGroup>
            <SettingRow l="单位" r="km"/>
            <SettingRow l="语言" r="中文"/>
            <SettingRow l="外观" r="跟随系统"/>
          </InsetGroup>
        </SettingsSection>

        <SettingsSection title="ROOY 教练">
          <InsetGroup>
            <SettingRow l="语音反馈" toggle={true}/>
            <SettingRow l="反馈频率" r="适中"/>
            <SettingRow l="课程节奏" r="标准"/>
          </InsetGroup>
        </SettingsSection>

        <SettingsSection title="数据与设备">
          <InsetGroup>
            <SettingRow l="传感器" r="ROOY-3 · 已连接" rooy navigate
              onClick={() => onNav && onNav('pairing-connected')}/>
            <SettingRow l="Apple 健康" r="已同步" navigate/>
            <SettingRow l="导出数据" navigate/>
          </InsetGroup>
        </SettingsSection>

        <SettingsSection title="关于">
          <InsetGroup>
            <SettingRow l="版本" r="1.0.0 (3)"/>
            <SettingRow l="隐私政策" navigate/>
            <SettingRow l="服务条款" navigate/>
          </InsetGroup>
        </SettingsSection>

        <SettingsSection>
          <InsetGroup>
            <div style={{ padding: '14px 16px', textAlign: 'center' }}>
              <button onClick={() => setShowLogout(true)} style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                ...T.body, color: R.alert,
              }}>登出</button>
            </div>
          </InsetGroup>
        </SettingsSection>

      </div>

      {showLogout && (
        <ActionSheet
          title="退出后需重新登录才能查看滑行记录"
          actions={[{ label: '退出登录', destructive: true, onClick: () => setShowLogout(false) }]}
          onCancel={() => setShowLogout(false)}
        />
      )}
    </div>
  );
}

function SettingsSection({ title, children }) {
  return (
    <div style={{ marginTop: 22 }}>
      {title && (
        <p style={{ ...T.eyebrow, color: R.ink3, padding: '0 28px 8px' }}>{title}</p>
      )}
      {children}
    </div>
  );
}

function SettingRow({ l, r, toggle, navigate, rooy, onClick }) {
  const interactive = onClick || navigate;
  return (
    <div onClick={onClick} style={{
      padding: '14px 16px', minHeight: 48,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
      cursor: interactive ? 'pointer' : 'default',
    }}>
      <span style={{ ...T.body, color: R.ink }}>{l}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {rooy && <Dot size={6} color={R.rooy}/>}
        {r && <span style={{ ...T.body, color: R.ink3 }}>{r}</span>}
        {toggle && <IOSToggle on={true}/>}
        {navigate && <Chevron/>}
      </div>
    </div>
  );
}

function IOSToggle({ on }) {
  return (
    <div style={{
      width: 50, height: 30, borderRadius: 15,
      background: on ? R.ink : R.hair2,
      position: 'relative', transition: 'background .2s',
      flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute', top: 2, left: on ? 22 : 2,
        width: 26, height: 26, borderRadius: '50%',
        background: '#fff',
        boxShadow: Shadow.thumb,
        transition: 'left .2s',
      }}/>
    </div>
  );
}

Object.assign(window, { SettingsScreen, SettingsSection, SettingRow, IOSToggle });