import React, { useState, useEffect, useCallback } from 'react';
import { Gift, Baby, User, Calendar, Trophy, Users, Heart, CheckCircle2, Timer, Sparkles, X, Mars, Venus, Cloud, Facebook, Instagram, MessageCircle, Info } from 'lucide-react';

const App = () => {
  // Demo iştirakçılar (Azərbaycan dilində)
  const [participants, setParticipants] = useState([
    { nickname: 'MaviBulud', id: 1, gender: 'boy' },
    { nickname: 'BalacaQuzu', id: 2, gender: 'girl' },
    { nickname: 'Gülüş', id: 3, gender: 'girl' },
    { nickname: 'DənizUlduzu', id: 4, gender: 'boy' },
    { nickname: 'BalArısı', id: 5, gender: 'girl' },
    { nickname: 'YuxuluPanda', id: 6, gender: 'boy' },
  ]);

  const [winners, setWinners] = useState([
    { nickname: 'PambıqŞəkər', date: '03.02.2024', gender: 'girl' },
    { nickname: 'BalacaŞahzadə', date: '27.01.2024', gender: 'boy' }
  ]);

  const [formData, setFormData] = useState({
    motherName: '',
    motherSurname: '',
    motherBirthDate: '',
    babyBirthDate: '',
    babyNickname: '',
    babyGender: '' // 'boy' or 'girl'
  });

  const [isDrawing, setIsDrawing] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);
  const [celebrationWinner, setCelebrationWinner] = useState(null);
  const [showCampaignModal, setShowCampaignModal] = useState(false);
  const [timeLeft, setTimeLeft] = useState(15); // Test üçün 15 saniyə

  const triggerAutoLottery = useCallback(() => {
    if (participants.length === 0) return;
    
    setIsDrawing(true);
    
    setTimeout(() => {
      const randomIndex = Math.floor(Math.random() * participants.length);
      const luckyWinner = participants[randomIndex];
      
      const newWinner = {
        nickname: luckyWinner.nickname,
        date: new Date().toLocaleDateString('az-AZ'),
        gender: luckyWinner.gender
      };
      
      setWinners(prev => [newWinner, ...prev]);
      setIsDrawing(false);
      setCelebrationWinner(newWinner);
    }, 5000);
  }, [participants]);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          triggerAutoLottery();
          return 604800; // 1 həftə
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, [triggerAutoLottery]);

  const formatTime = (seconds) => {
    const d = Math.floor(seconds / (3600 * 24));
    const h = Math.floor((seconds % (3600 * 24)) / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    return { d, h, m, s };
  };

  const time = formatTime(timeLeft);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.babyGender) {
      return;
    }
    const newParticipant = {
      nickname: formData.babyNickname,
      id: Date.now(),
      gender: formData.babyGender
    };
    setParticipants([newParticipant, ...participants]);
    setFormData({ 
      motherName: '', 
      motherSurname: '', 
      motherBirthDate: '', 
      babyBirthDate: '', 
      babyNickname: '', 
      babyGender: '' 
    });
    setShowSuccess(true);
    setTimeout(() => setShowSuccess(false), 3000);
  };

  return (
    <div className="min-h-screen bg-[#f0f7ff] font-sans text-slate-800 relative overflow-x-hidden flex flex-col">
      
      {/* KAMPANİYA MƏLUMAT MODALI */}
      {showCampaignModal && (
        <div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onClick={() => setShowCampaignModal(false)}></div>
          <div className="bg-white rounded-[2rem] shadow-2xl p-8 max-w-2xl w-full relative z-10 animate-in zoom-in duration-300">
            <button onClick={() => setShowCampaignModal(false)} className="absolute top-6 right-6 p-2 hover:bg-slate-100 rounded-full transition-colors"><X size={24} /></button>
            <div className="flex items-center gap-4 mb-6">
              <div className="p-4 bg-blue-100 text-blue-600 rounded-2xl"><Info size={32} /></div>
              <h2 className="text-2xl font-black">Kampaniya Şərtləri</h2>
            </div>
            <div className="space-y-4 text-slate-600 leading-relaxed overflow-y-auto max-h-[50vh] pr-2 custom-scrollbar">
              <p className="font-bold text-slate-800 text-lg">Ömürlük Bez Kampaniyası haqqında:</p>
              <ul className="space-y-3 list-disc pl-5">
                <li>Kampaniyada iştirak etmək üçün qeydiyyat formasını doldurmaq kifayətdir.</li>
                <li>Hər həftənin sonunda təsadüfi olaraq bir körpə "Ömürlük Bez" qalibi seçilir.</li>
                <li>Hədiyyə paketi körpənin 2 yaşı tamam olana qədər olan aylıq bez təminatını nəzərdə tutur.</li>
                <li>Qaliblərlə qeydiyyatda qeyd olunan ana məlumatları vasitəsilə əlaqə saxlanılır.</li>
              </ul>
            </div>
            <button onClick={() => setShowCampaignModal(false)} className="mt-8 w-full bg-blue-600 text-white font-bold py-4 rounded-xl hover:bg-blue-700 transition-colors">Bağla</button>
          </div>
        </div>
      )}

      {/* KUTLAMA MODALI */}
      {celebrationWinner && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-blue-900/80 backdrop-blur-md animate-in fade-in duration-500"></div>
          
          <div className="absolute inset-0 pointer-events-none overflow-hidden">
            {[...Array(50)].map((_, i) => (
              <div 
                key={i} 
                className="confetti" 
                style={{
                  left: `${Math.random() * 100}%`,
                  backgroundColor: ['#ffde59', '#ff914d', '#5271ff', '#ff5757', '#7ed957'][Math.floor(Math.random() * 5)],
                  animationDelay: `${Math.random() * 3}s`,
                  animationDuration: `${2 + Math.random() * 3}s`
                }}
              ></div>
            ))}
          </div>

          <div className={`bg-white rounded-[2rem] md:rounded-[3rem] shadow-[0_0_100px_rgba(255,255,255,0.3)] p-6 md:p-12 max-w-lg w-full text-center relative z-10 animate-in zoom-in duration-500 border-4 ${celebrationWinner.gender === 'girl' ? 'border-pink-300' : 'border-blue-300'}`}>
            <button 
              onClick={() => setCelebrationWinner(null)}
              className="absolute top-4 right-4 md:top-6 md:right-6 p-2 hover:bg-slate-100 rounded-full transition-colors text-slate-400"
            >
              <X size={24} />
            </button>

            <div className="flex justify-center mb-6">
              <div className="relative">
                <Trophy size={80} className="text-yellow-500 animate-bounce" />
                <Sparkles className="absolute -top-4 -right-4 text-orange-400 animate-pulse" size={30} />
              </div>
            </div>

            <h2 className="text-xs md:text-sm uppercase tracking-[0.3em] font-black text-blue-600 mb-2">Həftəlik Qalib!</h2>
            <div className={`text-3xl md:text-5xl font-black mb-6 drop-shadow-sm tracking-tight ${celebrationWinner.gender === 'girl' ? 'text-pink-500' : 'text-blue-600'}`}>
              {celebrationWinner.nickname}
            </div>
            
            <div className="bg-slate-50 rounded-3xl p-4 md:p-6 mb-8 border border-slate-100">
              <p className="text-slate-600 font-medium leading-relaxed text-sm md:text-base">
                Təbrik edirik! Bu həftənin şanslı körpəsi siz oldunuz. Komandamız ana ilə əlaqə saxlayacaq.
              </p>
            </div>

            <button 
              onClick={() => setCelebrationWinner(null)}
              className="w-full bg-gradient-to-r from-yellow-400 to-orange-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-orange-200 hover:scale-105 transition-transform"
            >
              ƏLA!
            </button>
          </div>
        </div>
      )}

      {/* Header */}
      <header className="bg-gradient-to-r from-blue-600 to-indigo-500 text-white pt-12 pb-24 px-4 text-center shadow-lg relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-20">
          <Cloud className="absolute top-10 left-[10%] w-24 h-24 text-white animate-pulse" style={{animationDuration: '4s'}} />
          <Cloud className="absolute top-20 right-[15%] w-16 h-16 text-white animate-pulse" style={{animationDuration: '6s'}} />
          <Cloud className="absolute bottom-10 left-[20%] w-20 h-20 text-blue-200 opacity-50" />
          <Sparkles className="absolute top-1/2 left-[5%] w-8 h-8 text-yellow-300 animate-spin-slow" />
          <Sparkles className="absolute top-1/3 right-[5%] w-12 h-12 text-yellow-300 animate-spin-slow" />
        </div>

        <div className="max-w-4xl mx-auto relative z-10 flex flex-col items-center">
          <div className="mb-6 relative group">
             <div className="absolute inset-0 bg-white/20 blur-xl rounded-full scale-110 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
             <img 
               src="https://kidoo.az/wp-content/uploads/2026/02/Lody-Logo.png" 
               alt="Lody Logo" 
               className="h-24 md:h-32 object-contain drop-shadow-lg relative z-10"
             />
          </div>
          
          <h1 className="text-3xl md:text-5xl font-black mb-2 tracking-tight drop-shadow-md">Ömürlük Bez</h1>
          <p className="text-lg md:text-xl opacity-90 mb-8 font-medium italic">Körpələr Xoşbəxt, Analar Rahat!</p>
          
          <div className="inline-flex flex-wrap justify-center gap-2 md:gap-4 bg-white/10 backdrop-blur-lg p-4 md:p-6 rounded-[2rem] border border-white/20 shadow-2xl">
            <div className="text-center min-w-[50px] md:min-w-[70px]">
              <div className="text-2xl md:text-4xl font-black">{time.d}</div>
              <div className="text-[8px] md:text-[10px] uppercase tracking-widest opacity-70 font-bold">Gün</div>
            </div>
            <div className="text-xl md:text-2xl opacity-50 self-center">:</div>
            <div className="text-center min-w-[50px] md:min-w-[70px]">
              <div className="text-2xl md:text-4xl font-black">{time.h}</div>
              <div className="text-[8px] md:text-[10px] uppercase tracking-widest opacity-70 font-bold">Saat</div>
            </div>
            <div className="text-xl md:text-2xl opacity-50 self-center">:</div>
            <div className="text-center min-w-[50px] md:min-w-[70px]">
              <div className="text-2xl md:text-4xl font-black">{time.m}</div>
              <div className="text-[8px] md:text-[10px] uppercase tracking-widest opacity-70 font-bold">Dəq</div>
            </div>
            <div className="text-xl md:text-2xl opacity-50 self-center">:</div>
            <div className="text-center min-w-[50px] md:min-w-[70px] text-yellow-300">
              <div className="text-2xl md:text-4xl font-black">{time.s}</div>
              <div className="text-[8px] md:text-[10px] uppercase tracking-widest opacity-70 font-bold">San</div>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto p-4 md:p-8 -mt-16 grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8 relative z-20 flex-grow">
        
        {/* Sol: Qeydiyyat Formu */}
        <section className="col-span-1 lg:col-span-4 order-2 lg:order-1">
          <div className="bg-white rounded-[2rem] md:rounded-[2.5rem] shadow-2xl p-6 md:p-8 border border-blue-50">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-3 bg-blue-50 rounded-2xl text-blue-600"><User size={24} /></div>
              <h2 className="text-xl md:text-2xl font-black text-slate-800 tracking-tight">Qeydiyyat</h2>
            </div>
            
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="space-y-3 p-4 bg-slate-50 rounded-2xl border border-slate-100">
                <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-2 mb-2">
                  <User size={14} /> Ana Məlumatları
                </h3>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs font-bold text-slate-500 mb-1 ml-1">Ad</label>
                    <input required type="text" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 outline-none" value={formData.motherName} onChange={(e) => setFormData({...formData, motherName: e.target.value})} />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-slate-500 mb-1 ml-1">Soyad</label>
                    <input required type="text" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 outline-none" value={formData.motherSurname} onChange={(e) => setFormData({...formData, motherSurname: e.target.value})} />
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1 ml-1">Doğum Tarixi</label>
                  <input required type="date" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-sm text-slate-600 outline-none focus:ring-2 focus:ring-blue-500" value={formData.motherBirthDate} onChange={(e) => setFormData({...formData, motherBirthDate: e.target.value})} />
                </div>
              </div>

              <div className="space-y-4 p-4 bg-blue-50/50 rounded-2xl border border-blue-100">
                <h3 className="text-xs font-bold text-blue-400 uppercase tracking-wider flex items-center gap-2 mb-2">
                  <Baby size={14} /> Körpə Məlumatları
                </h3>
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-2 ml-1">Cinsiyyət</label>
                  <div className="grid grid-cols-2 gap-3">
                    <button type="button" onClick={() => setFormData({...formData, babyGender: 'girl'})} className={`p-3 rounded-xl border-2 flex items-center justify-center gap-2 transition-all ${formData.babyGender === 'girl' ? 'bg-pink-50 border-pink-400 text-pink-600 font-bold' : 'bg-white border-slate-200 text-slate-400 hover:border-pink-200'}`}>
                      <Venus size={18} /> Qız
                    </button>
                    <button type="button" onClick={() => setFormData({...formData, babyGender: 'boy'})} className={`p-3 rounded-xl border-2 flex items-center justify-center gap-2 transition-all ${formData.babyGender === 'boy' ? 'bg-blue-50 border-blue-400 text-blue-600 font-bold' : 'bg-white border-slate-200 text-slate-400 hover:border-blue-200'}`}>
                      <Mars size={18} /> Oğlan
                    </button>
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1 ml-1">Doğum Tarixi</label>
                  <input required type="date" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-sm text-slate-600 outline-none focus:ring-2 focus:ring-blue-500" value={formData.babyBirthDate} onChange={(e) => setFormData({...formData, babyBirthDate: e.target.value})} />
                </div>
                <div>
                  <label className="block text-xs font-bold text-blue-500 mb-1 ml-1">Körpənin Ləqəbi (Nickname)</label>
                  <input required type="text" placeholder="Məs: Balaca Ulduz" className="w-full p-3 bg-white border-2 border-blue-200 rounded-xl text-base font-bold text-blue-700 placeholder:text-blue-200 outline-none focus:ring-2 focus:ring-blue-500" value={formData.babyNickname} onChange={(e) => setFormData({...formData, babyNickname: e.target.value})} />
                </div>
              </div>

              <button type="submit" className="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold py-4 rounded-2xl shadow-xl transition-all flex items-center justify-center gap-3">
                QEYDİYYATDAN KEÇ <CheckCircle2 size={20} />
              </button>
            </form>
            
            {showSuccess && (
              <div className="mt-4 p-3 bg-green-100 text-green-700 rounded-xl text-sm font-bold flex items-center gap-2 animate-in fade-in">
                 <CheckCircle2 size={18}/> Qeydiyyat uğurla tamamlandı!
              </div>
            )}
          </div>
        </section>

        {/* Orta: Hovuz */}
        <section className="col-span-1 lg:col-span-4 order-1 lg:order-2">
          <div className="bg-white rounded-[2rem] md:rounded-[2.5rem] shadow-2xl p-6 md:p-8 border border-blue-50 h-[500px] md:h-[680px] flex flex-col relative overflow-hidden">
            {isDrawing && (
              <div className="absolute inset-0 bg-blue-600 z-50 flex flex-col items-center justify-center text-white p-8 text-center">
                <div className="w-16 h-16 border-8 border-white/20 border-t-white rounded-full animate-spin mb-6"></div>
                <h3 className="text-2xl font-black mb-2 animate-pulse">PÜŞKATMA ZAMANI!</h3>
                <p className="opacity-70">Şanslı mələk seçilir...</p>
              </div>
            )}
            <h2 className="text-xl md:text-2xl font-black mb-6 flex items-center gap-2"><Users className="text-blue-500" /> Körpə Hovuzu</h2>
            
            <div className="bg-slate-50 p-3 rounded-xl mb-4 flex items-center justify-between text-xs font-bold text-slate-500">
               <span>CƏMİ İŞTİRAKÇI</span>
               <span className="bg-white px-3 py-1 rounded-lg border shadow-sm text-slate-800">{participants.length}</span>
            </div>

            <div className="flex-grow overflow-y-auto space-y-3 custom-scrollbar pr-2">
              {participants.map((p) => (
                <div key={p.id} className="p-3 bg-white rounded-2xl border border-slate-100 flex items-center justify-between shadow-sm">
                  <div className="flex items-center gap-3">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${p.gender === 'girl' ? 'bg-pink-50 border-pink-100 text-pink-400' : 'bg-blue-50 border-blue-100 text-blue-400'}`}>
                      {p.gender === 'girl' ? <Venus size={16} /> : <Mars size={16} />}
                    </div>
                    <span className="font-bold text-slate-700 text-sm">{p.nickname}</span>
                  </div>
                  <div className={`w-2 h-2 rounded-full ${p.gender === 'girl' ? 'bg-pink-400' : 'bg-blue-400'}`}></div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Sağ: Qaliblər */}
        <section className="col-span-1 lg:col-span-4 order-3">
          <div className="bg-white rounded-[2rem] md:rounded-[2.5rem] shadow-2xl p-6 md:p-8 border border-blue-50 h-full">
            <h2 className="text-xl md:text-2xl font-black mb-6 flex items-center gap-2"><Trophy className="text-yellow-500" /> Qaliblər</h2>
            <div className="space-y-4">
              {winners.map((w, index) => (
                <div key={index} className={`p-6 rounded-[2rem] border-2 relative overflow-hidden ${index === 0 ? 'bg-gradient-to-br from-yellow-50 to-orange-50 border-yellow-200' : 'bg-white border-slate-50'}`}>
                  <div className="absolute -right-4 -bottom-4 opacity-5 rotate-12">
                     {w.gender === 'girl' ? <Venus size={80} /> : <Mars size={80} />}
                  </div>
                  <div className="flex justify-between items-center mb-1 relative z-10">
                    <span className="text-[10px] font-bold text-slate-400 uppercase flex items-center gap-1">
                      <Calendar size={10} /> {w.date}
                    </span>
                    {index === 0 && <span className="bg-yellow-400 text-yellow-900 text-[10px] font-black px-2 py-0.5 rounded-full">YENİ</span>}
                  </div>
                  <div className="flex items-center gap-3 relative z-10">
                     <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shadow-sm ${w.gender === 'girl' ? 'bg-pink-400' : 'bg-blue-500'}`}>
                        {w.nickname.charAt(0)}
                     </div>
                     <h3 className={`text-lg font-black ${index === 0 ? 'text-slate-800' : 'text-slate-600'}`}>{w.nickname}</h3>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>

      {/* FOOTER */}
      <footer className="bg-white border-t border-slate-100 mt-12 py-10 px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
          
          <button 
            onClick={() => setShowCampaignModal(true)}
            className="flex items-center gap-3 bg-blue-50 text-blue-600 px-8 py-4 rounded-2xl font-black hover:bg-blue-600 hover:text-white transition-all shadow-sm"
          >
            <Info size={20} />
            KAMPANİYA HAQQINDA
          </button>

          <div className="text-center">
            <p className="text-slate-400 text-sm">© 2026 Lody Azerbaijan. Bütün hüquqlar qorunur.</p>
            <div className="flex items-center justify-center gap-1 text-blue-500 text-xs mt-1 font-bold">
               <Heart size={12} fill="currentColor"/> LODY İLƏ HƏR ŞEY DAHA RAHAT
            </div>
          </div>

          <div className="flex items-center gap-4">
            <a href="#" className="w-12 h-12 bg-slate-50 text-slate-400 rounded-2xl flex items-center justify-center hover:bg-blue-100 hover:text-blue-600 transition-all"><Facebook size={22} /></a>
            <a href="#" className="w-12 h-12 bg-slate-50 text-slate-400 rounded-2xl flex items-center justify-center hover:bg-pink-100 hover:text-pink-600 transition-all"><Instagram size={22} /></a>
            <a href="#" className="w-12 h-12 bg-slate-50 text-slate-400 rounded-2xl flex items-center justify-center hover:bg-green-100 hover:text-green-600 transition-all"><MessageCircle size={22} /></a>
          </div>

        </div>
      </footer>

      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 5px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
        
        .confetti {
          position: absolute;
          width: 10px;
          height: 10px;
          top: -20px;
          opacity: 0.8;
          border-radius: 2px;
          animation: fall linear forwards;
          z-index: 101;
        }

        @keyframes fall {
          0% { transform: translateY(0) rotate(0deg); opacity: 1; }
          100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
        }
        
        .animate-spin-slow {
           animation: spin 3s linear infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
};

export default App;