// Perfil — stats, badges, mascots, diploma
const Perfil = ({ profile, onUpdate, onLogout, onDiploma }) => {
  const t = window.MP_I18N.t;
  const lvl = window.MP_DATA.levelFor(profile.points || 0);
  const lang = window.MP_I18N.getLang();

  const equipMascot = (id) => {
    if (!profile.mascotsUnlocked.includes(id)) return;
    window.MP_SOUND.tap();
    onUpdate({ ...profile, mascot: id });
  };

  const switchLang = () => {
    const next = lang === 'es' ? 'en' : 'es';
    window.MP_I18N.setLang(next);
    onUpdate({ ...profile, lang: next });
  };

  return (
    <>
      <div className="topbar">
        <div className="brand">👤 {t('profile')}</div>
        <div className="spacer" />
        <button className="btn btn-ghost btn-sm" onClick={switchLang}>{lang === 'es' ? 'EN' : 'ES'}</button>
      </div>

      <div className="card card-pop text-center">
        <Mascot id={profile.mascot || 'nebu'} size={120} mood="happy" />
        <div className="h-1 mt-md">{profile.firstName} {profile.lastInitial}.</div>
        <div className="caption">{profile.schoolName || '—'}{profile.grade ? ' · ' + profile.grade + '°' : ''}</div>
        <div className="row mt-md" style={{ justifyContent: 'center', gap: 16 }}>
          <span className="chip" style={{ background: 'linear-gradient(180deg, rgba(160,108,255,0.3), rgba(160,108,255,0.1))', borderColor: 'rgba(160,108,255,0.5)' }}>
            {lvl.curr.name[lang]}
          </span>
          <span className="chip coin">⭐ {profile.points}</span>
          <span className="chip streak">🔥 {profile.streak}</span>
        </div>
      </div>

      <h2 className="h-2 mt-lg mb-md">📊 {t('stats')}</h2>
      <div className="card">
        <div className="row" style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <Stat label={t('challenges_done')} value={profile.challenges || 0} color="var(--cyan)" />
          <Stat label={t('perfect_rounds')} value={profile.perfectRounds || 0} color="var(--lime)" />
          <Stat label={t('tables_practiced')} value={(profile.tablesPracticed || []).length + '/12'} color="var(--magenta)" />
          <Stat label={t('best_time_attack')} value={profile.bestTimeAttack || 0} color="var(--yellow)" />
        </div>
      </div>

      <h2 className="h-2 mt-lg mb-md">🏅 {t('badges')} <span style={{ fontSize: 14, fontWeight: 400, color: 'var(--ink-faint)' }}>({(profile.badges||[]).length}/{window.MP_DATA.BADGES.length})</span></h2>
      <div className="badges">
        {window.MP_DATA.BADGES.map(b => {
          const owned = profile.badges?.includes(b.id);
          return (
            <div key={b.id} style={{ position: 'relative', paddingBottom: 26 }}>
              <div className={'badge' + (owned ? '' : ' locked')} title={b.req[lang]}>
                <span className="badge-icon">{owned ? b.icon : '🔒'}</span>
              </div>
              <div className="badge-name" style={{ left: '50%', transform: 'translateX(-50%)' }}>{b.name[lang]}</div>
            </div>
          );
        })}
      </div>

      <h2 className="h-2 mt-xl mb-md">🛸 {t('mascots')}</h2>
      <div className="mascot-grid">
        {window.MP_DATA.MASCOTS.map(m => {
          const unlocked = profile.mascotsUnlocked.includes(m.id);
          const equipped = profile.mascot === m.id;
          return (
            <div
              key={m.id}
              className={'mascot-card' + (equipped ? ' equipped' : '') + (unlocked ? '' : ' locked')}
              onClick={() => equipMascot(m.id)}
            >
              <Mascot id={m.id} size={80} mood={unlocked ? 'happy' : 'sad'} />
              <div className="m-name">{m.name}</div>
              <div className="m-req">
                {equipped ? '✓ ' + t('equipped') : unlocked ? t('change_mascot') : `🔒 ${m.unlock} ${t('points')}`}
              </div>
            </div>
          );
        })}
      </div>

      <div className="col mt-xl">
        <button className="btn btn-yellow btn-block" onClick={onDiploma}>📜 {t('print_diploma')}</button>
        <button className="btn btn-ghost btn-block btn-sm" onClick={onLogout}>↪ {lang === 'es' ? 'Cerrar sesión' : 'Sign out'}</button>
      </div>
    </>
  );
};

const Stat = ({ label, value, color }) => (
  <div className="text-center" style={{ minWidth: 90 }}>
    <div className="num" style={{ fontSize: 28, color }}>{value}</div>
    <div className="caption">{label}</div>
  </div>
);

window.Perfil = Perfil;