// screens.jsx — Dashboard, Avatar (Zenith), Histórico
const { useState: useS, useEffect: useE, useMemo } = React;

/* ============ DASHBOARD ============ */
function Dashboard({ user, onStart, onNav }) {
  const dayData = PROGRAM_30[user.currentDay - 1];
  const z = zenithForDay(user.currentDay);
  const progress = user.currentDay / 30;
  const exChips = dayData.ex.split(',').map(s => s.trim());

  return (
    <div className="screen"><div className="screen__pad">
      {/* header */}
      <div className="slide-up" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 4, marginBottom: 18 }}>
        <div>
          <div className="kicker">{new Date().toLocaleDateString('pt-BR', { weekday: 'long' }).toUpperCase()}</div>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 26, textTransform: 'uppercase', lineHeight: 1 }}>
            {user.name && user.name !== 'Você' ? `Bora, ${user.name.split(' ')[0]}` : 'Bom treino'}
          </div>
        </div>
        <button onClick={() => onNav('avatar')} style={{ display: 'flex' }}>
          <ProgressRing size={50} stroke={4} progress={z.ring} glow={false} animate={false}>
            <span style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 16 }}>{z.lvl}</span>
          </ProgressRing>
        </button>
      </div>

      {/* streak strip */}
      <div className="slide-up" style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
        <div className="card" style={{ flex: 1, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="fire" size={22} /></span>
          <div><div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 22, lineHeight: 1 }}>{user.streak}</div>
            <div style={{ fontSize: 10.5, color: 'var(--muted)' }}>dias seguidos</div></div>
        </div>
        <div className="card" style={{ flex: 1, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="check" size={22} /></span>
          <div><div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 22, lineHeight: 1 }}>{user.totalWorkouts}</div>
            <div style={{ fontSize: 10.5, color: 'var(--muted)' }}>treinos feitos</div></div>
        </div>
      </div>

      {/* treino do dia — card grande */}
      <div className="slide-up card" style={{ overflow: 'hidden', marginBottom: 16 }}>
        <div className="slot" style={{ height: 168, borderRadius: 0, flexDirection: 'column', gap: 6 }}>
          <span>DEMO DO TREINO</span><span style={{ opacity: .6 }}>vídeo / loop</span>
        </div>
        <div style={{ padding: '16px 18px 18px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div className="kicker" style={{ color: 'var(--accent)' }}>DIA {user.currentDay} DE 30</div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>~30 MIN</div>
          </div>
          <h2 className="h1" style={{ fontSize: 34, margin: '6px 0 12px' }}>{dayData.foco}</h2>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginBottom: 18 }}>
            {exChips.map((c, i) => (
              <span key={i} style={{ fontSize: 11.5, padding: '6px 11px', borderRadius: 999,
                background: 'var(--surface-2)', color: 'var(--muted)', fontFamily: 'var(--ff-mono)' }}>{c}</span>
            ))}
          </div>
          <button className="btn btn--accent" onClick={onStart}><Icon name="play" size={20} />Iniciar treino</button>
        </div>
      </div>

      {/* frase do Zenith */}
      <div className="slide-up card" style={{ padding: '18px 18px', marginBottom: 16, display: 'flex', gap: 14 }}>
        <div style={{ width: 3, borderRadius: 2, background: 'var(--accent)', flex: 'none' }} />
        <div>
          <div className="kicker" style={{ marginBottom: 6 }}>ZENITH DIZ</div>
          <p style={{ fontSize: 15, lineHeight: 1.45, color: 'var(--text)', textWrap: 'pretty' }}>{dayData.frase}</p>
        </div>
      </div>

      {/* progresso 30 dias */}
      <div className="slide-up" style={{ marginBottom: 8 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div className="kicker">PROGRESSO · 30 DIAS</div>
          <button className="mono" onClick={() => onNav('history')} style={{ fontSize: 11, color: 'var(--accent)' }}>VER TUDO</button>
        </div>
        <div style={{ display: 'flex', gap: 3 }}>
          {user.history.map((s, i) => (
            <span key={i} style={{ flex: 1, height: 28, borderRadius: 3,
              background: s === 'done' ? 'var(--accent)' : s === 'today' ? 'var(--accent-soft)' : s === 'rest' ? 'var(--line-2)' : 'var(--surface-2)',
              boxShadow: s === 'today' ? 'inset 0 0 0 1.5px var(--accent)' : 'none',
              opacity: s === 'missed' ? .5 : 1,
            }} />
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 7 }}>
          <span className="mono" style={{ fontSize: 10, color: 'var(--muted-2)' }}>{Math.round(progress*100)}% COMPLETO</span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--muted-2)' }}>{30 - user.currentDay} DIAS RESTANTES</span>
        </div>
      </div>
    </div></div>
  );
}

/* ============ AVATAR (ZENITH) ============ */
function AvatarScreen({ user }) {
  const z = zenithForDay(user.currentDay);
  const dayInLevel = user.currentDay - (z.lvl === 1 ? 0 : [0,5,10,15,20][z.lvl-1]);
  const levelSpan = z.lvl === 5 ? 10 : 5;
  const xp = Math.min(1, dayInLevel / levelSpan);

  return (
    <div className="screen"><div className="screen__pad">
      <div className="slide-up" style={{ textAlign: 'center', paddingTop: 6 }}>
        <div className="kicker" style={{ color: 'var(--accent)' }}>NÍVEL {z.lvl} · {z.name.toUpperCase()}</div>
        <div style={{ margin: '20px 0 10px' }}>
          <AvatarSlot size={240} level={z.lvl} progress={z.ring} />
        </div>
        <div style={{ display: 'inline-flex', gap: 10, padding: '9px 16px', background: 'var(--surface)',
          borderRadius: 999, boxShadow: 'inset 0 0 0 1px var(--line)', marginTop: 6 }}>
          <span style={{ fontSize: 14, color: 'var(--text)' }}>"{z.phrase}"</span>
        </div>
      </div>

      {/* XP bar */}
      <div className="slide-up card" style={{ padding: 16, margin: '22px 0 14px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 9 }}>
          <span className="kicker">XP PARA NÍVEL {Math.min(5, z.lvl + 1)}</span>
          <span className="mono" style={{ fontSize: 12, color: 'var(--accent)' }}>{Math.round(xp*100)}%</span>
        </div>
        <div style={{ height: 10, borderRadius: 5, background: 'var(--surface-2)', overflow: 'hidden' }}>
          <div style={{ height: '100%', width: `${xp*100}%`, background: 'var(--accent)', borderRadius: 5,
            transformOrigin: 'left', animation: 'barGrow .8s ease both' }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 14 }}>
          <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="bolt" size={18} /></span>
          <span style={{ fontSize: 13, color: 'var(--muted)' }}>Habilidade ativa: <b style={{ color: 'var(--text)' }}>{z.ability}</b></span>
        </div>
      </div>

      {/* níveis trilha */}
      <div className="slide-up" style={{ marginBottom: 18 }}>
        <div className="kicker" style={{ marginBottom: 12 }}>JORNADA DE EVOLUÇÃO</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {ZENITH_LEVELS.map(l => {
            const done = user.currentDay > [5,10,15,20,30][l.lvl-1];
            const cur = l.lvl === z.lvl;
            return (
              <div key={l.lvl} className="card" style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 13,
                boxShadow: cur ? 'inset 0 0 0 1.5px var(--accent)' : 'inset 0 0 0 1px var(--line)',
                opacity: (done || cur) ? 1 : 0.5 }}>
                <div style={{ width: 38, height: 38, borderRadius: '50%', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 17,
                  background: (done||cur) ? 'var(--accent)' : 'var(--surface-2)', color: (done||cur) ? 'var(--accent-ink)' : 'var(--muted)' }}>
                  {done ? <Icon name="check" size={18} /> : l.lvl}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 18, textTransform: 'uppercase', lineHeight: 1 }}>{l.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{l.range} · {l.ability}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* badges */}
      <div className="slide-up">
        <div className="kicker" style={{ marginBottom: 16 }}>CONQUISTAS</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
          {BADGES.map(b => <BadgeChip key={b.id} badge={b} earned={user.earnedBadges.includes(b.id)} />)}
        </div>
      </div>
    </div></div>
  );
}

/* ============ HISTÓRICO ============ */
function HistoryScreen({ user }) {
  const stats = [
    { label: 'Treinos', value: user.totalWorkouts, unit: '' },
    { label: 'Minutos', value: user.totalMinutes, unit: 'min' },
    { label: 'Repetições', value: user.totalReps.toLocaleString('pt-BR'), unit: '' },
    { label: 'Prancha', value: Math.round(user.plankSeconds/60), unit: 'min' },
  ];
  const weeks = [
    { w: 'Sem 1', v: 1.0 }, { w: 'Sem 2', v: 0.85 }, { w: 'Sem 3', v: 0.4 }, { w: 'Sem 4', v: 0.1 },
  ];
  return (
    <div className="screen"><div className="screen__pad">
      <div className="slide-up" style={{ paddingTop: 4, marginBottom: 18 }}>
        <div className="kicker">SEU PROGRESSO</div>
        <h2 className="h1" style={{ fontSize: 36, marginTop: 6 }}>Histórico</h2>
      </div>

      {/* stats grid */}
      <div className="slide-up" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 18 }}>
        {stats.map(s => (
          <div key={s.label} className="card" style={{ padding: '15px 16px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
              <span style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 34, color: 'var(--accent)', lineHeight: 1 }}>{s.value}</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{s.unit}</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>{s.label}</div>
          </div>
        ))}
      </div>

      {/* consistência grid */}
      <div className="slide-up card" style={{ padding: 16, marginBottom: 18 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <span className="kicker">CONSISTÊNCIA</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{user.accuracy}% ACURÁCIA</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10,1fr)', gap: 6 }}>
          {user.history.map((s, i) => (
            <div key={i} style={{ aspectRatio: '1', borderRadius: 5,
              background: s === 'done' ? 'var(--accent)' : s === 'today' ? 'var(--accent-soft)' : s === 'rest' ? 'var(--line-2)' : 'var(--surface-2)',
              boxShadow: s === 'today' ? 'inset 0 0 0 1.5px var(--accent)' : 'none',
              opacity: s === 'missed' ? .45 : 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span className="mono" style={{ fontSize: 9, color: s === 'done' ? 'var(--accent-ink)' : 'var(--muted-2)' }}>{i+1}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 14 }}>
          {[['var(--accent)','Feito'],['var(--line-2)','Descanso'],['var(--surface-2)','A fazer']].map(([c,l]) => (
            <span key={l} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--muted)' }}>
              <span style={{ width: 11, height: 11, borderRadius: 3, background: c }} />{l}
            </span>
          ))}
        </div>
      </div>

      {/* semana a semana */}
      <div className="slide-up card" style={{ padding: 16 }}>
        <div className="kicker" style={{ marginBottom: 16 }}>VOLUME SEMANA A SEMANA</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, height: 120 }}>
          {weeks.map(wk => (
            <div key={wk.w} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <div style={{ width: '100%', height: 96, display: 'flex', alignItems: 'flex-end' }}>
                <div style={{ width: '100%', height: `${Math.max(6, wk.v*100)}%`, background: wk.v > 0.5 ? 'var(--accent)' : 'var(--line-2)',
                  borderRadius: 'var(--r-sm) var(--r-sm) 3px 3px', transformOrigin: 'bottom', animation: 'barGrow .7s ease both' }} />
              </div>
              <span className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{wk.w}</span>
            </div>
          ))}
        </div>
      </div>
    </div></div>
  );
}

Object.assign(window, { Dashboard, AvatarScreen, HistoryScreen });