"use client";

import { useEffect, useState } from "react";

interface Particle {
    id: number;
    x: number;
    y: number;
    size: number;
    color: string;
}

export default function MouseAnimation() {
    const [particles, setParticles] = useState<Particle[]>([]);
    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

    const colors = [
        "rgba(59, 130, 246, 0.8)",   // Blue
        "rgba(139, 92, 246, 0.8)",   // Purple
        "rgba(236, 72, 153, 0.8)",   // Pink
        "rgba(34, 197, 94, 0.8)",    // Green
    ];

    useEffect(() => {
        let particleId = 0;

        const handleMouseMove = (e: MouseEvent) => {
            setMousePos({ x: e.clientX, y: e.clientY });

            // Create particles more frequently
            if (particleId % 2 === 0) {
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 15;

                const newParticle: Particle = {
                    id: particleId++,
                    x: e.clientX + Math.cos(angle) * distance,
                    y: e.clientY + Math.sin(angle) * distance,
                    size: Math.random() * 6 + 2,
                    color: colors[Math.floor(Math.random() * colors.length)],
                };

                setParticles((prev) => [...prev, newParticle].slice(-25));
            }
            particleId++;
        };

        window.addEventListener("mousemove", handleMouseMove);
        return () => window.removeEventListener("mousemove", handleMouseMove);
    }, []);

    // Remove old particles
    useEffect(() => {
        const interval = setInterval(() => {
            setParticles((prev) => prev.slice(1));
        }, 100);

        return () => clearInterval(interval);
    }, []);

    return (
        <div className="pointer-events-none fixed inset-0 z-50 hidden md:block overflow-hidden">
            {/* SVG for connecting lines */}
            <svg className="absolute inset-0 w-full h-full">
                <defs>
                    <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stopColor="rgba(59, 130, 246, 0.3)" />
                        <stop offset="100%" stopColor="rgba(139, 92, 246, 0.3)" />
                    </linearGradient>
                </defs>
                {/* Draw lines connecting recent particles */}
                {particles.slice(-10).map((particle, index) => {
                    if (index === 0) return null;
                    const prevParticle = particles[particles.length - 10 + index - 1];
                    if (!prevParticle) return null;

                    return (
                        <line
                            key={`line-${particle.id}`}
                            x1={prevParticle.x}
                            y1={prevParticle.y}
                            x2={particle.x}
                            y2={particle.y}
                            stroke="url(#lineGradient)"
                            strokeWidth="1"
                            opacity={0.3 - (index * 0.03)}
                        />
                    );
                })}
            </svg>

            {/* Glowing cursor circle */}
            <div
                className="absolute w-8 h-8 rounded-full pointer-events-none transition-all duration-100"
                style={{
                    left: mousePos.x,
                    top: mousePos.y,
                    transform: 'translate(-50%, -50%)',
                    background: 'radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%)',
                    boxShadow: '0 0 20px rgba(59, 130, 246, 0.6)',
                }}
            />

            {/* Particles */}
            {particles.map((particle, index) => (
                <div
                    key={particle.id}
                    className="absolute rounded-full animate-particle-fade"
                    style={{
                        left: particle.x,
                        top: particle.y,
                        width: particle.size,
                        height: particle.size,
                        backgroundColor: particle.color,
                        boxShadow: `0 0 ${particle.size * 2}px ${particle.color}`,
                        animationDelay: `${index * 20}ms`,
                        transform: 'translate(-50%, -50%)',
                    }}
                />
            ))}

            {/* Sparkle effects */}
            {particles.slice(-5).map((particle, index) => (
                <div
                    key={`sparkle-${particle.id}`}
                    className="absolute animate-sparkle"
                    style={{
                        left: particle.x,
                        top: particle.y,
                        animationDelay: `${index * 100}ms`,
                    }}
                >
                    <svg width="12" height="12" viewBox="0 0 12 12" className="text-yellow-300">
                        <path
                            d="M6 0 L7 5 L12 6 L7 7 L6 12 L5 7 L0 6 L5 5 Z"
                            fill="currentColor"
                            opacity="0.6"
                        />
                    </svg>
                </div>
            ))}

            <style jsx>{`
                @keyframes particle-fade {
                    0% {
                        opacity: 1;
                        transform: translate(-50%, -50%) scale(1);
                    }
                    100% {
                        opacity: 0;
                        transform: translate(-50%, -50%) scale(0.3);
                    }
                }

                @keyframes sparkle {
                    0%, 100% {
                        opacity: 0;
                        transform: translate(-50%, -50%) scale(0) rotate(0deg);
                    }
                    50% {
                        opacity: 1;
                        transform: translate(-50%, -50%) scale(1) rotate(180deg);
                    }
                }

                .animate-particle-fade {
                    animation: particle-fade 1s ease-out forwards;
                }

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