import { useState, useEffect, useRef } from 'react';
import { Sparkles, Brain, Cloud, Moon, Sun, Wind } from 'lucide-react';

export default function MoodEffectsApp() {
  const [currentMood, setCurrentMood] = useState('calm');
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [isPressed, setIsPressed] = useState(false);
  const [dropPosition, setDropPosition] = useState({ x: 50, y: 50 });
  
  // Add new water drop refs
  const bowlRef = useRef(null);
  const dropRef = useRef(null);

  const moodEffects = {
    calm: {
      background: 'bg-gradient-to-br from-blue-200 to-purple-200',
      icon: <Cloud className="w-12 h-12 text-blue-600" />,
      pattern: 'floating-particles',
    },
    energetic: {
      background: 'bg-gradient-to-br from-yellow-200 to-red-200',
      icon: <Sun className="w-12 h-12 text-yellow-600" />,
      pattern: 'rising-particles',
    },
    focused: {
      background: 'bg-gradient-to-br from-emerald-200 to-teal-200',
      icon: <Brain className="w-12 h-12 text-emerald-600" />,
      pattern: 'network-grid',
    },
    dreamy: {
      background: 'bg-gradient-to-br from-indigo-200 to-purple-200',
      icon: <Moon className="w-12 h-12 text-indigo-600" />,
      pattern: 'starry-night',
    },
    dynamic: {
      background: 'bg-gradient-to-br from-pink-200 to-orange-200',
      icon: <Wind className="w-12 h-12 text-pink-600" />,
      pattern: 'swirling-wind',
    }
  };

  const handleMoodChange = (mood) => {
    setIsTransitioning(true);
    setTimeout(() => {
      setCurrentMood(mood);
      setIsTransitioning(false);
    }, 500);
  };

  const handleBowlPress = (e) => {
    if (!bowlRef.current) return;
    
    const bowl = bowlRef.current.getBoundingClientRect();
    const x = ((e.touches?.[0]?.clientX || e.clientX) - bowl.left) / bowl.width * 100;
    const y = ((e.touches?.[0]?.clientY || e.clientY) - bowl.top) / bowl.height * 100;
    
    setIsPressed(true);
    setDropPosition({ x, y });
    
    // Create ripple effect
    const ripple = document.createElement('div');
    ripple.className = 'ripple absolute rounded-full bg-white/30';
    ripple.style.left = `${x}%`;
    ripple.style.top = `${y}%`;
    bowlRef.current.appendChild(ripple);
    
    setTimeout(() => {
      ripple.remove();
      setIsPressed(false);
    }, 1000);
  };

  return (
    <div className="h-screen w-full overflow-hidden">
      <div
        className={`relative h-full w-full transition-all duration-500 ease-in-out ${
          moodEffects[currentMood].background
        } ${isTransitioning ? 'scale-105 opacity-0' : 'scale-100 opacity-100'}`}
      >
        {/* Dynamic Background Effects */}
        <div className={`absolute inset-0 ${moodEffects[currentMood].pattern}`}>
          <BackgroundEffect pattern={moodEffects[currentMood].pattern} />
        </div>

        {/* Add Water Bowl */}
        <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 z-20 flex justify-center items-center p-4">
          <div
            ref={bowlRef}
            onTouchStart={handleBowlPress}
            onClick={handleBowlPress}
            className="relative w-64 h-64 rounded-full bg-gradient-to-br from-white/10 to-white/30 backdrop-blur-lg 
              shadow-[0_0_15px_rgba(255,255,255,0.3)] overflow-hidden cursor-pointer"
            style={{
              background: 'linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1))',
            }}
          >
            {/* Glass Highlight */}
            <div className="absolute -left-1/4 -top-1/4 w-1/2 h-1/2 bg-white/20 rounded-full blur-md transform rotate-45" />
            
            {/* Water Drop */}
            <div
              ref={dropRef}
              className={`absolute w-8 h-8 transition-all duration-300 ease-out
                ${isPressed ? 'scale-150 opacity-70' : 'scale-100 opacity-90'}`}
              style={{
                left: `${dropPosition.x}%`,
                top: `${dropPosition.y}%`,
                transform: 'translate(-50%, -50%)',
              }}
            >
              <div className="relative w-full h-full">
                {/* Main Drop */}
                <div className="absolute inset-0 bg-gradient-to-b from-blue-300/80 to-blue-500/80 rounded-full 
                  shadow-lg animate-bounce">
                  {/* Drop Highlight */}
                  <div className="absolute top-1 left-1 w-2 h-2 bg-white/70 rounded-full" />
                </div>
              </div>
            </div>

            {/* Bowl Surface Reflection */}
            <div className="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/20 to-transparent" />
          </div>
        </div>

        {/* Content */}
        <div className="relative z-10 h-full flex flex-col items-center justify-between p-6">
          <div className="mt-8 transform transition-transform duration-300">
            {moodEffects[currentMood].icon}
          </div>
          
          <div className="grid grid-cols-2 gap-4 w-full max-w-xs mb-8">
            {Object.keys(moodEffects).map((mood) => (
              <button
                key={mood}
                onClick={() => handleMoodChange(mood)}
                className={`p-4 rounded-xl backdrop-blur-sm transition-all duration-300
                  ${
                    currentMood === mood
                      ? 'bg-white/30 shadow-lg scale-105'
                      : 'bg-white/10 hover:bg-white/20'
                  }
                `}
              >
                <span className="capitalize text-gray-800 font-medium">
                  {mood}
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Add new styles */}
      <style jsx>{`
        .ripple {
          width: 2px;
          height: 2px;
          transform: translate(-50%, -50%);
          animation: ripple-effect 1s ease-out forwards;
        }

        @keyframes ripple-effect {
          0% {
            width: 2px;
            height: 2px;
            opacity: 1;
          }
          100% {
            width: 300px;
            height: 300px;
            opacity: 0;
          }
        }
      `}</style>
    </div>
  );
}

const BackgroundEffect = ({ pattern }) => {
  const [particles, setParticles] = useState([]);

  useEffect(() => {
    const generateParticles = () => {
      return Array.from({ length: 50 }, (_, i) => ({
        id: i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: Math.random() * 4 + 1,
        speed: Math.random() * 2 + 0.5,
      }));
    };

    setParticles(generateParticles());
  }, [pattern]);

  return (
    <div className="absolute inset-0 overflow-hidden">
      {particles.map((particle) => (
        <div
          key={particle.id}
          className="absolute rounded-full bg-white/20"
          style={{
            left: `${particle.x}%`,
            top: `${particle.y}%`,
            width: `${particle.size}px`,
            height: `${particle.size}px`,
            animation: `${pattern} ${particle.speed}s infinite linear`,
          }}
        />
      ))}
      <style jsx>{`
        @keyframes floating-particles {
          0% { transform: translate(0, 0); }
          50% { transform: translate(10px, -10px); }
          100% { transform: translate(0, 0); }
        }
        @keyframes rising-particles {
          0% { transform: translateY(100%); }
          100% { transform: translateY(-100%); }
        }
        @keyframes network-grid {
          0% { transform: scale(1); }
          50% { transform: scale(1.1); }
          100% { transform: scale(1); }
        }
        @keyframes starry-night {
          0% { opacity: 0.4; }
          50% { opacity: 1; }
          100% { opacity: 0.4; }
        }
        @keyframes swirling-wind {
          0% { transform: rotate(0deg) translateX(10px); }
          100% { transform: rotate(360deg) translateX(10px); }
        }
      `}</style>
    </div>
  );
};