/* Peptino — screens D: Onboarding (Welcome→Goals→Profile→Disclaimer→
   Notifications→Account) + Login (email + code) */

/* ---- Mini theme preview (explicit palette so both render on any shell) ---- */
function MiniThemePreview({ p }) {
  const r = 14, c = 2 * Math.PI * r, off = c * 0.25;
  return (
    <div style={{ width: 128, height: 188, borderRadius: 20, background: p.bg, border: '1px solid ' + p.border, overflow: 'hidden', padding: 11, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 13, color: p.text }}>Today</span>
        <span style={{ width: 14, height: 14, borderRadius: 999, background: p.accent }} />
      </div>
      {/* hero card */}
      <div style={{ background: p.surface, border: '1px solid ' + p.border, borderRadius: 12, padding: 9, display: 'flex', alignItems: 'center', gap: 9 }}>
        <svg width="38" height="38" viewBox="0 0 38 38" style={{ flex: '0 0 38px' }}>
          <circle cx="19" cy="19" r={r} fill="none" stroke={p.sunken} strokeWidth="5" />
          <circle cx="19" cy="19" r={r} fill="none" stroke={p.accent} strokeWidth="5" strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 19 19)" />
        </svg>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5, flex: 1 }}>
          <span style={{ height: 6, width: '70%', borderRadius: 3, background: p.text, opacity: .85 }} />
          <span style={{ height: 5, width: '90%', borderRadius: 3, background: p.sunken }} />
          <span style={{ height: 5, width: '55%', borderRadius: 3, background: p.sunken }} />
        </div>
      </div>
      {/* rows */}
      {[0, 1].map((i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 22, height: 22, borderRadius: 7, background: p.accentSoft, flex: '0 0 22px' }} />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span style={{ height: 5, width: i ? '50%' : '64%', borderRadius: 3, background: p.text, opacity: .7 }} />
            <span style={{ height: 4, width: '40%', borderRadius: 3, background: p.sunken }} />
          </div>
          <span style={{ width: 18, height: 8, borderRadius: 4, background: p.accentSoft }} />
        </div>
      ))}
      <div style={{ flex: 1 }} />
      {/* tab bar */}
      <div style={{ height: 30, borderRadius: 12, background: p.surface, border: '1px solid ' + p.border, display: 'flex', alignItems: 'center', justifyContent: 'space-around', padding: '0 8px' }}>
        <span style={{ width: 16, height: 16, borderRadius: 6, background: p.accentSoft }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: p.sunken }} />
        <span style={{ width: 20, height: 20, borderRadius: 999, background: p.accent }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: p.sunken }} />
      </div>
    </div>
  );
}
const PAL_LIGHT = { bg: '#FAFBFC', surface: '#FFFFFF', sunken: '#EDF0F4', border: '#E7EAEF', text: '#14161B', accent: '#C4F23D', accentSoft: '#ECF7CF' };
const PAL_DARK = { bg: '#0A0A0B', surface: '#15161A', sunken: '#23261C', border: '#272930', text: '#F4F6F7', accent: '#C4F23D', accentSoft: 'rgba(196,242,61,.18)' };

function ThemeCard({ pal, label, sub, on }) {
  return (
    <div style={{
      flex: 1, borderRadius: 22, padding: 14, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
      background: 'var(--surface)', border: '2px solid ' + (on ? 'var(--accent)' : 'var(--border)'),
      boxShadow: on ? '0 0 0 3px var(--accent-soft)' : 'var(--shadow-card)',
    }}>
      <MiniThemePreview p={pal} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', justifyContent: 'center' }}>
        <div style={{ width: 20, height: 20, borderRadius: 999, flex: '0 0 20px', border: '2px solid ' + (on ? 'var(--accent)' : 'var(--border-strong)'), background: on ? 'var(--accent)' : 'transparent', color: 'var(--accent-fg)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {on ? <Icon name="check" size={12} sw={3} /> : null}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
          <span className="t-strong c-1" style={{ lineHeight: '16px' }}>{label}</span>
          <span className="t-caption c-3">{sub}</span>
        </div>
      </div>
    </div>
  );
}

/* ---- 1b. Theme / Appearance ---- */
function ScreenOnbTheme({ theme }) {
  return (
    <OnbShell theme={theme} current={1}
      footer={<button className="btn btn-primary">Continue</button>}>
      <span className="t-title c-1" style={{ marginTop: 8 }}>Choose your look</span>
      <span className="t-body c-2" style={{ marginTop: 8, marginBottom: 26 }}>You can switch anytime in Settings.</span>
      <div style={{ display: 'flex', gap: 14, alignSelf: 'stretch' }}>
        <ThemeCard pal={PAL_DARK} label="Dark" sub="Default" on={theme === 'dark'} />
        <ThemeCard pal={PAL_LIGHT} label="Light" sub="Bright" on={theme !== 'dark'} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 22, padding: '10px 14px', borderRadius: 999, background: 'var(--surface-2)' }}>
        <Icon name="moon" size={16} color="var(--accent-ink)" />
        <span className="t-caption c-2">Match system appearance automatically</span>
        <Switch on={false} />
      </div>
    </OnbShell>
  );
}

function StepDots({ n = 7, current = 0 }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '6px 0 22px' }}>
      {Array.from({ length: n }).map((_, i) => (
        <div key={i} style={{
          width: i === current ? 22 : 8, height: 8, borderRadius: 4,
          background: i === current ? 'var(--accent)' : 'var(--border-strong)', transition: 'all .2s',
        }} />
      ))}
    </div>
  );
}
function OnbShell({ theme, current, children, footer }) {
  return (
    <div className="pt phone" data-theme={theme}>
      <StatusBar time="9:41" />
      <div className="screen">
        <div className="scroll" style={{ padding: '4px 24px 28px', display: 'flex', flexDirection: 'column', height: '100%' }}>
          <StepDots current={current} />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
            {children}
          </div>
          {footer ? <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 18 }}>{footer}</div> : null}
        </div>
      </div>
    </div>
  );
}
function HeroIcon({ icon, tone = 'var(--accent-ink)', soft = 'var(--accent-soft)' }) {
  return (
    <div style={{ width: 84, height: 84, borderRadius: 26, background: soft, color: tone, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}>
      <Icon name={icon} size={38} sw={1.8} />
    </div>
  );
}
function AppleBtn({ theme }) {
  const dark = theme === 'dark';
  return (
    <button className="btn" style={{ background: dark ? '#fff' : '#000', color: dark ? '#000' : '#fff' }}>
      <Icon name="apple" size={19} sw={0} fill="currentColor" color="none" /> Sign in with Apple
    </button>
  );
}

/* ---- 1. Welcome ---- */
function ScreenOnbWelcome({ theme }) {
  return (
    <OnbShell theme={theme} current={0}
      footer={<button className="btn btn-primary">Get started</button>}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
        <div style={{ marginBottom: 26 }}><AppIconTile size={100} /></div>
        <span className="t-display c-1" style={{ fontSize: 36 }}>Peptino</span>
        <span className="t-bodyLg c-2" style={{ maxWidth: 280, marginTop: 10, lineHeight: '24px' }}>
          Track your protocols, doses and vials — calm, private, and precise.
        </span>
      </div>
    </OnbShell>
  );
}

/* ---- 2. Goals ---- */
function GoalChip({ icon, label, tint, on }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 9, padding: '11px 16px', borderRadius: 999,
      border: '1px solid ' + (on ? 'transparent' : 'var(--border)'),
      background: on ? 'var(--accent-soft)' : 'var(--surface)', color: on ? 'var(--accent-ink)' : 'var(--text-2)',
      boxShadow: on ? 'none' : 'var(--shadow-card)',
    }}>
      <Icon name={icon} size={20} /><span className="t-strong" style={{ color: 'inherit' }}>{label}</span>
    </div>
  );
}
function ScreenOnbGoals({ theme }) {
  return (
    <OnbShell theme={theme} current={2}
      footer={<><button className="btn btn-primary">Next</button><button className="btn btn-ghost">Skip</button></>}>
      <span className="t-title c-1" style={{ marginTop: 8 }}>What are your goals?</span>
      <span className="t-body c-2" style={{ marginTop: 8, marginBottom: 26 }}>Pick any that apply. Personalises your library.</span>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center' }}>
        <GoalChip icon="droplet" label="Recovery" on />
        <GoalChip icon="flame" label="Fat loss" on />
        <GoalChip icon="brain" label="Cognitive" />
        <GoalChip icon="dna" label="Longevity" on />
        <GoalChip icon="bolt" label="Muscle" />
        <GoalChip icon="sparkle" label="Skincare" />
        <GoalChip icon="shield" label="PCT" />
      </div>
    </OnbShell>
  );
}

/* ---- 3. Profile ---- */
function ScreenOnbProfile({ theme }) {
  return (
    <OnbShell theme={theme} current={3}
      footer={<><button className="btn btn-primary">Next</button><button className="btn btn-ghost">Skip</button></>}>
      <span className="t-title c-1" style={{ marginTop: 8 }}>About you</span>
      <span className="t-body c-2" style={{ marginTop: 8, marginBottom: 22 }}>Used for dose math and units. Stays on device.</span>
      <div className="card" style={{ alignSelf: 'stretch', textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div className="field"><span className="lab t-label">Name</span>
          <div className="input"><span className="t-bodyLg c-3">Your name</span></div></div>
        <div className="field"><span className="lab t-label">Weight unit</span>
          <div className="seg soft"><button className="on">kg</button><button>lb</button></div></div>
        <div className="field"><span className="lab t-label">Default dose unit</span>
          <div className="seg"><button className="on">mcg</button><button>mg</button><button>IU</button></div></div>
        <div className="field"><span className="lab t-label">Experience</span>
          <div className="seg soft"><button className="on">Beginner</button><button>Intermed.</button><button>Advanced</button></div></div>
      </div>
    </OnbShell>
  );
}

/* ---- 4. Disclaimer ---- */
function CheckRow({ label, on }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, textAlign: 'left' }}>
      <div style={{ width: 24, height: 24, borderRadius: 8, flex: '0 0 24px', marginTop: 1,
        border: '2px solid ' + (on ? 'var(--accent)' : 'var(--border-strong)'),
        background: on ? 'var(--accent)' : 'transparent', color: 'var(--accent-fg)',
        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {on ? <Icon name="check" size={14} sw={3} /> : null}
      </div>
      <span className="t-body c-1" style={{ flex: 1, lineHeight: '20px' }}>{label}</span>
    </div>
  );
}
function ScreenOnbDisclaimer({ theme }) {
  return (
    <OnbShell theme={theme} current={4}
      footer={<button className="btn btn-primary">Accept &amp; continue</button>}>
      <div style={{ width: 64, height: 64, borderRadius: 20, background: 'var(--warning-soft)', color: 'var(--warning)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
        <Icon name="shield" size={30} />
      </div>
      <span className="t-title c-1">Before you start</span>
      <div className="card" style={{ alignSelf: 'stretch', background: 'var(--sunken)', boxShadow: 'none', textAlign: 'left', margin: '18px 0 18px' }}>
        <span className="t-body c-2" style={{ lineHeight: '21px' }}>Peptino is a research & educational logging tool. It does not provide medical advice, dosing recommendations, or diagnosis. Verify everything independently.</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignSelf: 'stretch' }}>
        <CheckRow on label="I understand this is not medical advice." />
        <CheckRow on label="I am 18 years of age or older." />
        <CheckRow label="I accept the Terms & Privacy Policy." />
      </div>
      <div style={{ display: 'flex', gap: 6, alignSelf: 'flex-start', marginLeft: 36, marginTop: 8 }}>
        <span className="t-caption c-ink" style={{ fontWeight: 600 }}>Terms</span>
        <span className="t-caption c-3">·</span>
        <span className="t-caption c-ink" style={{ fontWeight: 600 }}>Privacy Policy</span>
      </div>
    </OnbShell>
  );
}

/* ---- 5. Notifications ---- */
function ScreenOnbNotif({ theme }) {
  return (
    <OnbShell theme={theme} current={5}
      footer={<button className="btn btn-primary">Finish</button>}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <HeroIcon icon="bell2" />
        <span className="t-title c-1">Never miss a dose</span>
        <span className="t-bodyLg c-2" style={{ maxWidth: 290, marginTop: 10, lineHeight: '24px' }}>Get a gentle reminder when a dose is due. You can change this anytime.</span>
        <button className="btn btn-secondary sm" style={{ width: 'auto', padding: '0 22px', marginTop: 24 }}><Icon name="bell" size={18} /> Enable reminders</button>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 11, marginTop: 28, textAlign: 'left' }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, flex: '0 0 22px', background: 'var(--accent)', color: 'var(--accent-fg)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}><Icon name="check" size={13} sw={3} /></div>
          <span className="t-caption c-2" style={{ maxWidth: 250, lineHeight: '17px' }}>Share anonymous usage to help improve Peptino.</span>
        </div>
      </div>
    </OnbShell>
  );
}

/* ---- 6. Account (onboarding final) ---- */
function ScreenOnbAccount({ theme }) {
  return (
    <OnbShell theme={theme} current={6}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
        <HeroIcon icon="person" />
        <span className="t-title c-1">Save your data</span>
        <span className="t-bodyLg c-2" style={{ maxWidth: 290, marginTop: 10, marginBottom: 26, lineHeight: '24px' }}>Sign in to sync across devices and back up your log. Optional.</span>
        <div style={{ alignSelf: 'stretch', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div className="field" style={{ textAlign: 'left' }}><span className="lab t-label">Email</span>
            <div className="input focus"><Icon name="bell" size={0} /><span className="t-bodyLg c-1">alex@peptino.app</span></div></div>
          <button className="btn btn-primary">Send magic link</button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0' }}>
            <div className="divider" style={{ flex: 1 }} /><span className="t-caption c-3">or</span><div className="divider" style={{ flex: 1 }} />
          </div>
          <AppleBtn theme={theme} />
          <button className="btn btn-ghost">Skip for now</button>
        </div>
      </div>
    </OnbShell>
  );
}

/* ---- Login (standalone) — email step ---- */
function ScreenLoginEmail({ theme }) {
  return (
    <div className="pt phone" data-theme={theme}>
      <StatusBar time="9:41" />
      <div className="screen"><div className="scroll" style={{ padding: '4px 24px 28px', display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', width: '100%' }}>
          <div style={{ marginBottom: 22 }}><AppIconTile size={72} /></div>
          <span className="t-display c-1" style={{ fontSize: 30 }}>Welcome back</span>
          <span className="t-bodyLg c-2" style={{ marginTop: 8, marginBottom: 30 }}>Sign in to sync your protocols.</span>
          <div style={{ alignSelf: 'stretch', display: 'flex', flexDirection: 'column', gap: 12, textAlign: 'left' }}>
            <div className="field"><span className="lab t-label">Email</span>
              <div className="input focus"><span className="t-bodyLg c-1">alex@peptino.app</span></div></div>
            <button className="btn btn-primary">Send code</button>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0' }}>
              <div className="divider" style={{ flex: 1 }} /><span className="t-caption c-3">or</span><div className="divider" style={{ flex: 1 }} />
            </div>
            <AppleBtn theme={theme} />
          </div>
        </div>
        <span className="t-caption c-3" style={{ textAlign: 'center' }}>By continuing you agree to our Terms & Privacy Policy.</span>
      </div></div>
    </div>
  );
}

/* ---- Login — code step ---- */
function ScreenLoginCode({ theme }) {
  const digits = ['1', '2', '3', '4', '', ''];
  return (
    <div className="pt phone" data-theme={theme}>
      <StatusBar time="9:41" />
      <div className="screen"><div className="scroll" style={{ padding: '4px 24px 28px', display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div className="appbar" style={{ paddingBottom: 0 }}><div className="appbar-top"><div className="chip-btn"><Icon name="chevB" size={20} /></div><div className="spacer" /></div></div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', width: '100%' }}>
          <div style={{ width: 72, height: 72, borderRadius: 22, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}><Icon name="bell2" size={32} sw={1.7} /></div>
          <span className="t-title c-1">Enter your code</span>
          <span className="t-body c-2" style={{ marginTop: 8, marginBottom: 28 }}>We sent a 6-digit code to<br /><b className="c-1">alex@peptino.app</b></span>
          <div style={{ display: 'flex', gap: 9, marginBottom: 26 }}>
            {digits.map((d, i) => (
              <div key={i} style={{
                width: 46, height: 56, borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 24, color: 'var(--text-1)',
                background: 'var(--surface-2)',
                border: '2px solid ' + (i === 4 ? 'var(--accent)' : d ? 'var(--border-strong)' : 'var(--border)'),
                boxShadow: i === 4 ? '0 0 0 3px var(--accent-soft)' : 'none',
              }}>{d || (i === 4 ? <span style={{ width: 2, height: 24, background: 'var(--accent-ink)' }} /> : '')}</div>
            ))}
          </div>
          <div style={{ alignSelf: 'stretch', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button className="btn btn-primary">Verify</button>
            <button className="btn btn-ghost">Resend code</button>
          </div>
        </div>
      </div></div>
    </div>
  );
}

Object.assign(window, {
  StepDots, OnbShell, HeroIcon, AppleBtn, GoalChip, CheckRow, MiniThemePreview, ThemeCard,
  ScreenOnbWelcome, ScreenOnbTheme, ScreenOnbGoals, ScreenOnbProfile, ScreenOnbDisclaimer,
  ScreenOnbNotif, ScreenOnbAccount, ScreenLoginEmail, ScreenLoginCode,
});