// Main JavaScript file for Palina theme
document.addEventListener('DOMContentLoaded', () => {
    console.log('Palina theme loaded!');

    const htmlElement = document.documentElement;
    // Remove 'hidden' class from html to prevent FOUC
    htmlElement.classList.remove('hidden');

    // Staggered fade-in animation for post grid
    const gridItems = document.querySelectorAll('.post-grid-item');
    gridItems.forEach((item, index) => {
        item.style.animationDelay = `${index * 100}ms`;
        item.classList.add('animate-fadeInUp');
    });

    // Lightbox for post images
    const lightbox = document.getElementById('lightbox');
    if (lightbox) {
        const lightboxImage = document.getElementById('lightbox-image');
        const lightboxClose = document.getElementById('lightbox-close');

        const images = document.querySelectorAll('.kg-image-card img, .post-content img');

        images.forEach(image => {
            image.style.cursor = 'pointer';
            image.addEventListener('click', () => {
                lightbox.classList.remove('hidden');
                lightbox.classList.add('show');
                lightboxImage.src = image.src;
            });
        });

        lightboxClose.addEventListener('click', () => {
            lightbox.classList.add('hidden');
            lightbox.classList.remove('show');
            lightboxImage.src = '';
        });

        lightbox.addEventListener('click', (e) => {
            if (e.target.id !== 'lightbox-image') {
                lightbox.classList.add('hidden');
                lightbox.classList.remove('show');
                lightboxImage.src = '';
            }
        });
    }

    // Theme Switcher
    const themeToggle = document.getElementById('theme-toggle');
    // const htmlElement = document.documentElement; // Already defined above

    const currentTheme = localStorage.getItem('theme');
    if (currentTheme) {
        htmlElement.setAttribute('data-theme', currentTheme);
    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
        // Default to light theme if system preference is light
        htmlElement.setAttribute('data-theme', 'light');
    }

    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            let newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
            htmlElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
        });
    }

    // Mobile Menu
    const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
    const mobileMenuClose = document.getElementById('mobile-menu-close');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuToggle && mobileMenu && mobileMenuClose) {
        mobileMenuToggle.addEventListener('click', () => {
            mobileMenu.classList.remove('-translate-x-full');
            mobileMenu.classList.add('translate-x-0');
        });

        mobileMenuClose.addEventListener('click', () => {
            mobileMenu.classList.remove('translate-x-0');
            mobileMenu.classList.add('-translate-x-full');
        });

        // Close menu if a link is clicked
        const mobileNavLinks = mobileMenu.querySelectorAll('a');
        mobileNavLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.remove('translate-x-0');
                mobileMenu.classList.add('-translate-x-full');
            });
        });
    }
});