// Resultado — celebration screen after a game
const Resultado = ({ result, profile, onAgain, onHome, onShare, onDiploma }) => {
  const t = window.MP_I18N.t;
  const [showConfetti, setShow] = React.useState(true);
  React.useEffect(() => {
    window.MP_SOUND.celebrate();
    const timer = setTimeout(() => setShow(false), 2400);
    return () => clearTimeout(timer);
  }, []);

  const { score, correct, total, mode, perfect, isBest, newBadges, newMascots } = result;
  const headline =
    perfect ? t('perfect') :
    score > 100 ? t('amazing') :
    score > 50 ? t('great_job') :
    t('well_done');

  return (
    <>
      <Confetti active={showConfetti} />
      <div className="topbar">
        <div className="brand">★ MULTIPLIER</div>
      </div>

      <div className="text-center mt-md">
        <div className="wiggle" style={{ display: 'inline-block' }}>
          <Mascot id={profile.mascot} size={120} mood="happy" />
        </div>
        <h1 className="h-display mt-md" style={{ color: 'var(--yellow)' }}>{headline}</h1>
        <div className="big-number">{score}</div>
        <div className="caption">{t('total_score')}</div>
        {isBest && <div className="chip coin mt-md" style={{ fontSize: 14 }}>🏆 {t('new_record')}</div>}
      </div>

      <div className="card card-strong mt-lg">
        <div className="row">
          <div className="flex-1 text-center">
            <div className="caption">{t('you_got')}</div>
            <div className="num" style={{ fontSize: 32, color: 'var(--lime)' }}>{correct}/{total}</div>
          </div>
          <div className="hud-divider" />
          <div className="flex-1 text-center">
            <div className="caption">{t('streak')}</div>
            <div className="num" style={{ fontSize: 32, color: 'var(--coral)' }}>🔥 {profile.streak}</div>
          </div>
        </div>
      </div>

      {(newBadges?.length || newMascots?.length) ? (
        <div className="card mt-md" style={{ background: 'linear-gradient(135deg, rgba(255,214,10,0.2), rgba(160,108,255,0.2))', borderColor: 'var(--yellow)' }}>
          {newBadges?.map(id => {
            const b = window.MP_DATA.BADGES.find(x => x.id === id);
            if (!b) return null;
            return (
              <div key={id} className="row mb-md">
                <div className="badge" style={{ width: 64, height: 64, flexShrink: 0 }}>
                  <span className="badge-icon">{b.icon}</span>
                </div>
                <div>
                  <div className="caption">{t('new_badge')}</div>
                  <div className="h-3">{b.name[window.MP_I18N.getLang()]}</div>
                </div>
              </div>
            );
          })}
          {newMascots?.map(id => {
            const m = window.MP_DATA.MASCOTS.find(x => x.id === id);
            if (!m) return null;
            return (
              <div key={id} className="row">
                <Mascot id={id} size={64} />
                <div>
                  <div className="caption">{t('new_mascot')}</div>
                  <div className="h-3">{m.name}</div>
                </div>
              </div>
            );
          })}
        </div>
      ) : null}

      <div className="col mt-lg">
        <button className="btn btn-primary btn-block btn-lg" onClick={onAgain}>↻ {t('play_again')}</button>
        <div className="row gap-sm">
          <button className="btn btn-cyan flex-1" onClick={onShare}>📤 {t('challenge_friend')}</button>
          <button className="btn btn-ghost flex-1" onClick={onHome}>🏠 {t('home')}</button>
        </div>
        <button className="btn btn-yellow btn-block" onClick={onDiploma}>📜 {t('view_diploma')}</button>
      </div>
    </>
  );
};

window.Resultado = Resultado;