import type { CSSProperties } from 'react';
import { cn } from '@/lib/cn';
import s from './game.module.css';

export type ConfettiTone = 'line' | 'gold' | 'brand';

const PALETTES: Record<ConfettiTone, string[]> = {
  line: ['var(--color-amber)', 'var(--color-amber-soft)', 'var(--color-lime)', 'var(--color-cyan)'],
  gold: ['var(--color-amber)', 'var(--color-amber-soft)', 'var(--color-lime)', 'var(--color-lime-soft)', '#ffffff'],
  brand: ['var(--color-violet)', 'var(--color-violet-soft)', 'var(--color-cyan)', 'var(--color-amber)', 'var(--color-lime)'],
};

/**
 * One-shot CSS confetti burst. Positions come from a golden-ratio sequence (deterministic, so
 * server and client render the same markup). Hidden entirely under prefers-reduced-motion.
 * Remount (change `key`) to fire again.
 */
export function Confetti({ tone = 'line', pieces = 36, className }: { tone?: ConfettiTone; pieces?: number; className?: string }) {
  const colors = PALETTES[tone];
  return (
    <div aria-hidden="true" className={cn(s.confetti, 'z-30', className)}>
      {Array.from({ length: pieces }, (_, i) => {
        const g = (i * 0.618033988749895) % 1;
        const h = (i * 0.414213562373095) % 1;
        const size = 6 + Math.round(h * 6);
        const style = {
          left: `${(g * 100).toFixed(2)}%`,
          width: `${size}px`,
          height: `${Math.round(size * (i % 3 === 0 ? 1 : 0.45))}px`,
          background: colors[i % colors.length],
          borderRadius: i % 4 === 0 ? '999px' : '2px',
          '--delay': `${(h * 0.5).toFixed(2)}s`,
          '--dur': `${(1.9 + g * 1.3).toFixed(2)}s`,
          '--drift': `${Math.round((h - 0.5) * 160)}px`,
          '--spin': `${360 + Math.round(g * 540)}deg`,
        } as CSSProperties;
        return <span key={i} className={s.piece} style={style} />;
      })}
    </div>
  );
}