import React, { useState, useEffect } from 'react';
import { Star, Lock, Gift, Clock, Sparkles, Trees as TreeIcon, Snowflake, AlertCircle } from 'lucide-react';

// --- Configuration des données ---

const CALENDAR_DATA = [
  { day: 19, month: 11, yearOffset: 0, content: "Pavé :3", icon: "📝" }, 
  { day: 20, month: 11, yearOffset: 0, content: "Un petit chocolat chaud pour vous réchauffer ❤️", icon: "☕" },
  { day: 21, month: 11, yearOffset: 0, content: "Soirée film de Noël ce soir ?", icon: "🎬" },
  { day: 22, month: 11, yearOffset: 0, content: "Plus que 3 jours avant Noël !", icon: "🎄" },
  { day: 23, month: 11, yearOffset: 0, content: "Une petite pensée douce pour vous deux.", icon: "❄️" },
  { day: 24, month: 11, yearOffset: 0, content: "C'est le réveillon ! Profitez bien !", icon: "🎁" },
  { day: 25, month: 11, yearOffset: 0, content: "JOYEUX NOËL CELIANE & SNIPES !", icon: "🎅" },
  { day: 26, month: 11, yearOffset: 0, content: "On continue la fête, repos aujourd'hui.", icon: "🛏️" },
  { day: 27, month: 11, yearOffset: 0, content: "Une blague : Quel est le comble pour un sapin ? Se faire enguirlander !", icon: "😂" },
  { day: 28, month: 11, yearOffset: 0, content: "Prêts pour la nouvelle année ?", icon: "🎉" },
  { day: 29, month: 11, yearOffset: 0, content: "Souvenez-vous des bons moments de 2025.", icon: "📸" },
  { day: 30, month: 11, yearOffset: 0, content: "L'avant dernier jour de l'année...", icon: "⏳" },
  { day: 31, month: 11, yearOffset: 0, content: "Bon réveillon du Nouvel An !", icon: "🥂" },
  { day: 1, month: 0, yearOffset: 1, content: "BONNE ANNÉE 2026 ! Que du bonheur pour vous !", icon: "✨", isBonus: true },
];

export default function AdventCalendar() {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [openedDoors, setOpenedDoors] = useState<number[]>([]);
  const [selectedDay, setSelectedDay] = useState<any>(null);
  const [shakingDay, setShakingDay] = useState<number | null>(null);
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  // --- Gestion sécurisée du stockage (Anti-crash) ---
  useEffect(() => {
    try {
      const saved = localStorage.getItem('openedDoors_celiane_snipes');
      if (saved) {
        setOpenedDoors(JSON.parse(saved));
      }
    } catch (e) {
      console.warn("Le stockage local n'est pas disponible (navigation privée ou restreinte). L'app fonctionnera en mode mémoire.", e);
    }
    
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

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

  const saveProgress = (newOpened: number[]) => {
    setOpenedDoors(newOpened);
    try {
      localStorage.setItem('openedDoors_celiane_snipes', JSON.stringify(newOpened));
    } catch (e) {
      // Échec silencieux de la sauvegarde, mais l'état visuel est mis à jour
    }
  };

  const isLocked = (item: any) => {
    const now = new Date();
    const currentYear = now.getFullYear();
    let targetDate = new Date(currentYear, item.month, item.day);
    
    if (item.yearOffset === 1) {
       if (now.getMonth() === 11) {
         targetDate = new Date(currentYear + 1, item.month, item.day);
       } else {
         targetDate = new Date(currentYear, item.month, item.day);
       }
    }
    targetDate.setHours(0, 0, 0, 0);
    const nowCheck = new Date(now);
    
    // --- MODE TEST (Décommenter pour tout ouvrir) ---
    // return false; 
    
    return nowCheck < targetDate;
  };

  const showToast = (msg: string) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 3000);
  };

  const handleDoorClick = (item: any, index: number) => {
    if (isLocked(item)) {
      setShakingDay(index);
      
      const dateStr = `${item.day} ${item.month === 0 ? 'Janvier' : 'Décembre'}`;
      showToast(`🔒 Patience ! Cette case s'ouvrira le ${dateStr}`);
      
      setTimeout(() => setShakingDay(null), 500);
      return;
    }

    if (!openedDoors.includes(index)) {
      const newOpened = [...openedDoors, index];
      saveProgress(newOpened);
    }
    
    setSelectedDay(item);
  };

  const closeModal = () => {
    setSelectedDay(null);
  };

  const getCountdown = () => {
    const now = new Date();
    const currentYear = now.getFullYear();
    const xmas = new Date(currentYear, 11, 25);
    const newYear = new Date(currentYear + 1, 0, 1);
    
    let target = xmas;
    let label = "avant Noël";
    
    if (now > xmas && now < newYear) {
      target = newYear;
      label = "avant 2026";
    } else if (now >= newYear) {
      return "Bonne Année !";
    }

    const diff = target.getTime() - now.getTime();
    if (diff <= 0) return "C'est l'heure !";

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    return `${days}j ${hours}h ${minutes}m ${seconds}s ${label}`;
  };

  return (
    <div className="min-h-screen bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-[#0f172a] to-black text-white font-sans overflow-x-hidden relative selection:bg-red-500 selection:text-white pb-20">
      
      {/* --- Toast de Notification (Message d'erreur/info) --- */}
      {toastMessage && (
        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 animate-bounce-in">
          <div className="bg-red-600 text-white px-6 py-3 rounded-full shadow-2xl flex items-center gap-2 border-2 border-red-400 font-bold backdrop-blur-md">
            <AlertCircle className="w-5 h-5" />
            {toastMessage}
          </div>
        </div>
      )}

      {/* --- DÉCORATIONS D'ARRIÈRE-PLAN --- */}
      
      {/* Neige */}
      <div className="fixed inset-0 pointer-events-none z-0">
        {[...Array(70)].map((_, i) => (
          <div 
            key={`snow-${i}`}
            className="absolute bg-white rounded-full opacity-60 animate-fall"
            style={{
              left: `${Math.random() * 100}%`,
              top: `-10px`,
              width: `${Math.random() * 3 + 1}px`,
              height: `${Math.random() * 3 + 1}px`,
              animationDuration: `${Math.random() * 5 + 3}s`,
              animationDelay: `${Math.random() * 5}s`
            }}
          />
        ))}
      </div>

      {/* Père Noël animé */}
      <div className="fixed top-10 md:top-20 -left-64 z-0 animate-sleigh pointer-events-none opacity-80">
        <div className="text-4xl md:text-6xl transform -rotate-12 filter drop-shadow-lg">
          🦌🦌🦌🛷🎅
        </div>
      </div>

      {/* Sapins en fond (fixe en bas) */}
      <div className="fixed bottom-0 left-0 right-0 h-0 flex justify-between items-end pointer-events-none z-0 px-4 md:px-20 opacity-40">
        <TreeIcon className="text-emerald-900 w-32 h-32 md:w-64 md:h-64 fill-emerald-900/50" />
        <TreeIcon className="text-emerald-900 w-24 h-24 md:w-48 md:h-48 fill-emerald-900/50 transform translate-x-10" />
        <TreeIcon className="text-emerald-900 w-40 h-40 md:w-80 md:h-80 fill-emerald-900/50" />
      </div>

      {/* --- CONTENU PRINCIPAL --- */}

      <div className="relative z-10 max-w-5xl mx-auto px-4 py-8 flex flex-col items-center">
        
        {/* Header */}
        <header className="text-center mb-12 animate-fade-in-down relative">
          <div className="absolute -top-10 left-1/2 -translate-x-1/2 w-full max-w-md h-32 bg-red-500/20 blur-3xl rounded-full pointer-events-none"></div>
          
          <h1 className="text-4xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-red-400 via-red-500 to-red-600 mb-6 tracking-wider drop-shadow-[0_2px_2px_rgba(255,255,255,0.3)] filter" style={{ fontFamily: '"Mountains of Christmas", cursive, serif' }}>
            CELIANE - SNIPES
          </h1>
          
          <div className="inline-flex items-center gap-3 bg-black/50 px-8 py-3 rounded-full border border-white/10 backdrop-blur-md shadow-[0_0_15px_rgba(253,224,71,0.2)] hover:border-white/20 transition-colors">
            <Clock className="w-5 h-5 text-yellow-400 animate-pulse" />
            <span className="font-mono text-lg md:text-xl text-yellow-50 font-bold tracking-tight">
              {getCountdown()}
            </span>
          </div>
        </header>

        {/* Grille du Calendrier */}
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6 w-full">
          {CALENDAR_DATA.map((item, index) => {
            const isOpen = openedDoors.includes(index);
            const locked = isLocked(item);
            const isShaking = shakingDay === index;
            const isBonus = item.isBonus;

            // Classes de base
            let cardClasses = `
              relative h-32 md:h-40 rounded-2xl cursor-pointer transition-all duration-500 transform perspective-1000
              flex flex-col items-center justify-center border-2 shadow-xl backdrop-blur-sm
              ${isShaking ? 'animate-shake' : ''}
              ${isOpen ? 'rotate-y-180' : 'hover:-translate-y-1 hover:shadow-2xl group'}
            `;

            // Style spécifique État Fermé
            if (!isOpen) {
              if (isBonus) {
                // Bonus 1er Janvier (Or luxueux)
                cardClasses += ' bg-gradient-to-br from-yellow-300 via-yellow-500 to-yellow-700 border-yellow-200/50 text-yellow-900 overflow-hidden';
              } else {
                // Jours normaux (Rouge rubis vitreux)
                cardClasses += ' bg-gradient-to-br from-red-600/90 to-red-900/90 border-red-400/30 text-white';
              }
            } else {
              // État Ouvert (Fond sombre élégant)
              cardClasses += ' bg-slate-800/80 border-green-500/30 text-green-400';
            }

            return (
              <div 
                key={index} 
                className={cardClasses}
                onClick={() => handleDoorClick(item, index)}
              >
                {/* Effet brillant sur le bonus */}
                {isBonus && !isOpen && (
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent -skew-x-12 animate-shine pointer-events-none"></div>
                )}

                {/* Numéro du jour (visible si fermé) */}
                {!isOpen && (
                  <>
                    <div className={`absolute top-2 left-3 text-xs md:text-sm font-light opacity-80 uppercase tracking-widest ${isBonus ? 'text-yellow-900' : 'text-red-200'}`}>
                      {item.month === 0 ? 'Jan' : 'Dec'}
                    </div>
                    
                    <span className={`text-4xl md:text-5xl font-bold ${isBonus ? 'text-yellow-950 drop-shadow-sm' : 'drop-shadow-lg'}`} style={{ fontFamily: '"Mountains of Christmas", cursive' }}>
                      {item.day}
                    </span>
                    
                    <div className="mt-2 transition-transform duration-300 group-hover:scale-110">
                      {isBonus ? <Star className="w-8 h-8 animate-pulse text-yellow-900" fill="currentColor" /> : <Gift className="w-6 h-6 text-red-100" />}
                    </div>
                    
                    {/* Cadenas si verrouillé */}
                    {locked && (
                      <div className="absolute top-3 right-3 opacity-40 bg-black/20 p-1.5 rounded-full">
                        <Lock className="w-3 h-3 md:w-4 md:h-4" />
                      </div>
                    )}
                  </>
                )}

                {/* Contenu (visible si ouvert) */}
                {isOpen && (
                  <div className="text-center animate-fade-in p-2 w-full h-full flex flex-col items-center justify-center">
                    <span className="text-5xl mb-2 filter drop-shadow-md transform transition hover:scale-110">{item.icon}</span>
                    <div className="w-8 h-1 bg-green-500/30 rounded-full mt-2"></div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* --- MODALE --- */}
      
      {selectedDay && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md animate-fade-in">
          <div 
            className={`
              relative w-full max-w-lg p-1 rounded-3xl shadow-2xl overflow-hidden
              transform transition-all duration-500 scale-100 animate-bounce-small
              ${selectedDay.isBonus 
                ? 'bg-gradient-to-b from-yellow-300 to-yellow-600' 
                : 'bg-gradient-to-b from-red-500 to-red-800'}
            `}
          >
            {/* Intérieur de la modale */}
            <div className="bg-[#fffbf0] rounded-[1.4rem] p-8 text-center h-full relative overflow-hidden">
              
              {/* Décoration de fond modale */}
              <Snowflake className="absolute -top-10 -left-10 w-40 h-40 text-gray-100/50 animate-spin-slow pointer-events-none" />
              <Snowflake className="absolute -bottom-10 -right-10 w-40 h-40 text-gray-100/50 animate-spin-slow pointer-events-none" />

              {/* Confettis pour le bonus */}
              {selectedDay.isBonus && (
                <div className="absolute inset-0 overflow-hidden pointer-events-none">
                   <div className="absolute top-10 left-10 w-3 h-3 bg-red-500 rounded-full animate-ping"></div>
                   <div className="absolute bottom-20 right-10 w-4 h-4 bg-gold-500 rounded-full animate-ping delay-100"></div>
                </div>
              )}

              <button 
                onClick={closeModal}
                className="absolute top-4 right-4 p-2 rounded-full bg-black/5 hover:bg-black/10 transition-colors z-10"
              >
                ✖
              </button>

              <div className="mb-6 relative z-10">
                <div className="inline-block p-6 rounded-full bg-white shadow-inner mb-4">
                   <span className="text-7xl animate-bounce inline-block">
                    {selectedDay.icon}
                  </span>
                </div>
              </div>

              <h2 className="text-4xl font-bold mb-6 text-slate-800" style={{ fontFamily: '"Mountains of Christmas", cursive' }}>
                {selectedDay.day} {selectedDay.month === 0 ? 'Janvier' : 'Décembre'}
              </h2>
              
              <div className="text-xl md:text-2xl font-medium leading-relaxed text-slate-600 px-4">
                {selectedDay.content}
              </div>

              {selectedDay.isBonus && (
                <div className="mt-8 flex justify-center gap-2 text-yellow-600 bg-yellow-50 py-2 px-4 rounded-full mx-auto w-max border border-yellow-200">
                  <Sparkles className="animate-spin-slow w-5 h-5" />
                  <span className="font-bold tracking-wider">BONUS DU NOUVEL AN</span>
                  <Sparkles className="animate-spin-slow w-5 h-5" />
                </div>
              )}

              <button 
                onClick={closeModal}
                className={`mt-10 px-8 py-3 rounded-xl text-white font-bold text-lg shadow-lg transform transition hover:scale-105 active:scale-95
                  ${selectedDay.isBonus 
                    ? 'bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 shadow-yellow-500/30' 
                    : 'bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 shadow-red-500/30'}
                `}
              >
                C'est noté !
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Styles globaux pour animations CSS */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
        
        @keyframes shake {
          0%, 100% { transform: translateX(0); }
          25% { transform: translateX(-6px) rotate(-6deg); }
          75% { transform: translateX(6px) rotate(6deg); }
        }
        .animate-shake {
          animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
        }

        .animate-bounce-in {
            animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        @keyframes bounceIn {
            0% { transform: translate(-50%, -100%); opacity: 0; }
            100% { transform: translate(-50%, 0); opacity: 1; }
        }

        .animate-spin-slow {
          animation: spin 8s linear infinite;
        }
        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        /* Animation Père Noël */
        @keyframes sleigh-ride {
          0% { transform: translateX(0) translateY(0) rotate(-5deg); opacity: 0; }
          10% { opacity: 1; }
          25% { transform: translateX(30vw) translateY(20px) rotate(0deg); }
          50% { transform: translateX(60vw) translateY(-10px) rotate(5deg); }
          75% { transform: translateX(85vw) translateY(10px) rotate(0deg); }
          90% { opacity: 1; }
          100% { transform: translateX(120vw) translateY(-20px) rotate(-5deg); opacity: 0; }
        }
        .animate-sleigh {
          animation: sleigh-ride 25s linear infinite;
        }

        /* Animation Neige qui tombe */
        @keyframes fall {
          0% { transform: translateY(0) translateX(0); opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 0.8; }
          100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
        }
        .animate-fall {
          animation-timing-function: linear;
          animation-iteration-count: infinite;
        }

        /* Effet brillant sur case or */
        @keyframes shine {
          0% { transform: translateX(-150%) skewX(-12deg); }
          100% { transform: translateX(150%) skewX(-12deg); }
        }
        .animate-shine {
          animation: shine 3s infinite;
        }
      `}</style>
    </div>
  );
}