"use client";

import { useState, type CSSProperties } from "react";

const CONFETTI_COLORS = ["#E7C560", "#C9A227", "#F4ECD8", "#A5342A", "#5E6B3B", "#2E6E7E", "#B08D57"];

type ConfettiPiece = {
  id: number;
  left: number;
  color: string;
  delay: number;
  duration: number;
  spin: number;
  drift: number;
};

function generateConfettiPieces(): ConfettiPiece[] {
  return Array.from({ length: 26 }, (_, index) => ({
    id: index,
    left: Math.random() * 100,
    color: CONFETTI_COLORS[index % CONFETTI_COLORS.length],
    delay: Math.random() * 250,
    duration: 900 + Math.random() * 700,
    spin: (Math.random() > 0.5 ? 1 : -1) * (360 + Math.random() * 360),
    drift: (Math.random() - 0.5) * 70,
  }));
}

// Partagé entre Le Vol d'Icare et La Corne d'Abondance (fin de partie) —
// à l'appelant de ne le monter que si prefers-reduced-motion ne le
// désactive pas, comme déjà fait sur les deux jeux.
export function Confetti() {
  // Initialiseur paresseux de useState (n'exécute Math.random() qu'une
  // seule fois, au montage — Confetti est remonté à chaque nouvelle partie
  // terminée) plutôt qu'un appel impur dans le corps du composant.
  const [pieces] = useState(generateConfettiPieces);

  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden">
      {pieces.map((piece) => (
        <span
          key={piece.id}
          className="animate-confetti-fall absolute top-0 h-2.5 w-1.5 rounded-[1px]"
          style={
            {
              left: `${piece.left}%`,
              backgroundColor: piece.color,
              animationDelay: `${piece.delay}ms`,
              animationDuration: `${piece.duration}ms`,
              "--confetti-spin": `${piece.spin}deg`,
              "--confetti-drift": `${piece.drift}px`,
            } as CSSProperties
          }
        />
      ))}
    </div>
  );
}