import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { useResponsive, getResponsiveParticleDensity } from '../../hooks/use-responsive';

interface AIParticlesProps {
  density?: number;
  className?: string;
}

export default function AIParticles({ density = 30, className = "" }: AIParticlesProps) {
  const responsive = useResponsive();
  const containerRef = useRef<HTMLDivElement>(null);
  const particlesRef = useRef<HTMLDivElement[]>([]);

  useEffect(() => {
    if (!containerRef.current) return;

    const container = containerRef.current;
    const particles: HTMLDivElement[] = [];

    // Create particles with responsive density
    const responsiveDensity = getResponsiveParticleDensity(density, responsive);
    for (let i = 0; i < responsiveDensity; i++) {
      const particle = document.createElement('div');
      particle.className = getParticleClasses(i);

      // Random starting position
      particle.style.left = `${Math.random() * 100}%`;
      particle.style.top = `${Math.random() * 100}%`;

      container.appendChild(particle);
      particles.push(particle);
      particlesRef.current.push(particle);

      // Animate particle
      animateParticle(particle, i);
    }

    return () => {
      particles.forEach(particle => {
        if (particle.parentNode) {
          particle.parentNode.removeChild(particle);
        }
      });
      particlesRef.current = [];
    };
  }, [density, responsive]);

  const getParticleClasses = (index: number) => {
    const types = [
      'w-1 h-1 bg-cyan-600 dark:bg-cyan-400 rounded-full',
      'w-0.5 h-0.5 bg-purple-600 dark:bg-purple-400 rounded-full',
      'w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full opacity-60',
      'w-1.5 h-1.5 bg-emerald-600 dark:bg-emerald-400 rounded-full opacity-40',
      'w-3 h-3 bg-gradient-to-r from-cyan-600 to-purple-600 dark:from-cyan-400 dark:to-purple-400 rounded-full opacity-30',
    ];
    return `absolute ${types[index % types.length]}`;
  };

  const animateParticle = (particle: HTMLDivElement, index: number) => {
    const duration = 10 + Math.random() * 20;
    const delay = Math.random() * 5;

    // Create floating movement
    gsap.set(particle, {
      x: Math.random() * 200 - 100,
      y: Math.random() * 200 - 100,
      opacity: 0
    });

    const tl = gsap.timeline({ repeat: -1, delay });

    tl.to(particle, {
      opacity: 0.8,
      duration: 2,
      ease: "power2.out"
    })
    .to(particle, {
      x: `+=${Math.random() * 400 - 200}`,
      y: `+=${Math.random() * 400 - 200}`,
      rotation: Math.random() * 360,
      duration: duration,
      ease: "none",
    }, 0)
    .to(particle, {
      opacity: 0,
      duration: 2,
      ease: "power2.in"
    }, duration - 2);

    // Add pulsing effect for some particles
    if (index % 3 === 0) {
      gsap.to(particle, {
        scale: 1.5,
        duration: 2,
        yoyo: true,
        repeat: -1,
        ease: "power2.inOut",
        delay: Math.random() * 3
      });
    }
  };

  return (
    <div
      ref={containerRef}
      className={`absolute inset-0 overflow-hidden pointer-events-none ${className}`}
    />
  );
}