/* GoWithMe — Onboarding + Auth */
const LOGO = (typeof window !== 'undefined' && window.__resources && window.__resources.logo) || 'app/assets/gowithme-logo.webp';

function LogoTile({ size = 92, radius = 22 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius, background: '#fff', overflow: 'hidden',
      boxShadow: '0 12px 30px rgba(0,0,0,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <img src={LOGO} alt="GoWithMe" style={{ width: '94%', height: '94%', objectFit: 'contain' }} />
    </div>
  );
}

/* tri-colour GoWithMe wordmark — mirrors the logo lettering */
function Wordmark({ size = 26, light = false, style }) {
  const c = light
    ? { go: '#ffffff', wi: '#5fd39a', me: '#e8c25c' }
    : { go: T.ink, wi: T.teal, me: T.gold };
  return (
    <span style={{ fontFamily: BRAND, fontWeight: 700, fontSize: size, letterSpacing: -0.4, whiteSpace: 'nowrap', ...style }}>
      <span style={{ color: c.go }}>Go</span><span style={{ color: c.wi }}>With</span><span style={{ color: c.me }}>Me</span>
    </span>
  );
}

function Onboarding({ lang, setLang, onStart }) {
  const [slide, setSlide] = React.useState(0);
  const slides = [
    { kw: ['Discover Cambodia', 'Like Never Before'], sub: 'Your AI travel companion — multilingual guides, real-time scam protection, and immersive audio stories.' },
    { kw: ['Every Temple,', 'A Living Story'], sub: 'Stand before Angkor Wat and let our AI narrate its history in your language — like a private guide in your pocket.' },
    { kw: ['Explore Safely,', 'Wander Freely'], sub: 'Scam Shield watches QR codes, messages and sellers in real time, so you can focus on the adventure.' },
  ];
  const s = slides[slide];
  const next = () => slide < 2 ? setSlide(slide + 1) : onStart();
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column',
      background: 'linear-gradient(170deg,#0b1d33 0%,#123a4b 52%,#1d6e62 100%)' }}>
      <StatusBar light />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '8px 30px 0', position: 'relative', overflowY: 'auto' }}>
        {/* faint rings */}
        <div style={{ position: 'absolute', top: -120, right: -120, width: 340, height: 340, borderRadius: 999, border: '1px solid rgba(255,255,255,0.06)' }} />
        <div style={{ position: 'absolute', top: 40, left: -160, width: 320, height: 320, borderRadius: 999, border: '1px solid rgba(255,255,255,0.05)' }} />

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 18, flexShrink: 0 }}>
          <LogoTile size={84} />
          <Wordmark size={36} light style={{ marginTop: 16 }} />
          <div style={{ fontFamily: SANS, fontSize: 12.5, fontWeight: 500, color: 'rgba(255,255,255,0.62)', marginTop: 9, letterSpacing: 0.2 }}>in collaboration with <span style={{ color: 'rgba(255,255,255,0.9)', fontWeight: 700 }}>Dojology Group</span></div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginTop: 16, maxWidth: 320 }}>
            {HM.LANGS.slice(0, 5).map(l => (
              <button key={l.code} onClick={() => setLang(l.code)} style={{
                display: 'flex', alignItems: 'center', gap: 7, padding: '8px 14px', borderRadius: 999, cursor: 'pointer',
                border: `1px solid ${lang === l.code ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.25)'}`,
                background: lang === l.code ? 'rgba(255,255,255,0.16)' : 'rgba(255,255,255,0.06)',
                color: '#fff', fontFamily: SANS, fontWeight: 600, fontSize: 14,
              }}><span style={{ fontSize: 16 }}>{l.flag}</span>{l.label}</button>
            ))}
          </div>
        </div>

        {/* dots */}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 22, flexShrink: 0 }}>
          {[0, 1, 2].map(i => (
            <div key={i} onClick={() => setSlide(i)} style={{
              width: i === slide ? 26 : 9, height: 9, borderRadius: 999, cursor: 'pointer',
              background: i === slide ? T.gold : 'rgba(255,255,255,0.3)', transition: 'all .25s',
            }} />
          ))}
        </div>

        <div style={{ flex: 1, minHeight: 24 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, flexShrink: 0, paddingBottom: 24 }}>
          <h1 style={{ fontFamily: DISP, fontWeight: 800, fontSize: 35, lineHeight: 1.16, color: '#fff', margin: 0 }}>
            {s.kw.map((line, i) => <div key={i} style={{ whiteSpace: 'nowrap' }}>{line}</div>)}
          </h1>
          <p style={{ fontFamily: SANS, fontSize: 16, lineHeight: 1.55, color: 'rgba(255,255,255,0.82)', margin: 0, textWrap: 'pretty' }}>{s.sub}</p>
          <button onClick={next} style={{
            width: '100%', padding: '17px', borderRadius: 16, cursor: 'pointer', border: 'none',
            background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(8px)',
            border: '1.5px solid rgba(255,255,255,0.5)', color: '#fff',
            fontFamily: SANS, fontWeight: 700, fontSize: 16.5, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          }}>{slide < 2 ? 'Next' : 'Get Started'}<Icon name="arrow-right" size={19} color="#fff" /></button>
          <button onClick={onStart} style={{
            width: '100%', padding: '15px', borderRadius: 16, cursor: 'pointer',
            background: 'transparent', border: '1.5px solid rgba(255,255,255,0.18)', color: 'rgba(255,255,255,0.85)',
            fontFamily: SANS, fontWeight: 600, fontSize: 15.5,
          }}>I'll set up later</button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, type = 'text', placeholder, icon, value, onChange, trailing }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: 'block', fontFamily: SANS, fontWeight: 700, fontSize: 14.5, color: T.ink, marginBottom: 8 }}>{label}</label>
      <div style={{ display: 'flex', alignItems: 'center', background: T.white, border: `1px solid ${T.line}`, borderRadius: 14, padding: '0 16px', height: 56 }}>
        {icon && <Icon name={icon} size={19} color={T.muted} style={{ marginRight: 10, flexShrink: 0 }} />}
        <input type={type} placeholder={placeholder} value={value} onChange={onChange} style={{
          flex: 1, border: 'none', outline: 'none', background: 'none', fontFamily: SANS, fontSize: 16, color: T.ink, minWidth: 0,
        }} />
        {trailing}
      </div>
    </div>
  );
}

function SocialBtn({ icon, label }) {
  return (
    <button style={{
      flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, height: 54,
      borderRadius: 14, border: `1px solid ${T.line}`, background: T.white, cursor: 'pointer',
      fontFamily: SANS, fontWeight: 600, fontSize: 15.5, color: T.ink,
    }}>{icon}{label}</button>
  );
}
const GoogleG = () => (<svg width="20" height="20" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.5 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.9a5 5 0 0 1-2.2 3.3v2.7h3.5c2-1.9 3.3-4.7 3.3-7.9z"/><path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.5-2.7c-1 .7-2.3 1.1-3.8 1.1-2.9 0-5.4-2-6.3-4.6H2v2.8A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.7 14.1a6.6 6.6 0 0 1 0-4.2V7.1H2a11 11 0 0 0 0 9.8z"/><path fill="#EA4335" d="M12 5.4c1.6 0 3 .6 4.2 1.6l3.1-3.1A11 11 0 0 0 2 7.1l3.7 2.8C6.6 7.3 9.1 5.4 12 5.4z"/></svg>);
const AppleA = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill={T.ink}><path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.8 1.1 9 .7 1.1 1.6 2.3 2.7 2.3 1.1 0 1.5-.7 2.8-.7s1.6.7 2.8.7c1.1 0 1.9-1.1 2.6-2.2.8-1.2 1.2-2.4 1.2-2.5-.1 0-2.3-.9-2.3-3.4zM14.3 5.8c.6-.7 1-1.7.9-2.8-.9 0-2 .6-2.6 1.3-.6.6-1.1 1.7-1 2.7 1 .1 2-.5 2.7-1.2z"/></svg>);

function Auth({ lang, setLang, onAuth }) {
  const [mode, setMode] = React.useState('login'); // login | register | forgot
  const [show, setShow] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const head = {
    login: ['Welcome back', 'Sign in to continue your journey'],
    register: ['Create account', 'Join GoWithMe and travel smarter'],
    forgot: ['Reset password', "We'll email you a secure reset link"],
  }[mode];

  return (
    <Screen light={false} bg={T.cream}>
      <div style={{ padding: '14px 26px 30px', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 26 }}>
          {mode !== 'login' ? (
            <button onClick={() => { setMode('login'); setSent(false); }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
              <Icon name="arrow-left" size={24} color={T.ink} />
            </button>
          ) : <LogoTile size={52} radius={14} />}
          <Wordmark size={26} />
        </div>

        <h1 style={{ fontFamily: DISP, fontWeight: 800, fontSize: 38, color: T.ink, margin: 0, lineHeight: 1.05 }}>{head[0]}</h1>
        <p style={{ fontFamily: SANS, fontSize: 16, color: T.body, marginTop: 8, marginBottom: 28 }}>{head[1]}</p>

        {mode === 'register' && <Field label="Full name" placeholder="Zhang Liming" icon="user" />}
        <Field label="Email" type="email" placeholder="yourname@email.com" icon="mail" />

        {mode !== 'forgot' && (
          <Field label="Password" type={show ? 'text' : 'password'} placeholder="••••••••" icon="lock"
            trailing={<button onClick={() => setShow(!show)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}>
              <Icon name={show ? 'eye' : 'eye-off'} size={19} color={T.muted} /></button>} />
        )}

        {mode === 'login' && (
          <div style={{ textAlign: 'right', marginTop: -4, marginBottom: 16 }}>
            <button onClick={() => setMode('forgot')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: SANS, fontWeight: 700, fontSize: 14.5, color: T.teal }}>Forgot password?</button>
          </div>
        )}

        {mode === 'forgot' && sent && (
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', background: T.tealBg, border: `1px solid ${T.teal}33`, borderRadius: 14, padding: 14, marginBottom: 18 }}>
            <Icon name="check" size={18} color={T.teal} />
            <span style={{ fontFamily: SANS, fontSize: 14, color: T.tealDk, lineHeight: 1.45 }}>Reset link sent. Check your inbox — it expires in 30 minutes.</span>
          </div>
        )}

        <div style={{ marginTop: 6 }}>
          <PrimaryBtn onClick={() => mode === 'forgot' ? setSent(true) : onAuth()}>
            {mode === 'login' ? 'Sign in' : mode === 'register' ? 'Create account' : 'Send reset link'}
          </PrimaryBtn>
        </div>

        {mode !== 'forgot' && <>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '24px 0' }}>
            <div style={{ flex: 1, height: 1, background: T.line }} />
            <span style={{ fontFamily: SANS, fontSize: 14, color: T.muted }}>or continue with</span>
            <div style={{ flex: 1, height: 1, background: T.line }} />
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <SocialBtn icon={<GoogleG />} label="Google" />
            <SocialBtn icon={<AppleA />} label="Apple" />
          </div>
        </>}

        <div style={{ textAlign: 'center', marginTop: 26, fontFamily: SANS, fontSize: 15, color: T.body }}>
          {mode === 'register' ? 'Already have an account? ' : "Don't have an account? "}
          <button onClick={() => setMode(mode === 'register' ? 'login' : 'register')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: SANS, fontWeight: 700, fontSize: 15, color: T.teal }}>
            {mode === 'register' ? 'Sign in' : 'Register free'}
          </button>
        </div>

        {mode !== 'forgot' && (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 'auto', paddingTop: 30 }}>
            <span style={{ fontFamily: SANS, fontSize: 13, color: T.muted, letterSpacing: 0.2 }}>Backed by</span>
            <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 13, color: T.body, letterSpacing: 0.2 }}>Dojology</span>
          </div>
        )}
      </div>
    </Screen>
  );
}

Object.assign(window, { LOGO, LogoTile, Wordmark, Onboarding, Auth, Field });