const state = {
    openedDays: new Set(),
    updateOpenedCount() {
        document.getElementById('opened-count').textContent = this.openedDays.size;
    }
};

let currentLang = 'fr';

const translations = {
    fr: {
        modalLocked: `Cette case ne peut être ouverte que le {day} décembre !`,
        calendarNotAvailable: `Le calendrier ne sera disponible qu'à partir du {day} décembre.`,
        events: {
            1: "Event 21H Capture de Printer ⚔️",
            2: "Event 21H Titan vs Shiganshina  🎄",
            3: "Event 21H Capture de VIP🍫",
            4: "Event 21H Chasse à l'homme ❄️",
            5: "Event 21H La grande chasse au trésor🕯️",
            6: "Event 20H Raid Trésor ⚔️",
            7: "Event 20H-21H Jump (Parkour) 🛷",
            8: "Event 21H Loup Garou 🎶",
            9: "Event 20H Mode Apocalypse ✨",
            10: "Event 21H Battle Royal 🌟",
            11: "Event 21H  Constructeur VS Raiders 🎨",
            12: "Event 20H Epreuve Défense 🎈",
            13: "Event 21H Combat de boxe 🍪",
            14: "Event 20H Mise à mort 📖",
            15: "Event 21H Giant Slayer! 🎅",
            16: "Event 21H Jump (Parkour) 🎁",
            17: "Event 20H Talent Show 🧦",
            18: "Event 21H Tournoi de Gladiateur 🕯️",
            19: "Event 20H Epreuve Défense ⛄",
            20: "Event 21H Capture de Printer 🎄",
            21: "Event 21H Jacques a dit ❄️",
            22: "Event 21H Loup Garou ✨",
            23: "Event 15H Battle Royale 🌟",
            24: "Event 16H Chasse à l'homme 🎅"
        }
    },
    en: {
        modalLocked: `This box can only be opened on December {day}!`,
        calendarNotAvailable: `The calendar will only be available from December {day}.`,
        events: {
            1: "Event 9PM Printer Capture ⚔️",
            2: "Event 9PM Titan vs Shiganshina 🎄",
            3: "Event 9PM VIP Capture 🍫",
            4: "Event 9PM Manhunt ❄️",
            5: "Event 9PM The Great Treasure Hunt 🕯️",
            6: "Event 8PM Treasure Raid ⚔️",
            7: "Event 8PM-9PM Jump (Parkour) 🛷",
            8: "Event 9PM Werewolf 🎶",
            9: "Event 8PM Apocalypse Mode ✨",
            10: "Event 9PM Battle Royal 🌟",
            11: "Event 9PM Builders VS Raiders 🎨",
            12: "Event 8PM Defense Trial 🎈",
            13: "Event 9PM Boxing Match 🍪",
            14: "Event 8PM Death Match 📖",
            15: "Event 9PM Giant Slayer! 🎅",
            16: "Event 9PM Jump (Parkour) 🎁",
            17: "Event 8PM Talent Show 🧦",
            18: "Event 9PM Gladiator Tournament 🕯️",
            19: "Event 8PM Defense Trial ⛄",
            20: "Event 9PM Printer Capture 🎄",
            21: "Event 9PM Simon Says ❄️",
            22: "Event 9PM Werewolf ✨",
            23: "Event 3PM Battle Royale 🌟",
            24: "Event 4PM Manhunt 🎅"
        }
    }
};

function createSnowflakes() {
    const container = document.getElementById('snowflakes');
    const fragment = document.createDocumentFragment();
    const chars = ['❅', '❆', '❄', '✱', '✻'];
    
    for (let i = 0; i < 50; i++) {
        const snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.textContent = chars[Math.floor(Math.random() * chars.length)];
        
        const left = Math.random() * 100;
        const duration = 5 + Math.random() * 10;
        const delay = Math.random() * 10;
        const size = 10 + Math.random() * 20;
        
        snowflake.style.cssText = `
            left: ${left}vw;
            animation-duration: ${duration}s;
            animation-delay: ${delay}s;
            font-size: ${size}px;
        `;
        
        fragment.appendChild(snowflake);
    }
    container.appendChild(fragment);
}

let audioPlaying = false;

function toggleAudio() {
    const youtubeAudio = document.getElementById('youtubeAudio');
    const audioControl = document.getElementById('audioControl');
    
    if (audioPlaying) {
        youtubeAudio.src = '';
        audioControl.textContent = '🔈';
    } else {
        youtubeAudio.src = 'https://www.youtube.com/embed/J8n0zKQe35U?autoplay=1&controls=0';
        audioControl.textContent = '🔊';
    }
    audioPlaying = !audioPlaying;
}

function toggleLanguage() {
    currentLang = currentLang === 'fr' ? 'en' : 'fr';
    document.getElementById('langToggle').textContent = `🌍 ${currentLang.toUpperCase()}`;
    
    // Refresh opened days with new language
    const openedDays = document.querySelectorAll('.day.opened');
    openedDays.forEach(day => {
        const dayNumber = parseInt(day.dataset.day);
        if (translations[currentLang].events[dayNumber]) {
            showModal(translations[currentLang].events[dayNumber], true);
        }
    });
}

function showModal(message, isEvent = false) {
    const modal = document.getElementById('modal');
    const overlay = document.getElementById('overlay');
    const modalMessage = document.getElementById('modal-message');
    
    if (isEvent) {
        modalMessage.textContent = message;
    } else {
        modalMessage.textContent = message;
    }
    
    modal.classList.add('active');
    overlay.classList.add('active');
}

function closeModal() {
    const modal = document.getElementById('modal');
    const overlay = document.getElementById('overlay');
    modal.classList.remove('active');
    overlay.classList.remove('active');
}

function openDay(day, dayNumber) {
    day.classList.add('opened');
    state.openedDays.add(dayNumber);
    state.updateOpenedCount();
    showModal(translations[currentLang].events[dayNumber], true);
}

function handleDayClick(event) {
    const day = event.target;
    const dayNumber = parseInt(day.dataset.day);
    const today = new Date();
    const currentDay = today.getDate();
    const currentMonth = today.getMonth();

    if (day.classList.contains('opened')) {
        showModal(translations[currentLang].events[dayNumber], true);
        return;
    }

    if (currentMonth === 11) {
        if (dayNumber <= currentDay) {
            openDay(day, dayNumber);
        } else {
            showModal(translations[currentLang].modalLocked.replace('{day}', dayNumber));
        }
    } else {
        showModal(translations[currentLang].calendarNotAvailable.replace('{day}', dayNumber));
    }
}

function generateCalendar() {
    const calendar = document.getElementById('calendar');
    const today = new Date();
    const currentDay = today.getDate();
    const currentMonth = today.getMonth();

    for (let i = 1; i <= 24; i++) {
        const day = document.createElement('div');
        day.className = 'day';
        day.dataset.day = i;
        day.textContent = i;

        if (currentMonth === 11 && i > currentDay) {
            day.classList.add('locked');
        }

        day.addEventListener('click', handleDayClick);
        calendar.appendChild(day);
    }
}

function updateTimer() {
    const now = new Date();
    const target = new Date(2024, 11, 1);
    let nextDate;
 
    if (now.getMonth() === 11 && now.getDate() <= 24) {
        nextDate = new Date(now.getFullYear(), 11, now.getDate() + 1);
    } else {
        nextDate = target;
    }
 
    const diff = nextDate - now;
    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);
 
    const timerText = `${days}d:${hours.toString().padStart(2, '0')}h:${minutes.toString().padStart(2, '0')}m:${seconds.toString().padStart(2, '0')}s`;
    document.getElementById('timer-text').textContent = timerText;
}

document.addEventListener('DOMContentLoaded', () => {
    // Ajout du bouton de changement de langue
    const langButton = document.createElement('button');
    langButton.id = 'langToggle';
    langButton.innerHTML = '🌍 FR';
    langButton.style.cssText = 'position: fixed; top: 10px; right: 10px; z-index: 1000; padding: 10px; border-radius: 5px; border: none; background: #fff; cursor: pointer;';
    document.body.appendChild(langButton);
    langButton.addEventListener('click', toggleLanguage);

    const loader = document.getElementById('loader');
    setTimeout(() => {
        loader.style.opacity = '0';
        setTimeout(() => {
            loader.style.display = 'none';
        }, 500);
    }, 2000);

    createSnowflakes();
    generateCalendar();
    updateTimer();
    setInterval(updateTimer, 1000);

    document.getElementById('close-modal').addEventListener('click', closeModal);
    document.getElementById('overlay').addEventListener('click', closeModal);
    document.getElementById('audioControl').addEventListener('click', toggleAudio);

    setTimeout(toggleAudio, 2500);

    const today = new Date();
    if (today.getMonth() === 11) {  
        const currentDay = today.getDate();
        if (currentDay <= 24) {  
            const dayElement = document.querySelector(`[data-day="${currentDay}"]`);
            if (dayElement && !dayElement.classList.contains('opened')) {
                openDay(dayElement, currentDay);
            }
        }
    }
});
// Styles CSS pour le bouton de langue
const styles = `
.lang-switch {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1),
                -5px -5px 10px rgba(255,255,255,0.5);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.lang-switch:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 12px rgba(0,0,0,0.15),
                -6px -6px 12px rgba(255,255,255,0.6);
}

.lang-switch:active {
    transform: translateY(1px);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.1),
                -3px -3px 6px rgba(255,255,255,0.4);
}

.lang-switch .globe {
    display: inline-block;
    transition: transform 0.5s ease;
}

.lang-switch .text {
    display: inline-block;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.lang-switch.switching .globe {
    transform: rotate(360deg);
}

.lang-switch.switching .text {
    transform: translateY(20px);
    opacity: 0;
}

@media (max-width: 768px) {
    .lang-switch {
        padding: 10px 20px;
        font-size: 14px;
    }
}
`;

// Création et injection des styles
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);

// Modification du bouton existant
function updateLanguageButton() {
    const existingButton = document.getElementById('langToggle');
    if (existingButton) {
        existingButton.remove();
    }

    const button = document.createElement('button');
    button.id = 'langToggle';
    button.className = 'lang-switch';
    
    const globe = document.createElement('span');
    globe.className = 'globe';
    globe.textContent = '🌍';
    
    const text = document.createElement('span');
    text.className = 'text';
    text.textContent = currentLang.toUpperCase();
    
    button.appendChild(globe);
    button.appendChild(text);
    
    // Nouvelle fonction de basculement avec animation
    button.addEventListener('click', () => {
        button.classList.add('switching');
        
        setTimeout(() => {
            currentLang = currentLang === 'fr' ? 'en' : 'fr';
            text.textContent = currentLang.toUpperCase();
            
            // Refresh opened days with new language
            const openedDays = document.querySelectorAll('.day.opened');
            openedDays.forEach(day => {
                const dayNumber = parseInt(day.dataset.day);
                if (translations[currentLang].events[dayNumber]) {
                    showModal(translations[currentLang].events[dayNumber], true);
                }
            });
        }, 250);
        
        setTimeout(() => {
            button.classList.remove('switching');
        }, 500);
    });
    
    document.body.appendChild(button);
}

// Initialisation du bouton
document.addEventListener('DOMContentLoaded', () => {
    updateLanguageButton();
});