// pages/auth.jsx — 登入 · 註冊: landing (SSO) → lazy register (nickname only) → 直接進入 App。
const { useState: uS2 } = React;

function AuthHead({ onBack, title, sub }) {
  return A('div', { style: { flexShrink: 0, padding: '4px 4px 8px' } },
    A('button', { className: 'ccaTap', onClick: onBack, style: { width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'var(--surface)', boxShadow: 'inset 0 0 0 1px var(--line2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)', marginBottom: 14 } }, A(Icon, { name: 'chevL', size: 20 })),
    A('h1', { style: { fontSize: 24, fontWeight: 800, letterSpacing: -0.5, margin: 0 } }, title),
    sub && A('p', { style: { fontSize: 13, color: 'var(--ink3)', lineHeight: 1.6, margin: '8px 0 0' } }, sub));
}

function Field({ label, value, onChange, placeholder, type = 'text', prefix, hint, right, inputMode, req }) {
  return A('div', { style: { marginBottom: 14 } },
    label && A('div', { style: { fontSize: 12.5, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, label, req && A('span', { style: { color: 'var(--err)' } }, ' *'), hint && A('span', { style: { color: 'var(--ink3)', fontWeight: 600 } }, '・' + hint)),
    A('div', { style: { display: 'flex', alignItems: 'center', gap: 8, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--rmd)', padding: '0 14px' } },
      prefix && A('span', { style: { fontSize: 14.5, color: 'var(--ink2)', fontWeight: 700, paddingRight: 8, borderRight: '1px solid var(--line2)' } }, prefix),
      A('input', { value, onChange: e => onChange && onChange(e.target.value), placeholder, type, inputMode, style: { flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 15, fontFamily: 'inherit', color: 'var(--ink)', padding: '14px 0', minWidth: 0 } }),
      right));
}

function AuthFlow({ start = 'landing', go = () => {} }) {
  const [step, setStep] = uS2(start);
  const [nick, setNick] = uS2('');

  const wrap = (children, pad = '0 24px') => A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, padding: pad, background: 'var(--bg)' } }, children);

  const sso = (provider, dark, glyph) => A('button', { className: 'ccaTap', onClick: () => setStep('register'), style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '15px', borderRadius: 'var(--rpill)', border: dark ? 'none' : '1.5px solid var(--line)', background: dark ? 'var(--ink)' : 'var(--surface)', color: dark ? '#fff' : 'var(--ink)', fontFamily: 'inherit', fontSize: 15, fontWeight: 700 } }, glyph, `透過 ${provider} 繼續`);

  if (step === 'landing') {
    return wrap(A(React.Fragment, null,
      A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' } },
        A('div', { style: { position: 'relative', width: 104, height: 104, marginBottom: 20 } },
          A('div', { style: { position: 'absolute', inset: -10, borderRadius: '50%', background: 'radial-gradient(circle,var(--brandSoft),transparent 70%)' } }),
          A(Avatar, { size: 104, kind: 'ai', style: { position: 'relative' } })),
        A('h1', { className: 'num', style: { fontSize: 32, fontWeight: 900, letterSpacing: -1, margin: '0 0 6px' } }, 'Cute & A'),
        A('div', { style: { fontSize: 16, fontWeight: 700 } }, '寵答'),
        A('p', { style: { fontSize: 13.5, color: 'var(--ink3)', lineHeight: 1.6, margin: '10px 0 0', maxWidth: 240 } }, '用一句話，搞定貓咪的問、找、約、記錄')),
      A('div', { style: { paddingBottom: 24, display: 'flex', flexDirection: 'column', gap: 11 } },
        sso('Apple', true, A('svg', { width: 17, height: 17, viewBox: '0 0 24 24', fill: '#fff' }, A('path', { d: 'M16.3 12.7c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.5-.1-2.8.8-3.5.8s-1.9-.8-3.1-.8c-1.6 0-3 .9-3.8 2.4-1.6 2.8-.4 7 1.2 9.3.8 1.1 1.7 2.4 2.9 2.3 1.2-.04 1.6-.7 3-.7s1.8.7 3 .7 2-1.1 2.8-2.2c.9-1.3 1.2-2.5 1.3-2.6-.03-.01-2.5-1-2.5-3.8zM14.1 5.4c.6-.8 1.1-1.9 1-3-.9.04-2.1.6-2.8 1.4-.6.7-1.2 1.8-1 2.9 1 .07 2.1-.5 2.8-1.3z' }))),
        sso('Google', false, A('svg', { width: 17, height: 17, viewBox: '0 0 24 24' }, A('path', { fill: '#4285F4', d: 'M23 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.2a5.3 5.3 0 01-2.3 3.5v2.9h3.7c2.2-2 3.4-5 3.4-8.6z' }), A('path', { fill: '#34A853', d: 'M12 24c3.1 0 5.7-1 7.6-2.8l-3.7-2.9c-1 .7-2.3 1.1-3.9 1.1-3 0-5.5-2-6.4-4.7H1.8v3C3.7 21.4 7.6 24 12 24z' }), A('path', { fill: '#FBBC05', d: 'M5.6 14.7a7.2 7.2 0 010-4.6v-3H1.8a12 12 0 000 10.6l3.8-3z' }), A('path', { fill: '#EA4335', d: 'M12 4.8c1.7 0 3.2.6 4.4 1.7l3.3-3.3C17.7 1.2 15.1 0 12 0 7.6 0 3.7 2.6 1.8 6.4l3.8 3C6.5 6.8 9 4.8 12 4.8z' }))),
        A('p', { style: { fontSize: 11, color: 'var(--ink3)', textAlign: 'center', lineHeight: 1.6, margin: '8px 0 0' } }, '繼續即表示同意服務條款與隱私政策')),
      A(HomeBar, {})));
  }

  // register — 完成後直接進入 App（不再經過獨立的「歡迎」頁）
  return wrap(A(React.Fragment, null,
    A(AuthHead, { onBack: () => setStep('landing'), title: '歡迎加入寵答 🐱', sub: '先取個暱稱就能開始，其他資料之後用得到時再補。' }),
    A('div', { style: { flex: 1, paddingTop: 22 } },
      A('div', { style: { display: 'flex', justifyContent: 'center', marginBottom: 22 } },
        A('div', { style: { position: 'relative' } },
          A(Ph, { w: 84, h: 84, r: 42, icon: 'user' }),
          A('div', { style: { position: 'absolute', bottom: -2, right: -2, width: 30, height: 30, borderRadius: 15, background: 'var(--brand)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2.5px solid var(--bg)' } }, A(Icon, { name: 'camera', size: 16, color: '#fff' })))),
      A(Field, { label: '暱稱', req: true, value: nick, onChange: setNick, placeholder: '想讓保姆怎麼稱呼你？' }),
      A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', textAlign: 'center', marginTop: 4 } }, '頭像、Email 都可以「之後再補」')),
    A('div', { style: { paddingBottom: 24, display: 'flex', flexDirection: 'column', gap: 10 } },
      A(Btn, { full: true, disabled: !nick.trim(), onClick: () => go('home'), style: { padding: '15px' } }, '完成，開始使用'),
      A('button', { className: 'ccaTap', onClick: () => go('home'), style: { border: 'none', background: 'transparent', color: 'var(--ink3)', fontFamily: 'inherit', fontSize: 13, fontWeight: 700, padding: 4 } }, '之後再補，先看看')),
    A(HomeBar, {})));
}

const LoginScreen = (props) => A(AuthFlow, { start: 'landing', ...props });

Object.assign(window, { AuthHead, Field, AuthFlow, LoginScreen });