/* Surgr · Onboarding flow — 4 screens
   Goal → Frequency → Experience → Plan recommendation */

const {
  AppH1: OAppH1,
  PrimaryButton: OPrimaryButton,
  GhostButton: OGhostButton,
  SectionLabel: OSectionLabel,
  Pill: OPill,
  Icons: OIcons,
} = window.SurgrAppKit;

const { useState: oUseState } = React;

const GOALS = [
  { id: 'hyper', label: 'Hipertrofia', desc: 'Ganhar massa magra', icon: 'Dumbbell' },
  { id: 'fat',   label: 'Perder gordura', desc: 'Definir e secar', icon: 'Flame' },
  { id: 'perf',  label: 'Performance', desc: 'Mais força e potência', icon: 'Zap' },
  { id: 'health',label: 'Saúde geral', desc: 'Movimento consistente', icon: 'Brain' },
];

const FREQS = ['2×', '3×', '4×', '5×', '6×'];

const EXPS = [
  { id: 'new',  label: 'Iniciante',     desc: 'Treino há menos de 6 meses' },
  { id: 'inter',label: 'Intermediário', desc: '6 meses a 2 anos' },
  { id: 'adv',  label: 'Avançado',      desc: 'Mais de 2 anos consistente' },
];

function ProgressDots({ step, total }) {
  return (
    <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <span key={i} style={{
          width: i === step ? 24 : 6, height: 6, borderRadius: 3,
          background: i <= step ? 'var(--surgr-accent)' : 'rgba(255,255,255,0.15)',
          transition: 'all var(--surgr-dur-base) var(--surgr-ease-out)',
          boxShadow: i === step ? '0 0 8px rgba(200,255,0,0.5)' : 'none',
        }}/>
      ))}
    </div>
  );
}

function Choice({ active, onClick, children, style = {} }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left',
      background: active ? 'var(--surgr-accent-bg)' : 'var(--surgr-bg-card)',
      border: `1px solid ${active ? 'rgba(200,255,0,0.4)' : 'var(--surgr-border)'}`,
      borderRadius: 14, padding: '16px 18px',
      color: 'var(--surgr-text)', cursor: 'pointer',
      fontFamily: 'var(--surgr-font-body)',
      transition: 'all var(--surgr-dur-fast)',
      display: 'flex', alignItems: 'center', gap: 14,
      ...style,
    }}>{children}</button>
  );
}

function OnboardingScreen({ onDone }) {
  const [step, setStep] = oUseState(0);
  const [goal, setGoal] = oUseState(null);
  const [freq, setFreq] = oUseState(null);
  const [exp, setExp] = oUseState(null);

  const next = () => setStep(s => Math.min(3, s + 1));
  const back = () => setStep(s => Math.max(0, s - 1));

  const canNext = (step === 0 && goal) || (step === 1 && freq) || (step === 2 && exp) || step === 3;
  const goalLabel = GOALS.find(g => g.id === goal)?.label;

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', height: '100%',
      padding: '20px 22px 28px',
    }}>
      {/* Header */}
      <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
        <button onClick={back} disabled={step === 0} style={{
          background: 'none', border: 'none', cursor: step === 0 ? 'default' : 'pointer',
          color: step === 0 ? 'transparent' : 'var(--surgr-text-muted)', padding: 0,
        }}>
          <OIcons.ArrowLeft size={22}/>
        </button>
        <ProgressDots step={step} total={4}/>
        <button onClick={onDone} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          color: 'var(--surgr-text-dim)', fontSize: 11, fontWeight: 800, letterSpacing: 1.5,
          textTransform: 'uppercase', fontFamily: 'var(--surgr-font-body)',
        }}>Pular</button>
      </header>

      {/* Step 0: Goal */}
      {step === 0 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div>
            <OSectionLabel accent>01 · OBJETIVO</OSectionLabel>
            <OAppH1 style={{ fontSize: 28, marginTop: 8, lineHeight: 1.05 }}>
              QUAL É SUA<br/>MISSÃO?
            </OAppH1>
            <p style={{ fontSize: 14, color: 'var(--surgr-text-muted)', marginTop: 10, lineHeight: 1.5 }}>
              Vamos calibrar volume, intensidade e cardio com base nisso.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
            {GOALS.map(g => {
              const Icon = OIcons[g.icon];
              return (
                <Choice key={g.id} active={goal === g.id} onClick={() => setGoal(g.id)}>
                  <span style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: goal === g.id ? 'var(--surgr-accent)' : 'rgba(255,255,255,0.05)',
                    color: goal === g.id ? '#000' : 'var(--surgr-text)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}><Icon size={18}/></span>
                  <span style={{ flex: 1 }}>
                    <span style={{ fontFamily: 'var(--surgr-font-heading)', fontWeight: 700, fontSize: 16, letterSpacing: 0.5, textTransform: 'uppercase', display: 'block' }}>{g.label}</span>
                    <span style={{ fontSize: 12, color: 'var(--surgr-text-muted)', marginTop: 2, display: 'block' }}>{g.desc}</span>
                  </span>
                  {goal === g.id && <OIcons.Check size={18} stroke="var(--surgr-accent)"/>}
                </Choice>
              );
            })}
          </div>
        </div>
      )}

      {/* Step 1: Frequency */}
      {step === 1 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div>
            <OSectionLabel accent>02 · FREQUÊNCIA</OSectionLabel>
            <OAppH1 style={{ fontSize: 28, marginTop: 8, lineHeight: 1.05 }}>
              QUANTAS VEZES<br/>POR SEMANA?
            </OAppH1>
            <p style={{ fontSize: 14, color: 'var(--surgr-text-muted)', marginTop: 10, lineHeight: 1.5 }}>
              Sem julgamento. A consistência ganha do volume.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
            {FREQS.map(f => (
              <button key={f} onClick={() => setFreq(f)} style={{
                aspectRatio: '1', border: `1px solid ${freq === f ? 'rgba(200,255,0,0.5)' : 'var(--surgr-border)'}`,
                background: freq === f ? 'var(--surgr-accent-bg)' : 'var(--surgr-bg-card)',
                borderRadius: 14, color: freq === f ? 'var(--surgr-accent)' : 'var(--surgr-text)',
                fontFamily: 'var(--surgr-font-heading)', fontWeight: 800, fontSize: 22, letterSpacing: 0,
                cursor: 'pointer', transition: 'all var(--surgr-dur-fast)',
              }}>{f}</button>
            ))}
          </div>
          {freq && (
            <div style={{
              background: 'rgba(200,255,0,0.04)', border: '1px solid rgba(200,255,0,0.15)',
              borderRadius: 12, padding: '14px 16px', marginTop: 8,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <span style={{
                width: 24, height: 24, borderRadius: 6, background: 'var(--surgr-accent)',
                color: '#000', fontFamily: 'var(--surgr-font-heading)', fontWeight: 800,
                fontSize: 13, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>S</span>
              <span style={{ fontSize: 13, color: 'var(--surgr-text)', lineHeight: 1.5 }}>
                {freq === '2×' && 'Sem problema. Vou montar full-body otimizado.'}
                {freq === '3×' && 'Bom ritmo. Push/Pull/Legs cabe direitinho.'}
                {freq === '4×' && 'Ótimo. Upper/Lower duas vezes na semana.'}
                {freq === '5×' && 'Sério. PPL + Upper/Lower híbrido.'}
                {freq === '6×' && 'Atleta. Bro split com cardio metabólico.'}
              </span>
            </div>
          )}
        </div>
      )}

      {/* Step 2: Experience */}
      {step === 2 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div>
            <OSectionLabel accent>03 · NÍVEL</OSectionLabel>
            <OAppH1 style={{ fontSize: 28, marginTop: 8, lineHeight: 1.05 }}>
              HÁ QUANTO TEMPO<br/>VOCÊ TREINA?
            </OAppH1>
            <p style={{ fontSize: 14, color: 'var(--surgr-text-muted)', marginTop: 10, lineHeight: 1.5 }}>
              Influencia carga inicial, progressão e tempo de descanso.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {EXPS.map(e => (
              <Choice key={e.id} active={exp === e.id} onClick={() => setExp(e.id)} style={{ padding: '18px 18px' }}>
                <span style={{ flex: 1 }}>
                  <span style={{ fontFamily: 'var(--surgr-font-heading)', fontWeight: 700, fontSize: 16, letterSpacing: 0.5, textTransform: 'uppercase', display: 'block' }}>{e.label}</span>
                  <span style={{ fontSize: 12, color: 'var(--surgr-text-muted)', marginTop: 4, display: 'block' }}>{e.desc}</span>
                </span>
                {exp === e.id && <OIcons.Check size={18} stroke="var(--surgr-accent)"/>}
              </Choice>
            ))}
          </div>
        </div>
      )}

      {/* Step 3: Plan ready */}
      {step === 3 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: 20 }}>
          <div style={{
            width: 88, height: 88, borderRadius: 22.5,
            background: 'var(--surgr-accent)', color: '#000',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 40px rgba(200,255,0,0.4)',
            fontFamily: 'var(--surgr-font-heading)', fontWeight: 800, fontSize: 44,
          }}>S</div>
          <div>
            <OSectionLabel accent style={{ textAlign: 'center' }}>04 · TUDO PRONTO</OSectionLabel>
            <OAppH1 style={{ fontSize: 30, marginTop: 8, lineHeight: 1.05 }}>
              SEU PLANO<br/><span style={{ color: 'var(--surgr-accent)', textShadow: 'var(--surgr-text-glow)' }}>ESTÁ PRONTO.</span>
            </OAppH1>
          </div>
          <div style={{
            background: 'var(--surgr-bg-card)', border: '1px solid var(--surgr-border)',
            borderRadius: 16, padding: 18, width: '100%', maxWidth: 280,
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            {[
              ['Objetivo', goalLabel || '—'],
              ['Frequência', freq || '—'],
              ['Nível', EXPS.find(e => e.id === exp)?.label || '—'],
              ['Split', freq === '3×' ? 'Push / Pull / Legs' : freq === '4×' ? 'Upper / Lower 2×' : 'Full-Body'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ color: 'var(--surgr-text-muted)', fontWeight: 600 }}>{k}</span>
                <span style={{ color: 'var(--surgr-text-strong)', fontWeight: 700, fontFamily: 'var(--surgr-font-heading)', letterSpacing: 0.5 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Footer button */}
      <div style={{ marginTop: 18 }}>
        {step < 3 ? (
          <OPrimaryButton full onClick={next} style={{ opacity: canNext ? 1 : 0.4 }}>
            Continuar
          </OPrimaryButton>
        ) : (
          <OPrimaryButton full onClick={onDone}>Começar a treinar →</OPrimaryButton>
        )}
      </div>
    </div>
  );
}

window.SurgrAppKit.OnboardingScreen = OnboardingScreen;