/* screens-onboarding.jsx — App 首次启动引导页（占位）
 * 对齐 iOS 端 FunctionModule/Launching/GuidePageVC：
 *   - 4 页横向滑动，左上角「跳过」、底部页码指示器、底部胶囊「下一步 / 登录并开始」
 *   - 第 1 页隐藏左上角返回；第 2–4 页显示返回
 *   - 完成（点最后一页的「登录并开始」或任意页「跳过」）→ 进入 AuthWelcome
 * 这里只做占位卡片：每页一个大色块 + 标题 + 一句话说明，后续替换为真实插画即可。
 */
/* global React, Screen, Ic */

const ONB_PAGES = [
  {
    bg: 'linear-gradient(160deg,#F3EFFD 0%, #E7DFFB 60%, #D9CCFA 100%)',
    accent: '#8E6BF2',
    badge: '随身 AI 调度台',
    title: '把电脑里的小浣熊\n装进口袋',
    desc: '一句话发起对话，让 AI 在云端或你的电脑上替你完成任务。',
  },
  {
    bg: 'linear-gradient(160deg,#EAF6F1 0%, #CFEBDD 60%, #B2DFCA 100%)',
    accent: '#3FAE83',
    badge: '语音优先',
    title: '长按说话\n比打字更快',
    desc: '默认语音输入，松开即发送；不方便说话时再切换成文字。',
  },
  {
    bg: 'linear-gradient(160deg,#FFF4E5 0%, #FFE3BC 60%, #FFD08D 100%)',
    accent: '#E08A2B',
    badge: '关联电脑',
    title: '手机发指令\n电脑替你跑',
    desc: '扫码关联桌面端，离开工位也能让那台电脑继续干活。',
  },
  {
    bg: 'linear-gradient(160deg,#FEEFEF 0%, #FBD3D3 60%, #F5B0B0 100%)',
    accent: '#D9534F',
    badge: '随时找到你',
    title: '后台任务完成\n第一时间通知',
    desc: '锁屏横幅 + 倒计时提示，跑完直接点进对话现场。',
  },
];

function OnbCard({ page }) {
  return (
    <div style={{
      flex: 1, margin: '12px 20px 0', borderRadius: 24,
      background: page.bg, padding: '28px 24px 32px',
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 4px 24px rgba(10,10,6,0.04)',
      position: 'relative', overflow: 'hidden',
    }}>
      <span style={{
        alignSelf: 'flex-start',
        fontSize: 12, fontWeight: 600, color: page.accent,
        background: '#fff', borderRadius: 999, padding: '5px 12px',
        letterSpacing: '0.3px',
      }}>{page.badge}</span>

      {/* 插画占位 */}
      <div style={{
        flex: 1, margin: '24px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          width: 168, height: 168, borderRadius: '50%',
          background: 'rgba(255,255,255,0.55)',
          border: '1px dashed rgba(10,10,6,0.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 12, color: 'rgba(10,10,6,0.45)', fontWeight: 500,
          letterSpacing: '0.4px',
        }}>插画占位</div>
      </div>

      <h1 style={{
        margin: 0, fontSize: 26, lineHeight: 1.3, fontWeight: 700,
        color: '#0A0A06', whiteSpace: 'pre-line', letterSpacing: '-0.3px',
      }}>{page.title}</h1>
      <p style={{
        margin: '12px 0 0', fontSize: 14, lineHeight: 1.65,
        color: '#57574A',
      }}>{page.desc}</p>
    </div>
  );
}

function OnbDots({ active }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      gap: 6, padding: '16px 0 12px',
    }}>
      {ONB_PAGES.map((_, i) => (
        <span key={i} style={{
          width: i === active ? 24 : 8, height: 8, borderRadius: 4,
          background: i === active ? '#8E6BF2' : '#DDDDDD',
          transition: 'width .2s',
        }} />
      ))}
    </div>
  );
}

function OnbScreen({ index }) {
  const page = ONB_PAGES[index];
  const isLast = index === ONB_PAGES.length - 1;
  const isFirst = index === 0;
  return (
    <Screen>
      {/* 顶栏：返回（仅 2+ 页） + 跳过 */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '6px 12px 0', height: 44,
      }}>
        {isFirst ? <div style={{ width: 36 }} /> : (
          <button className="iconbtn" aria-label="上一页"><Ic.back size={22} /></button>
        )}
        <button style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          fontSize: 14, fontWeight: 500, color: '#57574A',
          padding: '6px 10px',
        }}>跳过</button>
      </div>

      <OnbCard page={page} />
      <OnbDots active={index} />

      <div style={{ padding: '4px 20px 16px' }}>
        <button style={{
          width: '100%', height: 52, borderRadius: 999, border: 'none',
          background: 'var(--purple)', color: '#fff',
          fontSize: 17, fontWeight: 600, letterSpacing: 0.3, cursor: 'pointer',
        }}>{isLast ? '登录并开始' : '下一步'}</button>
      </div>
    </Screen>
  );
}

function OnboardingPage1() { return <OnbScreen index={0} />; }
function OnboardingPage2() { return <OnbScreen index={1} />; }
function OnboardingPage3() { return <OnbScreen index={2} />; }
function OnboardingPage4() { return <OnbScreen index={3} />; }

Object.assign(window, {
  OnboardingPage1, OnboardingPage2, OnboardingPage3, OnboardingPage4,
});