// Initialize the website
document.addEventListener("DOMContentLoaded", function() {
    // Create loading overlay
    const loadingOverlay = document.createElement('div');
    loadingOverlay.classList.add('loading-overlay');
    loadingOverlay.innerHTML = '<div class="loader"></div>';
    document.body.appendChild(loadingOverlay);

    // Client-side mobile detection as a fallback
    function isMobileDevice() {
        // First check if the server already detected a mobile device
        const serverDetection = document.body.getAttribute('data-is-mobile') === 'true';
        
        // If server detection is available, use it
        if (document.body.hasAttribute('data-is-mobile')) {
            console.log('Using server-side mobile detection:', serverDetection);
            return serverDetection;
        }
        
        // Fallback to client-side detection
        const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
        const isMobile = mobileRegex.test(navigator.userAgent) || 
                         (window.innerWidth <= 768) || 
                         ('ontouchstart' in window);
        
        console.log('Using client-side mobile detection:', isMobile);
        return isMobile;
    }

    // Create sections dynamically with descriptions
    const sections = [
        //{ id: 'section0', title: 'Mission Statement of Amazon Crime', content: 'https://amazon-crime.org/mission/', description: 'Learn about our mission and vision.', tags: ['universe', 'flagship'] },
        //{ id: 'section1', title: 'Project Share', content: 'https://amazon-crime.org/projectshare/', description: 'Some projects that dont fit on a website.', tags: ['flagship'] },
        //{ id: 'section2', title: 'Cheap iOS Recreation', content: 'https://amazon-crime.org/ios/', description: 'A shitty version of IOS for the funnies.', tags: ['fun'] },
        { id: 'section3', title: 'The Totally Not Ominous Countdown', content: 'https://amazon-crime.org/countdown/', description: 'tick.. tock..', tags: ['fun'] },
        { id: 'section5', title: 'Ravioli Approval', content: 'https://amazon-crime.org/ravioli/', description: 'Is this ravioli approved? (Based on the Ravioli Approved meme)', tags: ['fun'] },
        { id: 'section6', title: 'Code Judge', content: 'https://amazon-crime.org/codejudge/', description: 'Get a code to be ripped apart by a way too brutal code judge AI', tags: ['fun'] },
        { id: 'section7', title: 'Amazon Crime Accounts', content: 'https://amazon-crime.org/accounts/', description: 'Manage your Amazon Crime account and see other users.', tags: ['flagship', 'universe'] },
        { id: 'section8', title: 'Most Wanted', content: 'https://amazon-crime.org/mostwanted/', description: 'See the most wanted criminals of Amazon Crime', tags: ['universe'] },
        { id: 'section9', title: 'Crime Notes', content: 'https://amazon-crime.org/crimenotes/', description: 'Desktop and mobile cloud notes app', tags: ['flagship', 'universe'] },
        { id: 'section10', title: 'Employees', content: 'https://amazon-crime.org/employees/', description: 'Meet the people who make Amazon Crime possible', tags: ['universe'] },
        { id: 'section11', title: 'CrimeGPT 2.0', content: 'https://amazon-crime.org/crimegpt/', description: 'An easy to use good looking desktop AI client app.', tags: ['flagship', 'universe'] },
        { id: 'section12', title: 'Un-FiniteCraft v2', content: 'https://amazon-crime.org/unfinitecraft/', description: 'InfiniteCraft inspired crafting game', tags: ['flagship', 'fun'] },
    ];

    // Add icons to header and navigation
    function addUIIcons() {
        // Check if the client is on a mobile device
        const isMobile = isMobileDevice();
        console.log('Final mobile detection result:', isMobile);
        
        // If on mobile, add a class to the body for CSS targeting
        if (isMobile) {
            document.body.classList.add('mobile-device');
        }
        
        // Add icon to header title (only if not mobile)
        const headerTitle = document.querySelector('header h1');
        if (!isMobile) {
            headerTitle.innerHTML = '<i class="fas fa-map-marked-alt"></i>' + headerTitle.innerHTML;
        }
        
        // Add icon to header subtitle
        const headerSubtitle = document.querySelector('header p');
        headerSubtitle.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; gap: 8px;">Your gateway to innovative solutions.<i class="fas fa-compass animated-icon"></i></div>';
        
        // Add icons to navigation buttons
        const allProjectsBtn = document.querySelector('button[data-tag="all"]');
        allProjectsBtn.innerHTML = '<i class="fas fa-th-large"></i> ' + allProjectsBtn.innerHTML;
        
        const flagshipBtn = document.querySelector('button[data-tag="flagship"]');
        flagshipBtn.innerHTML = '<i class="fas fa-star"></i> ' + flagshipBtn.innerHTML;
        
        const funBtn = document.querySelector('button[data-tag="fun"]');
        funBtn.innerHTML = '<i class="fas fa-gamepad"></i> ' + funBtn.innerHTML;
        
        const universeBtn = document.querySelector('button[data-tag="universe"]');
        universeBtn.innerHTML = '<i class="fas fa-globe"></i> ' + universeBtn.innerHTML;
        
        // Add icon to footer (only if not mobile)
        const footerText = document.querySelector('footer p');
        if (!isMobile) {
            footerText.innerHTML = '<i class="fas fa-code"></i> ' + footerText.innerHTML;
        }
        
        // Double-check to ensure icons are not displayed on mobile
        if (isMobile) {
            // Remove map icon from header if it was somehow added
            const mapIcon = headerTitle.querySelector('.fa-map-marked-alt');
            if (mapIcon) {
                mapIcon.remove();
            }
            
            // Remove code icon from footer if it was somehow added
            const codeIcon = footerText.querySelector('.fa-code');
            if (codeIcon) {
                codeIcon.remove();
            }
        }
    }

    // Theme toggle functionality
    function initThemeToggle() {
        // Create theme toggle button
        const themeToggle = document.createElement('button');
        themeToggle.classList.add('theme-toggle');
        themeToggle.setAttribute('aria-label', 'Toggle dark mode');
        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
        document.body.appendChild(themeToggle);
        
        // Check for saved theme preference or respect OS preference
        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
        const savedTheme = localStorage.getItem('theme');
        
        if (savedTheme === 'dark' || (!savedTheme && prefersDarkScheme.matches)) {
            document.documentElement.setAttribute('data-theme', 'dark');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }
        
        // Toggle theme on button click
        themeToggle.addEventListener('click', () => {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            let newTheme = 'light';
            let icon = '<i class="fas fa-moon"></i>';
            
            if (!currentTheme || currentTheme === 'light') {
                newTheme = 'dark';
                icon = '<i class="fas fa-sun"></i>';
            }
            
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            themeToggle.innerHTML = icon;
            
            // Add animation to the toggle button
            themeToggle.classList.add('animated');
            setTimeout(() => {
                themeToggle.classList.remove('animated');
            }, 500);
        });
    }

    function filterSections(tag) {
        // Create a wrapper for smooth transitions if it doesn't exist
        let transitionContainer = document.querySelector('.category-transition-container');
        if (!transitionContainer) {
            transitionContainer = document.createElement('div');
            transitionContainer.classList.add('category-transition-container');
            const additionalSections = document.getElementById('additional-sections');
            
            // Move all sections to the transition container
            const allSections = document.querySelectorAll('.additional-section');
            allSections.forEach(section => {
                transitionContainer.appendChild(section);
            });
            
            additionalSections.appendChild(transitionContainer);
        }
        
        // Hide all sections first with a fade out effect
        const allSections = document.querySelectorAll('.additional-section');
        allSections.forEach(section => {
            section.style.opacity = '0';
            section.style.transform = 'translateY(20px)';
        });
        
        // Wait for fade out to complete
        setTimeout(() => {
            // Filter sections
            allSections.forEach(section => {
                const sectionTags = section.dataset.tags.split(',');
                if (tag === 'all' || sectionTags.includes(tag)) {
                    section.style.display = 'block';
                } else {
                    section.style.display = 'none';
                }
            });
            
            // Fade in visible sections with staggered delay
            const visibleSections = document.querySelectorAll('.additional-section[style*="display: block"]');
            visibleSections.forEach((section, index) => {
                setTimeout(() => {
                    section.style.opacity = '1';
                    section.style.transform = 'translateY(0)';
                    section.classList.add('visible');
                }, 50 * index);
            });
        }, 300);

        // Update active filter button
        document.querySelectorAll('.nav-filter-btn').forEach(btn => {
            btn.classList.remove('active');
            btn.setAttribute('aria-pressed', 'false');
            if (btn.dataset.tag === tag) {
                btn.classList.add('active');
                btn.setAttribute('aria-pressed', 'true');
            }
        });
    }

    function createSections() {
        const additionalSections = document.getElementById('additional-sections');
        
        // Create a wrapper for smooth transitions
        const transitionContainer = document.createElement('div');
        transitionContainer.classList.add('category-transition-container');
        additionalSections.appendChild(transitionContainer);
        
        // Reverse the sections array before creating elements
        sections.slice().reverse().forEach((section, index) => {
            const sectionDiv = document.createElement('section');
            sectionDiv.id = section.id;
            sectionDiv.classList.add('additional-section');
            sectionDiv.dataset.tags = section.tags.join(',');
            
            // Add tag icons based on tag type
            const tagBadges = section.tags.map(tag => {
                let icon = '';
                switch(tag) {
                    case 'flagship':
                        icon = '<i class="fas fa-star"></i>';
                        break;
                    case 'fun':
                        icon = '<i class="fas fa-gamepad"></i>';
                        break;
                    case 'universe':
                        icon = '<i class="fas fa-globe"></i>';
                        break;
                    default:
                        icon = '<i class="fas fa-tag"></i>';
                }
                return `<span class="tag ${tag}">${icon} ${tag}</span>`;
            }).join('');
            
            sectionDiv.innerHTML = `
                <div class="tag-badge">${tagBadges}</div>
                <h2>${section.title}</h2>
                <p>${section.description}</p>
                <p class="link"><a href="${section.content}" target="_self" aria-label="Visit ${section.title}">${section.content} <i class="fas fa-arrow-right"></i></a></p>
            `;
            
            // Add a slight delay for a staggered appearance
            sectionDiv.style.transitionDelay = `${index * 0.05}s`;
            transitionContainer.appendChild(sectionDiv);
        });
    }

    // Observe sections for scroll animations
    function initScrollObserver() {
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if(entry.isIntersecting){
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.additional-section').forEach(section => {
            observer.observe(section);
        });
    }

    // Add scroll effects for header and nav
    function handleScroll() {
        const scrollPosition = window.scrollY;
        const header = document.querySelector('header');
        const nav = document.querySelector('nav');
        const footer = document.querySelector('footer');
        
        if (scrollPosition > 50) {
            header.classList.add('scrolled');
            nav.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
            nav.classList.remove('scrolled');
        }
        
        // Add scrolled class to footer when near bottom
        const bottomPosition = document.body.scrollHeight - window.innerHeight - 100;
        if (scrollPosition > bottomPosition) {
            footer.classList.add('scrolled');
        } else {
            footer.classList.remove('scrolled');
        }
    }

    // Add click handlers for nav filter buttons
    function initFilterButtons() {
        document.querySelectorAll('.nav-filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const tag = this.dataset.tag;
                filterSections(tag);
            });
        });
    }

    // Initialize everything
    function init() {
        createSections();
        addUIIcons();
        initThemeToggle();
        initScrollObserver();
        initFilterButtons();
        
        window.addEventListener('scroll', handleScroll);
        
        // Initialize with all sections visible
        filterSections('all');
        
        // Hide loading overlay after everything is loaded
        setTimeout(() => {
            loadingOverlay.classList.add('hidden');
            setTimeout(() => {
                loadingOverlay.remove();
            }, 500);
        }, 800);
    }
    
    // Start initialization
    init();
});