import { Sparkles } from "lucide-react";
import { useEffect, useState } from "react";

interface OnboardingCelebrationProps {
  show: boolean;
  onComplete: () => void;
}

export function OnboardingCelebration({ show, onComplete }: OnboardingCelebrationProps) {
  const [confetti, setConfetti] = useState<
    Array<{ id: number; left: number; delay: number; duration: number }>
  >([]);

  useEffect(() => {
    if (show) {
      // Generate confetti particles
      const particles = Array.from({ length: 50 }, (_, i) => ({
        id: i,
        left: Math.random() * 100,
        delay: Math.random() * 0.5,
        duration: 2 + Math.random() * 1,
      }));
      setConfetti(particles);

      // Clean up after animation
      const timer = setTimeout(() => {
        onComplete();
      }, 3500);

      return () => clearTimeout(timer);
    }
  }, [show, onComplete]);

  if (!show) return null;

  return (
    <div className="fixed inset-0 pointer-events-none z-[100] overflow-hidden">
      {/* Confetti particles */}
      {confetti.map((particle) => (
        <div
          key={particle.id}
          className="absolute top-0 w-2 h-2 rounded-full animate-confetti-fall"
          style={{
            left: `${particle.left}%`,
            animationDelay: `${particle.delay}s`,
            animationDuration: `${particle.duration}s`,
            backgroundColor: [
              "rgb(239, 68, 68)", // red
              "rgb(59, 130, 246)", // blue
              "rgb(34, 197, 94)", // green
              "rgb(251, 191, 36)", // yellow
              "rgb(168, 85, 247)", // purple
              "rgb(236, 72, 153)", // pink
            ][Math.floor(Math.random() * 6)],
          }}
        />
      ))}

      {/* Success message overlay */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="bg-background/95 backdrop-blur-sm border-2 border-primary shadow-2xl rounded-2xl p-8 animate-scale-in">
          <div className="flex flex-col items-center gap-4">
            <div className="p-4 bg-primary/10 rounded-full animate-pulse">
              <Sparkles className="h-12 w-12 text-primary" />
            </div>
            <div className="text-center space-y-2">
              <h2 className="text-3xl font-bold">🎉 Félicitations !</h2>
              <p className="text-muted-foreground text-lg">Votre Tablo a été créé avec succès</p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes confetti-fall {
          0% {
            transform: translateY(-10vh) rotate(0deg);
            opacity: 1;
          }
          100% {
            transform: translateY(110vh) rotate(720deg);
            opacity: 0;
          }
        }

        @keyframes scale-in {
          0% {
            transform: scale(0.8);
            opacity: 0;
          }
          50% {
            transform: scale(1.05);
          }
          100% {
            transform: scale(1);
            opacity: 1;
          }
        }

        .animate-confetti-fall {
          animation: confetti-fall linear forwards;
        }

        .animate-scale-in {
          animation: scale-in 0.5s ease-out forwards;
        }
      `}</style>
    </div>
  );
}
