import React, { useState, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { 
  Calendar, 
  MapPin, 
  Heart, 
  MessageCircle, 
  Copy, 
  Check, 
  Music, 
  Music2, 
  Clock, 
  ChevronDown 
} from 'lucide-react';

// --- Components ---

const Countdown = ({ targetDate }: { targetDate: Date }) => {
  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });

  useEffect(() => {
    const timer = setInterval(() => {
      const now = new Date().getTime();
      const difference = targetDate.getTime() - now;

      if (difference > 0) {
        setTimeLeft({
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
          seconds: Math.floor((difference / 1000) % 60)
        });
      }
    }, 1000);
    return () => clearInterval(timer);
  }, [targetDate]);

  return (
    <div className="flex justify-center space-x-4">
      {[
        { label: 'Hari', value: timeLeft.days },
        { label: 'Jam', value: timeLeft.hours },
        { label: 'Menit', value: timeLeft.minutes },
        { label: 'Detik', value: timeLeft.seconds }
      ].map((item, idx) => (
        <div key={idx} className="flex flex-col items-center">
          <div className="w-16 h-16 md:w-20 md:h-20 glass rounded-2xl flex items-center justify-center text-xl md:text-3xl font-bold text-amber-800 shadow-sm border border-amber-100">
            {item.value}
          </div>
          <span className="mt-2 text-[10px] md:text-xs font-semibold text-slate-500 uppercase tracking-widest">{item.label}</span>
        </div>
      ))}
    </div>
  );
};

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [copied, setCopied] = useState<string | null>(null);
  const audioRef = useRef<HTMLAudioElement | null>(null);

  const targetDate = new Date('2025-12-29T09:00:00');

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

  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopied(text);
    setTimeout(() => setCopied(null), 2000);
  };

  const handleOpen = () => {
    setIsOpen(true);
    setIsPlaying(true);
    if (audioRef.current) audioRef.current.play();
  };

  if (!isOpen) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900 overflow-hidden">
        <div className="absolute inset-0 opacity-40">
          <img src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&q=80" className="w-full h-full object-cover grayscale" alt="Cover" />
        </div>
        <div className="relative text-center px-4 animate-float">
          <p className="text-amber-200 uppercase tracking-[0.4em] text-sm mb-4">Undangan Pernikahan</p>
          <h1 className="text-white text-6xl md:text-8xl font-cursive mb-10">Ahmad & Anisah</h1>
          <button 
            onClick={handleOpen}
            className="bg-amber-500 hover:bg-amber-600 text-white px-10 py-4 rounded-full flex items-center gap-3 mx-auto transition-all shadow-2xl font-bold text-lg"
          >
            <Calendar className="w-5 h-5" /> Buka Undangan
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#faf9f6] selection:bg-amber-100">
      <audio ref={audioRef} loop src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" />
      
      {/* Floating Music Toggle */}
      <button 
        onClick={toggleMusic}
        className={`fixed bottom-6 right-6 z-40 w-12 h-12 rounded-full flex items-center justify-center transition-all shadow-xl ${isPlaying ? 'bg-amber-500 text-white' : 'bg-white text-slate-800'}`}
      >
        {isPlaying ? <Music className="animate-spin-slow" /> : <Music2 />}
      </button>

      {/* Hero Section */}
      <section className="h-screen relative flex flex-col items-center justify-center text-center px-6 overflow-hidden">
        <div className="absolute inset-0 opacity-5 pointer-events-none">
          <div className="absolute top-10 left-10 w-64 h-64 bg-amber-400 rounded-full blur-3xl"></div>
          <div className="absolute bottom-10 right-10 w-64 h-64 bg-amber-200 rounded-full blur-3xl"></div>
        </div>
        
        <div className="z-10 animate-float">
          <p className="text-amber-700 tracking-[0.5em] uppercase text-xs font-bold mb-6">The Wedding Of</p>
          <h1 className="text-7xl md:text-9xl font-cursive text-slate-800 mb-6">Ahmad & Anisah</h1>
          <div className="h-px w-24 bg-amber-400 mx-auto mb-8"></div>
          <p className="text-slate-600 font-serif text-xl md:text-3xl mb-12">29 . 12 . 2025</p>
          <Countdown targetDate={targetDate} />
        </div>
        
        <div className="absolute bottom-10 animate-bounce">
          <ChevronDown className="text-amber-600 w-8 h-8" />
        </div>
      </section>

      {/* Verse Section */}
      <section className="py-24 px-6 bg-white text-center">
        <div className="max-w-3xl mx-auto">
          <Heart className="w-10 h-10 text-amber-500 mx-auto mb-8 opacity-40" />
          <p className="text-xl italic text-slate-600 font-serif leading-relaxed">
            "Membangun keluarga adalah ibadah terpanjang. Kami memulainya dengan Bismillah, melangkah dengan keyakinan, dan menyatu dalam doa."
          </p>
        </div>
      </section>

      {/* Couple Section - Optimized for 3x4 photos */}
      <section className="py-24 px-6 max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-16 md:gap-32">
          {/* Groom */}
          <div className="text-center group">
            <div className="relative inline-block mb-10">
              <div className="absolute -inset-3 border-2 border-amber-200 rounded-2xl rotate-3 group-hover:rotate-0 transition-all duration-700"></div>
              {/* Photo 3x4 Placeholder */}
              <div className="w-56 h-72 md:w-64 md:h-80 bg-slate-200 rounded-xl shadow-2xl relative z-10 overflow-hidden">
                <img 
                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop" 
                  className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-1000" 
                  alt="Ahmad" 
                />
              </div>
            </div>
            <h2 className="text-4xl font-cursive text-amber-900 mb-2">Ahmad Askhabul Yamin</h2>
            <p className="text-slate-500 font-medium mb-4">Putra dari</p>
            <p className="text-slate-800 font-serif text-lg">Bpk Moh. Hasan & Ibu Sofiah</p>
          </div>

          {/* Bride */}
          <div className="text-center group">
            <div className="relative inline-block mb-10">
              <div className="absolute -inset-3 border-2 border-amber-200 rounded-2xl -rotate-3 group-hover:rotate-0 transition-all duration-700"></div>
              {/* Photo 3x4 Placeholder */}
              <div className="w-56 h-72 md:w-64 md:h-80 bg-slate-200 rounded-xl shadow-2xl relative z-10 overflow-hidden">
                <img 
                  src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1974&auto=format&fit=crop" 
                  className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-1000" 
                  alt="Anisah" 
                />
              </div>
            </div>
            <h2 className="text-4xl font-cursive text-amber-900 mb-2">Anisah Permata Sari</h2>
            <p className="text-slate-500 font-medium mb-4">Putri dari</p>
            <p className="text-slate-800 font-serif text-lg">Bpk Siman & Ibu Titin</p>
          </div>
        </div>
      </section>

      {/* Event Details */}
      <section className="py-24 px-6 bg-slate-900 text-white relative overflow-hidden">
        <div className="max-w-4xl mx-auto relative z-10 text-center">
          <h2 className="text-5xl font-cursive text-amber-400 mb-16">Acara Pernikahan</h2>
          
          <div className="glass text-slate-800 p-8 md:p-16 rounded-[40px] shadow-2xl">
            <Calendar className="w-12 h-12 text-amber-600 mx-auto mb-6" />
            <h3 className="text-3xl font-serif font-bold mb-2">Akad Nikah</h3>
            <p className="text-amber-700 font-bold tracking-[0.2em] mb-10">SENIN, 29 DESEMBER 2025</p>
            
            <div className="grid md:grid-cols-2 gap-8 mb-12">
              <div className="flex items-center justify-center gap-4">
                <Clock className="text-amber-600" />
                <span className="font-semibold text-lg">09.00 WIB - Selesai</span>
              </div>
              <div className="flex items-center justify-center gap-4">
                <MapPin className="text-amber-600" />
                <span className="font-semibold text-lg text-left">Wonogiri, Jawa Tengah</span>
              </div>
            </div>

            <p className="text-slate-600 mb-12 leading-relaxed italic">
              "Kami mengundang kehadiran Bapak/Ibu/Saudara/i untuk menyaksikan momen suci penyatuan cinta kami."
            </p>

            <a 
              href="https://www.google.com/maps/@-7.8186481,111.2283822,3a,75y,227.1h,90t/data=!3m7!1e1!3m5!1sSSpFLhRnf46o7q6viYllbA!2e0"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-3 bg-amber-500 text-white px-10 py-4 rounded-full font-bold hover:bg-amber-600 transition-all shadow-lg"
            >
              <MapPin className="w-5 h-5" /> Buka Lokasi Maps
            </a>
          </div>
        </div>
      </section>

      {/* Wedding Gift */}
      <section className="py-24 px-6 text-center">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-4xl font-cursive text-amber-900 mb-8">Kado Digital</h2>
          <p className="text-slate-500 mb-12 italic">Doa restu Anda adalah hadiah terindah. Namun jika ingin memberikan tanda kasih secara digital, dapat melalui:</p>
          
          <div className="grid md:grid-cols-2 gap-8">
            {/* Account 1 */}
            <div className="bg-white p-8 rounded-3xl shadow-lg border border-slate-100">
              <p className="text-sm font-bold text-amber-700 mb-4 tracking-widest">BCA - AHMAD ASKHABUL YAMIN</p>
              <div className="flex items-center justify-center gap-4">
                <span className="text-2xl font-mono font-bold text-slate-800">3452812212</span>
                <button onClick={() => handleCopy('3452812212')} className="p-2 bg-slate-50 rounded-lg hover:bg-amber-50 transition-colors">
                  {copied === '3452812212' ? <Check className="text-green-500 w-5 h-5" /> : <Copy className="text-slate-400 w-5 h-5" />}
                </button>
              </div>
            </div>

            {/* Account 2 */}
            <div className="bg-white p-8 rounded-3xl shadow-lg border border-slate-100">
              <p className="text-sm font-bold text-amber-700 mb-4 tracking-widest">BCA - ANISAH PERMATA SARI</p>
              <div className="flex items-center justify-center gap-4">
                <span className="text-2xl font-mono font-bold text-slate-800">108286626</span>
                <button onClick={() => handleCopy('108286626')} className="p-2 bg-slate-50 rounded-lg hover:bg-amber-50 transition-colors">
                  {copied === '108286626' ? <Check className="text-green-500 w-5 h-5" /> : <Copy className="text-slate-400 w-5 h-5" />}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RSVP */}
      <section className="py-24 px-6 bg-amber-50 text-center">
        <div className="max-w-2xl mx-auto">
          <h2 className="text-4xl font-cursive text-amber-900 mb-8">Kehadiran</h2>
          <p className="text-slate-600 mb-12">Mohon konfirmasi kehadiran Anda melalui WhatsApp di bawah ini:</p>
          <a 
            href="https://wa.me/081292650734?text=Halo Ahmad & Anisah, Saya akan hadir di hari bahagia kalian!"
            className="inline-flex items-center gap-4 bg-[#25D366] text-white px-12 py-5 rounded-full font-bold text-xl hover:scale-105 transition-transform shadow-xl"
          >
            <MessageCircle className="w-6 h-6" /> Konfirmasi WhatsApp
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-20 text-center bg-white">
        <p className="font-cursive text-4xl text-amber-800 mb-4">Ahmad & Anisah</p>
        <p className="text-slate-400 text-xs tracking-[0.5em] uppercase">Sampai Jumpa di Hari Bahagia Kami</p>
      </footer>
    </div>
  );
};

const root = createRoot(document.getElementById('root')!);
root.render(<App />);