import { useState, useRef, useEffect } from 'react';
import { Heart, Volume2, VolumeX } from 'lucide-react';

export default function EnhancedLoveLetter() {
  const [isOpen, setIsOpen] = useState(false);
  const [isClosing, setIsClosing] = useState(false);
  const [isMuted, setIsMuted] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [showHearts, setShowHearts] = useState(false);
  const audioRef = useRef(null);

  // Convert Google Drive link to direct link
  const googleDriveImageId = "1CxBKovwF_K2Enol_d9KIhAUX0bjxi1_n";
  const directImageUrl = `https://drive.google.com/uc?export=view&id=${googleDriveImageId}`;

  useEffect(() => {
    // Load confetti dynamically
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js';
    document.body.appendChild(script);

    // Preload audio
    if (audioRef.current) {
      audioRef.current.load();
    }

    setTimeout(() => {
      setIsLoading(false);
      setShowHearts(true);
    }, 1500);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const handleOpen = () => {
    if (!isOpen && window.confetti) {
      setIsOpen(true);
      window.confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 }
      });
    }
  };

  const handleClose = () => {
    setIsClosing(true);
    setTimeout(() => {
      setIsOpen(false);
      setIsClosing(false);
    }, 1000);
  };

  const toggleSound = async () => {
    try {
      if (audioRef.current) {
        if (isMuted) {
          // Play with user interaction
          const playPromise = audioRef.current.play();
          if (playPromise !== undefined) {
            await playPromise;
          }
        } else {
          audioRef.current.pause();
        }
        setIsMuted(!isMuted);
      }
    } catch (error) {
      console.error("Audio playback error:", error);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-100 to-red-100 flex items-center justify-center p-8 overflow-hidden">
      <audio
        ref={audioRef}
        preload="auto"
        loop
      >
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg" />
        {/* Fallback romantic song */}
        <source src="https://www.chosic.com/wp-content/uploads/2024/01/romantic-song.mp3" type="audio/mpeg" />
      </audio>
      
      {/* Loading Animation */}
      {isLoading && (
        <div className="fixed inset-0 bg-white z-50 flex items-center justify-center">
          <Heart className="w-16 h-16 text-red-500 animate-pulse" fill="currentColor" />
        </div>
      )}

      {/* Floating Hearts Background */}
      {showHearts && (
        <div className="fixed inset-0 pointer-events-none">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="absolute animate-float"
              style={{
                left: `${Math.random() * 100}%`,
                top: `${Math.random() * 100}%`,
                animation: `float ${5 + Math.random() * 10}s linear infinite`,
                opacity: 0.1 + Math.random() * 0.3,
                transform: `scale(${0.5 + Math.random()})`,
              }}
            >
              <Heart className="w-8 h-8 text-red-300" fill="currentColor" />
            </div>
          ))}
        </div>
      )}

      {/* Sound Control with improved visibility and feedback */}
      <button 
        onClick={toggleSound}
        className="fixed top-4 right-4 p-3 bg-white/90 backdrop-blur-sm rounded-full shadow-lg hover:scale-110 
                 transition-all duration-300 z-40 hover:bg-red-50"
      >
        {isMuted ? 
          <VolumeX className="w-6 h-6 text-red-500" /> : 
          <Volume2 className="w-6 h-6 text-red-500 animate-pulse" />
        }
      </button>

      <style>
        {`
          @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Great+Vibes&display=swap');
          
          @keyframes float {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
          }

          .envelope-shadow {
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
          }

          .letter-shadow {
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
          }

          .hover-lift {
            transition: transform 0.3s ease;
          }

          .hover-lift:hover {
            transform: translateY(-5px);
          }
        `}
      </style>

      <div className="relative" style={{ perspective: '2000px' }}>
        {/* Envelope */}
        <div 
          className={`cursor-pointer transition-all duration-500 envelope-shadow
            ${isOpen ? 'scale-95' : 'scale-100 hover:scale-105'}`}
          style={{ transformStyle: 'preserve-3d' }}
          onClick={handleOpen}
        >
          {/* Envelope Body */}
          <div className="w-[800px] h-[400px] bg-gradient-to-br from-red-200 to-pink-200 rounded-lg relative overflow-hidden border-2 border-red-300">
            {/* Envelope Flap */}
            <div 
              className={`absolute w-full h-[200px] bg-gradient-to-br from-red-300 to-pink-300 origin-top 
                transition-transform duration-1000 ease-in-out z-30`}
              style={{ 
                transform: isOpen || isClosing ? 'rotateX(180deg)' : 'rotateX(0deg)',
                transformOrigin: 'top',
                clipPath: 'polygon(0 0, 50% 50%, 100% 0)'
              }}
            />
            
            {/* Heart Icon */}
            <div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 
              transition-all duration-500 z-20 ${isOpen ? 'opacity-0 scale-150' : 'opacity-100 scale-100'}`}>
              <Heart className="w-20 h-20 text-red-500 transition-transform hover:scale-110" fill="currentColor" />
            </div>
          </div>

          {/* Letter Content */}
          <div 
            className="letter-content absolute bg-white rounded-lg letter-shadow"
            style={{
              width: '750px',
              height: isOpen ? '380px' : '0px',
              top: '50%',
              left: '50%',
              transform: isOpen && !isClosing
                ? 'translate(-50%, -50%) translateY(-80px) rotateX(0deg)' 
                : 'translate(-50%, -50%) translateY(0) rotateX(-90deg)',
              opacity: isOpen && !isClosing ? 1 : 0,
              zIndex: isOpen ? 10 : -1,
              transformStyle: 'preserve-3d',
              transition: 'all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)',
            }}
          >
            <div className="flex h-full p-6">
              {/* Updated Image Section with Google Drive Image */}
              <div className="w-1/3 pr-6">
                <div className="h-full overflow-hidden rounded-lg shadow-lg transition-transform hover:scale-[1.02] duration-300">
                  <img 
                    src={directImageUrl}
                    alt="Romantic"
                    className="w-full h-full object-cover"
                    onError={(e) => {
                      e.target.onerror = null; // Prevent infinite loop
                      e.target.src = "https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"; // Fallback image
                    }}
                  />
                </div>
              </div>

              {/* Text Content */}
              <div className="w-2/3 space-y-4 text-gray-800">
                <p className="font-medium text-3xl text-red-500 hover:text-red-600 transition-colors" 
                   style={{ fontFamily: 'Great Vibes' }}>
                  My Love Reemchuu,
                </p>
                
                <p className="text-lg leading-relaxed hover:text-gray-700 transition-colors" 
                   style={{ fontFamily: 'Dancing Script' }}>
                  Even though we're miles apart, you're always in my heart. I miss your smile, your voice, and the warmth you bring to my life. Each day without you is hard, but thoughts of you keep me strong.
                </p>
                
                <p className="text-lg leading-relaxed hover:text-gray-700 transition-colors" 
                   style={{ fontFamily: 'Dancing Script' }}>
                  I dream of the day I can hold you again, but until then, know that my love for you grows with every passing moment. No distance could ever change how much you mean to me.
                </p>
                
                <p className="text-right font-medium text-red-500 text-2xl mt-4 hover:text-red-600 transition-colors" 
                   style={{ fontFamily: 'Great Vibes' }}>
                  Yours, always and forever,<br/>
                  Baby :)
                </p>

                {/* Close Button */}
                <div className="flex justify-center mt-4">
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handleClose();
                    }}
                    className="transform transition-all duration-300 hover:scale-110 focus:outline-none 
                             hover:rotate-12 active:scale-95"
                  >
                    <Heart 
                      className="w-10 h-10 text-red-500 transition-all duration-300 hover:text-red-600" 
                      fill="currentColor"
                    />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}