import { useEffect, useRef } from 'react';
import confetti from 'canvas-confetti';
import { Match } from '../api/client';
import styles from './ConfettiReveal.module.css';

interface Props {
  match: Match;
  onDismiss: () => void;
}

export default function ConfettiReveal({ match, onDismiss }: Props) {
  const didFire = useRef(false);
  const tip = match.userTip!;
  const points = tip.points!;

  useEffect(() => {
    if (points === 3 && !didFire.current) {
      didFire.current = true;
      confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } });
    }
  }, [points]);

  const resultLabel = points === 3 ? 'EXAKT! 🎉' : points === 1 ? 'Richtige Tendenz! 👏' : 'Knapp daneben... 😅';
  const badgeClass = points === 3 ? styles.badgeExact : points === 1 ? styles.badgeTendency : styles.badgeWrong;

  return (
    <div className={styles.overlay} onClick={onDismiss}>
      <div className={`card ${styles.card}`} onClick={e => e.stopPropagation()}>
        <div className={styles.result}>
          {match.homeTeam.shortName} {match.score.home}:{match.score.away} {match.awayTeam.shortName}
        </div>
        <div className={styles.tipLine}>
          Dein Tipp: {tip.home}:{tip.away}
        </div>
        <div className={`${styles.badge} ${badgeClass}`}>
          {points} {points === 1 ? 'Punkt' : 'Punkte'}
        </div>
        <div className={styles.label}>{resultLabel}</div>
        <button className={styles.dismissBtn} onClick={onDismiss}>Weiter</button>
      </div>
    </div>
  );
}