'use client';

import { useEffect, useState } from 'react';

interface FloatingElement {
  id: number;
  x: number;
  y: number;
  size: number;
  opacity: number;
  emoji: string;
  delay: number;
}

export default function MagicBackground() {
  const [elements, setElements] = useState<FloatingElement[]>([]);
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
    
    // Generate diverse floating learning elements only on client
    const learningEmojis = ['🎨', '🔬', '📚', '🌍', '🎵', '⚽', '🏛️', '🌺', '🔢', '🎭', '🌳', '🦋', '💎', '🎪', '🚂', '🏰'];
    const newElements: FloatingElement[] = [];
    
    for (let i = 0; i < 25; i++) {
      newElements.push({
        id: i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: Math.random() * 2 + 1,
        opacity: Math.random() * 0.6 + 0.2,
        emoji: learningEmojis[Math.floor(Math.random() * learningEmojis.length)],
        delay: Math.random() * 3,
      });
    }
    setElements(newElements);
  }, []);

  // Don't render random elements until client is loaded
  if (!isClient) {
    return (
      <div className="absolute inset-0 overflow-hidden">
        {/* Static elements for SSR */}
        <div className="absolute top-10 left-10 text-2xl animate-sparkle">✨</div>
        <div className="absolute top-1/4 right-20 text-xl animate-sparkle" style={{ animationDelay: '1s' }}>💫</div>
        <div className="absolute bottom-1/3 left-1/4 text-3xl animate-sparkle" style={{ animationDelay: '2s' }}>⭐</div>
        <div className="absolute top-1/2 right-1/3 text-lg animate-sparkle" style={{ animationDelay: '0.5s' }}>🌟</div>
        
        {/* Gradient overlays for depth */}
        <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-indigo-900/20 to-transparent"></div>
        <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-pink-900/20 to-transparent"></div>
        <div className="absolute top-0 left-0 h-full w-32 bg-gradient-to-r from-purple-900/20 to-transparent"></div>
        <div className="absolute top-0 right-0 h-full w-32 bg-gradient-to-l from-indigo-900/20 to-transparent"></div>
      </div>
    );
  }

  return (
    <div className="absolute inset-0 overflow-hidden">
      {/* Floating learning elements */}
      {elements.map((element) => (
        <div
          key={element.id}
          className="absolute text-xl animate-float-magic"
          style={{
            left: `${element.x}%`,
            top: `${element.y}%`,
            opacity: element.opacity,
            animationDelay: `${element.delay}s`,
            fontSize: `${element.size}rem`,
          }}
        >
          {element.emoji}
        </div>
      ))}
      
      {/* Magical sparkles */}
      <div className="absolute top-10 left-10 text-2xl animate-sparkle">✨</div>
      <div className="absolute top-1/4 right-20 text-xl animate-sparkle" style={{ animationDelay: '1s' }}>💫</div>
      <div className="absolute bottom-1/3 left-1/4 text-3xl animate-sparkle" style={{ animationDelay: '2s' }}>⭐</div>
      <div className="absolute top-1/2 right-1/3 text-lg animate-sparkle" style={{ animationDelay: '0.5s' }}>🌟</div>
      
      {/* Gradient overlays for depth */}
      <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-indigo-900/20 to-transparent"></div>
      <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-pink-900/20 to-transparent"></div>
      <div className="absolute top-0 left-0 h-full w-32 bg-gradient-to-r from-purple-900/20 to-transparent"></div>
      <div className="absolute top-0 right-0 h-full w-32 bg-gradient-to-l from-indigo-900/20 to-transparent"></div>
    </div>
  );
}
