import React, { useState, useEffect, useRef } from 'react';
import { Heart, Gift, Clock, Home, Sparkles, Star, ShoppingBag, MapPin, Volume2, VolumeX, Mail, Flower2, Cake } from 'lucide-react';

const App = () => {
  const [page, setPage] = useState('landing');
  const [candleLit, setCandleLit] = useState(true);
  const [isPlaying, setIsPlaying] = useState(false);
  const [showContent, setShowContent] = useState(false);
  const audioRef = useRef(null);

  useEffect(() => {
    setShowContent(true);
  }, []);

  // Function to handle candle blowing and starting music
  const handleBlowCandle = () => {
    if (!candleLit) return;
    setCandleLit(false);
    // Play music when candle is blown (user interaction triggered)
    if (audioRef.current && !isPlaying) {
      audioRef.current.play().catch(e => console.log("Autoplay blocked"));
      setIsPlaying(true);
    }
  };

  const toggleMusic = () => {
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.pause();
      } else {
        audioRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  const mesaMallActivities = [
    { name: 'Boost Juice', icon: '🥤', desc: 'Air fav Mia untuk chill.' },
    { name: 'Bungkus Kaw Kaw', icon: '🍱', desc: 'Lunch kaw-kaw punya!' },
    { name: 'Aktiviti Bebas', icon: '🎨', desc: 'Masa untuk cuci mata.' },
    { name: 'Family Mart', icon: '🍦', desc: 'Oden & Sofuto is a must!' },
    { name: 'CU Mart', icon: '🇰🇷', desc: 'Korean snacks haul.' },
    { name: 'myNews', icon: '🗞️', desc: 'Grab jajan jap.' },
    { name: 'Guardian', icon: '💄', desc: 'Self-care & makeup haul!' }
  ];

  // Landing Page: Meriah Coquette Style
  const LandingPage = () => (
    <div className="min-h-screen flex flex-col items-center justify-center p-6 text-center bg-[#fff5f7] relative overflow-hidden">
      {/* Decorative Elements */}
      <div className="absolute top-10 left-10 text-pink-200 animate-pulse text-6xl select-none">🎀</div>
      <div className="absolute top-20 right-20 text-pink-100 text-5xl select-none">🌸</div>
      <div className="absolute bottom-20 left-20 text-pink-100 text-5xl rotate-12 select-none">🌸</div>
      <div className="absolute bottom-10 right-10 text-pink-200 animate-bounce text-6xl select-none">🎀</div>
      <div className="absolute top-1/2 left-4 text-pink-200 opacity-40 text-4xl"><Flower2 /></div>
      <div className="absolute top-1/3 right-4 text-pink-200 opacity-40 text-4xl"><Heart fill="currentColor" /></div>
      
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#ffb7c5 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>

      <div className={`transition-all duration-1000 z-10 ${showContent ? 'scale-100 opacity-100' : 'scale-90 opacity-0'}`}>
        <div className="inline-block mb-4 px-4 py-1 bg-white/60 border border-pink-200 rounded-full text-pink-400 text-[10px] tracking-[0.2em] uppercase font-bold">
          ✨ 31 . 12 . 2012 ✨
        </div>
        
        <h2 className="text-pink-400 font-serif italic text-4xl mb-8 drop-shadow-sm">Sweet 13 Princess 🎀</h2>
        
        <div className="relative mb-12 cursor-pointer group transform hover:scale-105 transition-transform" onClick={handleBlowCandle}>
          <div className="text-[10rem] sm:text-[12rem] leading-none drop-shadow-xl select-none">🎂</div>
          {candleLit && (
            <div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
              <div className="w-6 h-10 bg-gradient-to-t from-orange-500 to-yellow-300 rounded-full blur-[1px] shadow-[0_0_20px_#ff9800]"></div>
            </div>
          )}
          {!candleLit && (
            <div className="absolute -top-8 left-1/2 -translate-x-1/2 text-pink-400 font-bold animate-fade-out italic whitespace-nowrap">
              ✨ Wish Granted! ✨
            </div>
          )}
        </div>

        <p className="text-pink-400 font-medium mb-10 max-w-xs mx-auto bg-white/40 py-2 px-6 rounded-full backdrop-blur-sm border border-pink-100">
          {candleLit ? "Tap kek untuk tiup lilin! 🕯️" : "Omg yeay! Happy birthday Mia! 💖"}
        </p>

        {!candleLit && (
          <button 
            onClick={() => setPage('gift')}
            className="group px-8 py-4 bg-pink-400 text-white rounded-full shadow-[0_10px_20px_rgba(244,114,182,0.3)] hover:bg-pink-500 transition-all animate-bounce flex items-center gap-3 mx-auto"
          >
            <span className="font-bold text-lg tracking-wide font-serif">Buka Gift Dari Kakak</span> 
            <Gift size={24} className="group-hover:rotate-12 transition-transform" />
          </button>
        )}
      </div>
    </div>
  );

  const GiftPage = () => (
    <div className="min-h-screen flex flex-col items-center justify-center bg-[#fff5f7] p-6 relative overflow-hidden">
      <div className="absolute inset-0 opacity-10 pointer-events-none flex flex-wrap justify-around">
        {[...Array(20)].map((_, i) => <Heart key={i} size={40} className="text-pink-300 m-4" fill="currentColor" />)}
      </div>
      <div className="text-center relative z-10">
        <div className="absolute -top-20 -left-10 text-pink-200 text-8xl opacity-30 select-none">🎀</div>
        <h2 className="text-3xl font-serif text-pink-500 mb-12 italic tracking-tight">Ehem, Kakak ada something untuk Mia... 🧸</h2>
        <div 
          onClick={() => setPage('letter')}
          className="text-[10rem] cursor-pointer hover:scale-110 transition-transform active:scale-95 animate-pulse drop-shadow-2xl select-none"
        >
          🎁
        </div>
        <p className="mt-12 text-pink-300 font-bold uppercase tracking-[0.2em] text-sm animate-bounce">Klik kotak ni tau!</p>
      </div>
    </div>
  );

  const LetterPage = () => (
    <div className="min-h-screen flex flex-col items-center justify-center bg-[#fffdfa] p-6 relative overflow-hidden">
      <div className="max-w-md w-full bg-white p-8 md:p-10 rounded-[2.5rem] shadow-[0_20px_50px_rgba(255,182,193,0.2)] border-t-[12px] border-pink-300 relative">
        <div className="absolute -top-2 -right-2 text-5xl select-none">🎀</div>
        <div className="absolute -bottom-4 -left-4 text-pink-50 opacity-20 text-[10rem] rotate-12 pointer-events-none">
          <Heart fill="currentColor" />
        </div>
        
        <h3 className="text-3xl font-serif text-pink-400 mb-6 italic border-b border-pink-50 pb-2">Happy 13th, Mia! 🎂</h3>
        
        <div className="text-gray-600 leading-relaxed space-y-5 font-medium z-10 relative text-sm md:text-base">
          <p>Fuyoo, dah jadi teenager ehh? Pejam celik je dah besar Mia ni. Rasa macam baru semalam je Mia lahir. 🥹</p>
          <p>Harini harinya Mia, so no stress-stress tau! Enjoy gila-gila harini. Moga makin cantik, makin bijak, and stay comel macam selalu. Walaupun kita selalu gaduh-gaduh manja, Mia tetap adik Kakak yang paling Kakak sayang!</p>
          <p>Jom kita pusing-pusing harini, kita buat harini jadi hari paling best untuk Mia. Love ya baby sister! ✨💖</p>
        </div>
        
        <div className="mt-12 pt-8 border-t border-pink-100 flex flex-col items-center">
          <p className="text-[10px] text-pink-300 mb-5 font-bold uppercase tracking-widest text-center">Click sampul ni untuk check plan harini 👇</p>
          <button 
            onClick={() => setPage('itinerary')}
            className="w-20 h-20 bg-pink-50 rounded-full flex items-center justify-center text-pink-400 hover:bg-pink-100 transition-all shadow-inner border border-pink-100 group"
          >
            <Mail size={36} className="group-hover:scale-110 transition-transform" />
          </button>
        </div>
      </div>
    </div>
  );

  const ItineraryPage = () => (
    <div className="min-h-screen bg-[#fffdfa] p-4 md:p-10 pb-32">
      <div className="max-w-2xl mx-auto">
        <header className="text-center mb-14">
          <div className="inline-block p-2 px-6 bg-pink-100 rounded-full text-pink-500 text-[10px] font-bold mb-4 shadow-sm border border-pink-200 tracking-widest uppercase">
              🎀 FOR MIA ONLY 🎀
          </div>
          <h2 className="text-4xl md:text-5xl font-serif text-gray-800 tracking-tight text-center">Tentatif Harini</h2>
          <div className="w-24 h-1.5 bg-pink-200 mx-auto mt-6 rounded-full"></div>
        </header>

        <div className="flex items-center gap-4 mb-10 bg-white p-5 rounded-3xl border border-pink-100 shadow-[0_4px_15px_rgba(255,182,193,0.1)]">
          <div className="bg-pink-400 p-2 rounded-xl text-white"><Clock size={20} /></div>
          <span className="font-bold text-gray-700">Mula pusing pukul: 10:00 AM</span>
        </div>

        <section className="mb-14">
          <h3 className="flex items-center gap-3 text-2xl font-bold text-pink-600 mb-8 font-serif">
            <ShoppingBag size={28} /> Mesa Mall Stops
          </h3>
          <div className="grid gap-4">
            {mesaMallActivities.map((act, idx) => (
              <div key={idx} className="flex items-center gap-5 p-4 bg-white rounded-[2rem] shadow-sm border border-transparent hover:border-pink-200 hover:shadow-md transition-all group">
                <div className="text-2xl bg-pink-50 w-14 h-14 flex items-center justify-center rounded-2xl group-hover:scale-110 transition-transform">{act.icon}</div>
                <div className="flex-1">
                  <h4 className="font-bold text-gray-800 text-sm md:text-base">{act.name}</h4>
                  <p className="text-[10px] text-pink-300 font-medium uppercase tracking-wider mt-1">{act.desc}</p>
                </div>
                <div className="text-pink-100 group-hover:text-pink-300 transition-colors">
                  <Heart size={18} fill="currentColor" />
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-14">
          <h3 className="flex items-center gap-3 text-2xl font-bold text-pink-600 mb-8 font-serif">
            <Sparkles size={28} /> Surprise Kat AEON!
          </h3>
          <div className="bg-gradient-to-br from-pink-400 to-pink-300 p-8 rounded-[2.5rem] shadow-xl text-white relative overflow-hidden text-center">
            <div className="absolute -top-4 -right-4 text-white opacity-20 text-9xl rotate-12 select-none pointer-events-none">🎀</div>
            <p className="text-lg font-medium mb-6 relative z-10 italic">Ada benda manis menanti...</p>
            <div className="flex flex-wrap justify-center gap-3 relative z-10">
              {['Llaollao 🍦', 'NS Fest 🥨'].map((item, i) => (
                <span key={i} className="px-6 py-3 bg-white/20 backdrop-blur-md text-white rounded-2xl text-xs font-bold border border-white/30 shadow-sm">
                  {item}
                </span>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-gray-800 p-8 rounded-[2.5rem] text-white text-center shadow-2xl relative overflow-hidden">
          <div className="absolute inset-0 bg-pink-500/10 opacity-50"></div>
          <h4 className="text-2xl font-bold font-serif mb-2 relative z-10">Balik & Rehat</h4>
          <p className="opacity-70 text-sm relative z-10">Estimasi pukul 2:00 PM</p>
          <div className="mt-4 text-3xl relative z-10">🏠💖</div>
        </section>

        <footer className="mt-20 text-center opacity-30 text-[8px] italic font-bold tracking-[0.4em] uppercase pb-10">
            Made with love by Kakak for Mia 🎀
        </footer>
      </div>

      <button 
        onClick={() => setPage('landing')}
        className="fixed bottom-6 left-6 p-4 bg-white shadow-2xl rounded-full text-pink-400 border border-pink-100 hover:scale-110 transition-all z-50 flex items-center justify-center"
      >
        <Home size={24} />
      </button>
    </div>
  );

  return (
    <div className="min-h-screen font-sans text-[#4a4a4a] selection:bg-pink-100 bg-[#fff5f7]">
      <style>
        {`
          @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@200..800&display=swap');
          
          body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #fff5f7; 
            margin: 0;
            padding: 0;
          }
          
          .font-serif { 
            font-family: 'Playfair Display', serif; 
          }

          @keyframes fade-out { 
            from { opacity: 1; transform: translate(-50%, 0); } 
            to { opacity: 0; transform: translate(-50%, -40px); } 
          }
          
          .animate-fade-out { 
            animation: fade-out 1.5s ease-out forwards; 
          }

          ::-webkit-scrollbar {
            display: none;
          }

          body {
            -ms-overflow-style: none;
            scrollbar-width: none;
          }
        `}
      </style>

      {/* Music Control */}
      <div className="fixed top-6 right-6 z-50">
        <button 
          onClick={toggleMusic} 
          className="flex items-center gap-3 bg-white/90 backdrop-blur-md p-2 md:p-3 px-4 md:px-5 rounded-full shadow-lg border border-pink-100 text-pink-400 hover:text-pink-500 transition-all hover:scale-105 active:scale-95"
        >
          {isPlaying ? <Volume2 size={20} className="animate-pulse" /> : <VolumeX size={20} />}
          <span className="text-[10px] font-bold uppercase tracking-widest hidden sm:inline">{isPlaying ? "Music On" : "Music Off"}</span>
        </button>
        <audio 
          ref={audioRef}
          loop
          src="https://www.chosic.com/wp-content/uploads/2021/04/Happy-Birthday-Piano-Version.mp3" 
        />
      </div>

      {/* Page Transitions */}
      <div className="animate-in fade-in duration-500">
        {page === 'landing' && <LandingPage />}
        {page === 'gift' && <GiftPage />}
        {page === 'letter' && <LetterPage />}
        {page === 'itinerary' && <ItineraryPage />}
      </div>
    </div>
  );
};

export default App;