/* UI & Interaction Logic */

// --- THEME LOGIC ---
function toggleUserTheme() {
    document.body.classList.toggle('dark-theme');
    const isDark = document.body.classList.contains('dark-theme');
    localStorage.setItem('userTheme', isDark ? 'dark' : 'light');
    updateUserThemeIcon(isDark);
}

function updateUserThemeIcon(isDark) {
    const btn = document.getElementById('header-theme-btn');
    if (btn) btn.innerHTML = isDark ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
}

// Apply saved theme on load
document.addEventListener('DOMContentLoaded', () => {
    const savedUserTheme = localStorage.getItem('userTheme');
    if (savedUserTheme === 'dark') {
        document.body.classList.add('dark-theme');
        updateUserThemeIcon(true);
    } else {
        updateUserThemeIcon(false);
    }

    // Auto-init sliders if present
    const sliderWrapper = document.getElementById('banner-slider-wrapper');
    if (sliderWrapper && sliderWrapper.children.length > 1) {
        startSlider(sliderWrapper.children.length);
    }

    // Match timers
    startTimers();
});

// --- SIDEBARS ---
function closeAllSidebars() {
    const sb = document.getElementById('sidebar');
    const nsb = document.getElementById('notif-sidebar');
    const overlay = document.querySelector('.sidebar-overlay');

    if (sb) sb.classList.remove('active');
    if (nsb) nsb.classList.remove('active');
    if (overlay) overlay.classList.remove('active');
}

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.querySelector('.sidebar-overlay');
    if (sidebar.classList.contains('active')) {
        closeAllSidebars();
    } else {
        closeAllSidebars();
        sidebar.classList.add('active');
        if (overlay) overlay.classList.add('active');
    }
}

function toggleNotification() {
    const sidebar = document.getElementById('notif-sidebar');
    const overlay = document.querySelector('.sidebar-overlay');
    if (sidebar.classList.contains('active')) {
        closeAllSidebars();
    } else {
        closeAllSidebars();
        sidebar.classList.add('active');
        if (overlay) overlay.classList.add('active');
    }
}

// --- MODALS ---
function closeJoinModal() {
    document.getElementById('join-modal').classList.remove('active');
}

function closeAuthPage() {
    // Redirect to home if they cancel auth page (if it was a separate page, likely navigate back)
    window.location.href = 'index.php';
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        alert("Copied: " + text);
    });
}

// --- SLIDER ---
let sliderInterval;
function startSlider(count) {
    if (sliderInterval) clearInterval(sliderInterval);
    let index = 0;
    const wrapper = document.getElementById('banner-slider-wrapper');
    if (!wrapper) return;

    sliderInterval = setInterval(() => {
        index++;
        if (index >= count) index = 0;
        wrapper.style.transform = `translateX(-${index * 100}%)`;
    }, 3000);
}

// --- TIMERS ---
function startTimers() {
    function update() {
        const timers = document.querySelectorAll('.match-countdown');
        const now = new Date().getTime();

        timers.forEach(timer => {
            // PHP should output data-time as timestamp (ms) or seconds * 1000
            const target = parseInt(timer.getAttribute('data-time')) * 1000;
            const distance = target - now;

            if (distance < 0) {
                timer.innerText = "MATCH STARTED / ENDED";
                timer.style.color = "red";
            } else {
                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                timer.innerHTML = `
                    ${days} <span style="font-size:10px;">Days</span> : 
                    ${hours} <span style="font-size:10px;">Hours</span> : 
                    ${minutes} <span style="font-size:10px;">Min</span> : 
                    ${seconds} <span style="font-size:10px;">Sec</span>
                `;
            }
        });
    }
    update();
    setInterval(update, 1000);
}
