import { useEffect } from 'react';
import confetti from 'canvas-confetti';
import { motion, AnimatePresence } from 'framer-motion';
import { Avatar } from './ui/avatar';
import { Trophy } from 'lucide-react';

interface CelebrationOverlayProps {
  winner: { id: string; name: string; avatar?: string };
  gameId: string;
}

export function CelebrationOverlay({ winner, gameId }: CelebrationOverlayProps) {
  // 1. Déclenchement de l'animation de confettis
  useEffect(() => {
    const duration = 3000;
    const end = Date.now() + duration;

    const frame = () => {
      confetti({
        particleCount: 5,
        angle: 60,
        spread: 55,
        origin: { x: 0 },
        colors: ['#ffb703', '#fbbf24', '#f59e0b', '#d97706', '#b45309']
      });
      confetti({
        particleCount: 5,
        angle: 120,
        spread: 55,
        origin: { x: 1 },
        colors: ['#ffb703', '#fbbf24', '#f59e0b', '#d97706', '#b45309']
      });

      if (Date.now() < end) {
        requestAnimationFrame(frame);
      }
    };

    frame();
  }, [gameId]);

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 z-50 pointer-events-none flex items-center justify-center overflow-hidden"
      >
        {/* Rayons de soleil tournants en fond */}
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
          className="absolute w-[200vw] h-[200vw] max-w-[1500px] max-h-[1500px] opacity-20"
          style={{
            background: 'repeating-conic-gradient(from 0deg, transparent 0deg 15deg, #f59e0b 15deg 30deg)'
          }}
        />

        <motion.div
          initial={{ scale: 0.5, y: 50, opacity: 0 }}
          animate={{
            scale: [0.5, 1.2, 1],
            y: [50, -20, 0],
            opacity: 1
          }}
          transition={{
            duration: 0.8,
            ease: "easeOut",
            type: "spring",
            damping: 12
          }}
          className="relative z-10 flex flex-col items-center drop-shadow-2xl"
        >
          {/* La couronne flottante */}
          <motion.div
            animate={{ y: [-5, 5, -5] }}
            transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
            className="mb-[-15px] z-20"
          >
            <Trophy className="w-16 h-16 text-yellow-400 drop-shadow-lg fill-yellow-400" />
          </motion.div>

          {/* L'avatar géant du gagnant */}
          <div className="relative">
            <div className="absolute inset-0 bg-yellow-400 blur-xl opacity-50 rounded-full animate-pulse" />
            <Avatar
              src={winner.avatar}
              name={winner.name}
              size="xl"
              className="w-32 h-32 border-4 border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.5)] relative z-10 bg-background"
            />
          </div>

          {/* Nom du vainqueur */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5, duration: 0.5 }}
            className="mt-6 text-center"
          >
            <div className="text-yellow-400 font-black tracking-widest uppercase text-sm drop-shadow-md mb-1">
              Grand Vainqueur
            </div>
            <div className="text-4xl font-black text-white drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)] tracking-tighter">
              {winner.name}
            </div>
          </motion.div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
}
