import { useEffect, useRef } from 'react';

interface Particle {
  x: number;
  y: number;
  size: number;
  speed: number;
  opacity: number;
  sway: number;
  swaySpeed: number;
}

interface Props {
  type: 'rain' | 'stars' | 'petals' | 'snow' | 'none';
}

export default function Particles({ type }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const particlesRef = useRef<Particle[]>([]);
  const frameRef = useRef<number>(0);

  useEffect(() => {
    if (type === 'none') return;

    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const resize = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };
    resize();
    window.addEventListener('resize', resize);

    const count = type === 'snow' || type === 'petals' ? 40 : type === 'stars' ? 60 : 80;
    particlesRef.current = Array.from({ length: count }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: type === 'rain' ? 1.5 : type === 'stars' ? Math.random() * 2 + 0.5 : type === 'petals' ? Math.random() * 4 + 3 : Math.random() * 3 + 1,
      speed: type === 'rain' ? 6 + Math.random() * 4 : type === 'petals' ? 0.5 + Math.random() * 1 : type === 'snow' ? 0.5 + Math.random() * 1.5 : 0.1,
      opacity: type === 'stars' ? 0.3 + Math.random() * 0.7 : 0.3 + Math.random() * 0.4,
      sway: Math.random() * Math.PI * 2,
      swaySpeed: 0.01 + Math.random() * 0.02,
    }));

    const colors: Record<string, string> = {
      rain: 'rgba(160, 174, 192, 0.3)',
      stars: 'rgba(255, 255, 255, 0.8)',
      petals: 'rgba(255, 182, 193, 0.6)',
      snow: 'rgba(255, 255, 255, 0.6)',
    };

    let frame = 0;
    const animate = () => {
      frame++;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const color = colors[type];

      particlesRef.current.forEach((p) => {
        p.sway += p.swaySpeed;
        p.y += p.speed;

        if (type === 'rain') {
          ctx.beginPath();
          ctx.moveTo(p.x, p.y);
          ctx.lineTo(p.x + Math.sin(p.sway) * 3, p.y + 8);
          ctx.strokeStyle = color;
          ctx.lineWidth = p.size;
          ctx.stroke();
        } else if (type === 'stars') {
          const twinkle = 0.5 + Math.sin(frame * 0.02 + p.x) * 0.5;
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(255, 255, 255, ${p.opacity * twinkle})`;
          ctx.fill();
        } else if (type === 'petals') {
          const rotation = Math.sin(p.sway * 2) * 0.3;
          ctx.save();
          ctx.translate(p.x + Math.sin(p.sway) * 15, p.y);
          ctx.rotate(rotation);
          ctx.beginPath();
          ctx.ellipse(0, 0, p.size, p.size * 0.6, 0, 0, Math.PI * 2);
          ctx.fillStyle = color;
          ctx.fill();
          ctx.restore();
        } else if (type === 'snow') {
          ctx.beginPath();
          ctx.arc(p.x + Math.sin(p.sway) * 10, p.y, p.size, 0, Math.PI * 2);
          ctx.fillStyle = color;
          ctx.fill();
        }

        // Wrap around
        if (p.y > canvas.height + 15) {
          p.y = -10;
          p.x = Math.random() * canvas.width;
        }
        if (p.x > canvas.width + 15) p.x = -5;
        if (p.x < -15) p.x = canvas.width + 5;
      });

      frameRef.current = requestAnimationFrame(animate);
    };

    animate();

    return () => {
      cancelAnimationFrame(frameRef.current);
      window.removeEventListener('resize', resize);
    };
  }, [type]);

  if (type === 'none') return null;

  return (
    <canvas
      ref={canvasRef}
      className="fixed inset-0 pointer-events-none z-10"
      style={{ opacity: type === 'stars' ? 1 : 0.5 }}
    />
  );
}
