// Healify V2 — Onboarding + Auth

function AuthSplashScreen({ onNavigate }) {
  return (
    <div data-screen-label="Auth Splash" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #FFF6EE 0%, #FFE3CD 35%, #FFC9A8 100%)', display: 'flex', flexDirection: 'column' }}>
      {/* Decorative orange glow */}
      <div style={{ position: 'absolute', top: '15%', left: '50%', transform: 'translateX(-50%)', width: 320, height: 320, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,105,66,0.32) 0%, transparent 70%)', pointerEvents: 'none' }}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px', position: 'relative' }}>
        <HealifyHeart size={104} radius={0.22}/>
        <div style={{ height: 28 }}/>
        <HealifyWordmark size={32} color="#03040D"/>
        <div style={{ height: 24 }}/>
        <div className="h-display" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.025em', textAlign: 'center', lineHeight: 1.18, color: '#03040D' }}>
          Your AI health coach,<br/>
          <span style={{ background: 'var(--grad-warm-orange)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>built around you.</span>
        </div>
        <div style={{ fontSize: 14, color: 'rgba(3,4,13,0.6)', marginTop: 14, textAlign: 'center', lineHeight: 1.5, maxWidth: 320 }}>
          Anna reads your wearables, bloodwork and check-ins — then turns them into a plan.
        </div>
      </div>
      <div style={{ padding: '0 16px 40px', position: 'relative' }}>
        <HPrimaryButton variant="gradient" full size="lg" onClick={() => onNavigate('onboarding')}>Get started</HPrimaryButton>
        <div style={{ marginTop: 12 }}>
          <HPrimaryButton variant="ghost" full size="lg" onClick={() => onNavigate('auth-signin')}>I have an account</HPrimaryButton>
        </div>
        <div style={{ textAlign: 'center', fontSize: 11, color: 'rgba(3,4,13,0.45)', marginTop: 14 }}>By continuing, you agree to Terms &amp; Privacy</div>
      </div>
    </div>);
}

function AuthSignInScreen({ onNavigate, onBack }) {
  return (
    <HScreen label="Sign in">
      <HTopBar title="" onBack={onBack} />
      <div style={{ minHeight: 'calc(100vh - 200px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ padding: '8px 4px 24px', textAlign: 'center' }}>
          <div className="h-display" style={{ fontSize: 30, letterSpacing: '-0.025em' }}>Welcome back</div>
          <div style={{ fontSize: 14, color: 'var(--t-fg-2)', marginTop: 6 }}>Sign in to continue with Anna.</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
          <input placeholder="Email" style={{ padding: '14px 16px', borderRadius: 14, border: 'none', background: 'var(--t-surface)', boxShadow: 'var(--shadow-md)', fontSize: 15, outline: 'none', fontFamily: 'var(--font-body)', color: 'var(--t-fg-1)' }} />
          <input placeholder="Password" type="password" style={{ padding: '14px 16px', borderRadius: 14, border: 'none', background: 'var(--t-surface)', boxShadow: 'var(--shadow-md)', fontSize: 15, outline: 'none', fontFamily: 'var(--font-body)', color: 'var(--t-fg-1)' }} />
        </div>
        <HPrimaryButton variant="gradient" full size="lg" onClick={() => onNavigate('home')}>Sign in</HPrimaryButton>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '20px 0' }}>
          <div style={{ flex: 1, height: 1, background: 'var(--t-border)' }} />
          <span style={{ fontSize: 11, color: 'var(--t-fg-3)', textTransform: 'uppercase', letterSpacing: 1.2 }}>or</span>
          <div style={{ flex: 1, height: 1, background: 'var(--t-border)' }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <HPrimaryButton variant="ghost" full size="md" icon="user">Continue with Apple</HPrimaryButton>
          <HPrimaryButton variant="ghost" full size="md" icon="user">Continue with Google</HPrimaryButton>
        </div>
      </div>
    </HScreen>);

}

function OnboardingScreen({ onNavigate }) {
  const [step, setStep] = React.useState(0);
  const steps = [
  {
    kind: 'welcome',
    content:
    <>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', flex: 1, justifyContent: 'center' }}>
            <HAnnaAvatar size={120} state="speaking" ring={true} />
            <div className="h-display" style={{ fontSize: 32, marginTop: 28, letterSpacing: '-0.025em' }}>Hi. I'm Anna.</div>
            <div style={{ fontSize: 15, color: 'var(--t-fg-2)', marginTop: 12, lineHeight: 1.5, maxWidth: 280 }}>I'll learn from your body — wearables, bloodwork, DNA, and how you feel — to build a plan that's actually yours.</div>
          </div>
        </>

  },
  {
    kind: 'name',
    content: <OnboardingInput label="What should I call you?" placeholder="Kathryn" />
  },
  {
    kind: 'goal',
    content: <OnboardingChoice label="What's pulling you here?" subtitle="Pick one. We can refine later."
    options={['Lower BP & heart health', 'Lose 10–20 lbs', 'Sleep better', 'More energy in the day', 'Manage anxiety', 'Live longer, healthier']} />
  },
  {
    kind: 'connect',
    content: <OnboardingConnect />
  },
  {
    kind: 'done',
    content:
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', flex: 1, justifyContent: 'center' }}>
          <div style={{ width: 120, height: 120, borderRadius: 999, background: 'var(--grad-warm-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-orange)' }}>
            <Glyph name="check" size={56} stroke={2.5} style={{ color: '#fff' }} />
          </div>
          <div className="h-display" style={{ fontSize: 28, marginTop: 24 }}>You're set.</div>
          <div style={{ fontSize: 15, color: 'var(--t-fg-2)', marginTop: 12, lineHeight: 1.5, maxWidth: 280 }}>I'll show you what I see in your data — and what to do today.</div>
        </div>

  }];


  const next = () => step < steps.length - 1 ? setStep(step + 1) : onNavigate('home');
  return (
    <HScreen label="Onboarding" pad="0">
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{ display: 'flex', gap: 4, marginBottom: 12 }}>
          {steps.map((_, i) =>
          <div key={i} style={{ flex: 1, height: 4, borderRadius: 999, background: i <= step ? 'var(--brand-orange-vibey)' : 'var(--t-ink-08)' }} />
          )}
        </div>
        <button onClick={() => step > 0 ? setStep(step - 1) : onNavigate('auth-splash')} style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--t-ink-04)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Glyph name="chevL" size={16} />
        </button>
      </div>

      <div style={{ padding: '24px 20px 100px', minHeight: 480, display: 'flex', flexDirection: 'column' }}>
        {steps[step].content}
      </div>

      <div style={{ position: 'fixed', left: 16, right: 16, bottom: 24, display: 'flex', gap: 10 }}>
        {step > 0 && step < steps.length - 1 && <HPrimaryButton variant="ghost" size="lg" onClick={() => setStep(steps.length - 1)}>Skip</HPrimaryButton>}
        <HPrimaryButton variant="gradient" full size="lg" onClick={next}>{step === steps.length - 1 ? 'Open Healify' : 'Continue'}</HPrimaryButton>
      </div>
    </HScreen>);

}

function OnboardingInput({ label, placeholder }) {
  const [v, setV] = React.useState('');
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
      <div className="h-display" style={{ fontSize: 28, letterSpacing: '-0.025em', marginBottom: 18 }}>{label}</div>
      <input value={v} onChange={(e) => setV(e.target.value)} placeholder={placeholder} style={{ width: '100%', maxWidth: 320, padding: '16px 18px', borderRadius: 16, border: 'none', background: 'var(--t-surface)', boxShadow: 'var(--shadow-md)', fontSize: 17, outline: 'none', fontFamily: 'var(--font-body)', color: 'var(--t-fg-1)', textAlign: 'center' }} />
    </div>);

}

function OnboardingChoice({ label, subtitle, options }) {
  const [v, setV] = React.useState(null);
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div className="h-display" style={{ fontSize: 26, letterSpacing: '-0.025em', textAlign: 'center' }}>{label}</div>
      {subtitle && <div style={{ fontSize: 13, color: 'var(--t-fg-3)', marginTop: 4, textAlign: 'center' }}>{subtitle}</div>}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 18 }}>
        {options.map((o) =>
        <button key={o} onClick={() => setV(o)} style={{
          padding: '16px 16px', borderRadius: 16, textAlign: 'left',
          background: v === o ? 'var(--t-cream)' : 'var(--t-surface)',
          border: v === o ? '2px solid var(--brand-orange-vibey)' : '2px solid transparent',
          boxShadow: 'var(--shadow-md)', color: 'var(--t-fg-1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center'
        }}>
            <span style={{ fontSize: 15, fontWeight: 500 }}>{o}</span>
            {v === o && <div style={{ width: 22, height: 22, borderRadius: 999, background: 'var(--brand-orange-vibey)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Glyph name="check" size={12} stroke={3} /></div>}
          </button>
        )}
      </div>
    </div>);

}

function OnboardingConnect() {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div className="h-display" style={{ fontSize: 26, letterSpacing: '-0.025em', textAlign: 'center' }}>Connect your data</div>
      <div style={{ fontSize: 13, color: 'var(--t-fg-3)', marginTop: 4, textAlign: 'center' }}>The more I see, the better I help. Skip any you like.</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 18 }}>
        {[
        { i: 'heart', t: 'Apple Health', s: 'Steps, heart, sleep, workouts · all wearables (Oura, Whoop, Garmin, Fitbit) sync through here.' },
        { i: 'droplet', t: 'Bloodwork', s: 'Upload a PDF — Anna decodes it.' },
        { i: 'scan', t: '23andMe', s: 'Optional · personalized advice.' }].
        map((o) =>
        <HCard key={o.t} pad="14px" radius={16}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--t-cream)', color: 'var(--brand-orange-vibey)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Glyph name={o.i} size={18} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px' }}>{o.t}</div>
                <div style={{ fontSize: 12, color: 'var(--t-fg-3)', lineHeight: 1.4, marginTop: 1 }}>{o.s}</div>
              </div>
              <HPrimaryButton variant="soft" size="sm">Connect</HPrimaryButton>
            </div>
          </HCard>
        )}
      </div>
    </div>);

}

Object.assign(window, { AuthSplashScreen, AuthSignInScreen, OnboardingScreen });