// Settings page — dark-mode list of toggles + nav rows.
// New: "镜像问答" toggle inserted above "开启未成年人模式".

const S_BG = '#000';
const S_CARD = '#0E0E0E';
const S_DIVIDER = '#161616';
const S_TEXT = '#EDEEF0';
const S_MUTED = '#7A7E85';
const S_BLUE = '#1772F6';
const S_RED = '#E5564E';

function SettingsPage({ onBack, mirrorOn, setMirrorOn }) {
  const [t, setT] = React.useState({
    contact: false, watermark: true, sfx: true, lowdata: false,
    dblLike: true, syncLike: true, nightSys: true,
    recPeople: true, shake: false,
  });
  const set = (k) => setT(prev => ({ ...prev, [k]: !prev[k] }));

  return (
    <div style={{
      position: 'absolute', inset: 0, background: S_BG, color: S_TEXT,
      display: 'flex', flexDirection: 'column',
      fontFamily: '-apple-system, "PingFang SC", "Helvetica Neue", sans-serif',
    }}>
      {/* Status bar gutter */}
      <div style={{ height: 38, flexShrink: 0 }}/>

      {/* Top bar */}
      <div style={{
        height: 36, flexShrink: 0, display: 'flex', alignItems: 'center',
        padding: '0 12px', position: 'relative',
      }}>
        <div onClick={onBack} style={{ cursor: 'pointer', fontSize: 16, lineHeight: 1, width: 24 }}>‹</div>
        <div style={{
          position: 'absolute', left: 0, right: 0, textAlign: 'center',
          fontSize: 12, fontWeight: 600, pointerEvents: 'none',
        }}>设置</div>
      </div>

      {/* Scrollable list */}
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 36 }}>
        <SectionGap/>

        <Group>
          <ToggleRow label="查看通讯录好友" sub="开启后，他人也可从通讯录中发现我的知乎账号"
            on={t.contact} onToggle={() => set('contact')}/>
          <ToggleRow label="水印图片" sub="上传的图片在查看原图、保存和分享时，显示水印"
            on={t.watermark} onToggle={() => set('watermark')}/>
          <ToggleRow label="内置音效" sub="应用内按钮点击音效"
            on={t.sfx} onToggle={() => set('sfx')}/>
          <ToggleRow label="无图模式" sub="使用非 Wi-Fi 网络时不下载图片"
            on={t.lowdata} onToggle={() => set('lowdata')}/>
          <ToggleRow label="双击赞同"
            on={t.dblLike} onToggle={() => set('dblLike')}/>
          <ToggleRow label="点赞同后默认同步至动态" sub="开启后，你的赞同将默认同步至动态"
            on={t.syncLike} onToggle={() => set('syncLike')}/>
        </Group>

        <SectionGap/>

        <Group>
          <NavRow label="回答文章页视图切换" trailing="卡片视图"/>
          <ToggleRow label="夜间模式跟随系统设置" sub="夜间模式跟随系统设置的模式保持一致"
            on={t.nightSys} onToggle={() => set('nightSys')}/>
          {/* NEW: 镜像问答 — placed above 开启未成年人模式 */}
          <ToggleRow label="镜像问答"
            sub="开启后，可向他人发出镜像回答邀请"
            on={mirrorOn} onToggle={() => setMirrorOn(!mirrorOn)}/>
          <NavRow label="开启未成年人模式"/>
          <NavRow label="字体大小" sub="针对推荐页等列表的字体调节"/>
          <NavRow label="视频播放设置"/>
        </Group>

        <SectionGap/>

        <Group>
          <NavRow label="消息设置"/>
          <NavRow label="推送通知设置"/>
          <NavRow label="卡片贴纸设置" badge="盐选会员专享"/>
          <NavRow label="内容兴趣偏好"/>
          <ToggleRow label="推荐可能认识的人"
            on={t.recPeople} onToggle={() => set('recPeople')}/>
        </Group>

        <SectionGap/>

        <Group>
          <NavRow label="账号与安全"/>
          <NavRow label="账号注销"/>
        </Group>

        <SectionGap/>

        <Group>
          <NavRow label="隐私"/>
          <NavRow label="已收集个人信息清单"/>
          <NavRow label="与第三方共享个人信息清单"/>
        </Group>

        <SectionGap/>

        <Group>
          <ToggleRow label="摇一摇，截屏反馈 Bug"
            on={t.shake} onToggle={() => set('shake')}/>
          <NavRow label="存储空间管理" trailing="1.51 GB"/>
          <NavRow label="用户体验调研"/>
          <NavRow label="关于知乎"/>
        </Group>

        <SectionGap/>

        <div style={{
          background: S_CARD, padding: '12px 0', textAlign: 'center',
          color: S_RED, fontSize: 11, cursor: 'pointer',
        }}>退出我的账号</div>

        <div style={{
          textAlign: 'center', color: S_MUTED, fontSize: 8,
          padding: '14px 0 8px',
        }}>知乎 iOS Version 10.95.0 (29510)</div>
      </div>
    </div>
  );
}

function Group({ children }) {
  // Each child is rendered with a divider after, except the last.
  const items = React.Children.toArray(children);
  return (
    <div style={{ background: S_CARD }}>
      {items.map((c, i) => (
        <React.Fragment key={i}>
          {c}
          {i < items.length - 1 && (
            <div style={{ height: 1, background: S_DIVIDER, marginLeft: 14 }}/>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function SectionGap() {
  return <div style={{ height: 10, background: S_BG }}/>;
}

function ToggleRow({ label, sub, on, onToggle }) {
  return (
    <div style={{
      padding: '9px 14px', display: 'flex', alignItems: 'center',
      gap: 10, minHeight: 40,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, color: S_TEXT, lineHeight: 1.2 }}>{label}</div>
        {sub && (
          <div style={{ fontSize: 8.5, color: S_MUTED, marginTop: 3, lineHeight: 1.3 }}>{sub}</div>
        )}
      </div>
      <Toggle on={on} onClick={onToggle}/>
    </div>
  );
}

function NavRow({ label, sub, trailing, badge }) {
  return (
    <div style={{
      padding: '9px 14px', display: 'flex', alignItems: 'center',
      gap: 10, minHeight: 40, cursor: 'pointer',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 11, color: S_TEXT, lineHeight: 1.2,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {label}
          {badge && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 3,
              color: '#D8B070', fontSize: 8.5,
            }}>
              <svg width="9" height="9" viewBox="0 0 12 12">
                <circle cx="6" cy="6" r="5.5" fill="none" stroke="#D8B070" strokeWidth="1"/>
                <path d="M3.5 6 L5.2 7.6 L8.5 4.3" stroke="#D8B070" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              {badge}
            </span>
          )}
        </div>
        {sub && (
          <div style={{ fontSize: 8.5, color: S_MUTED, marginTop: 3, lineHeight: 1.3 }}>{sub}</div>
        )}
      </div>
      {trailing && (
        <div style={{ fontSize: 9.5, color: S_MUTED }}>{trailing}</div>
      )}
      <div style={{ color: S_MUTED, fontSize: 12 }}>›</div>
    </div>
  );
}

function Toggle({ on, onClick }) {
  return (
    <div onClick={onClick} style={{
      width: 32, height: 18, borderRadius: 9,
      background: on ? S_BLUE : '#2A2D33',
      position: 'relative', flexShrink: 0, cursor: 'pointer',
      transition: 'background 0.18s',
    }}>
      <div style={{
        position: 'absolute', top: 2, left: on ? 16 : 2,
        width: 14, height: 14, borderRadius: 7,
        background: '#fff', transition: 'left 0.18s',
        boxShadow: '0 1px 2px rgba(0,0,0,0.3)',
      }}/>
    </div>
  );
}

Object.assign(window, { SettingsPage });