HTMLify

document.addEventListener('DOMContentLoaded', () => {
    // --- THEME TOGGLE LOGIC (Applies to all pages) ---
    const getTheme = () => localStorage.getItem('theme') || 'light';
    const setTheme = (theme) => {
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
    };

    const applyThemeToAllToggles = (theme) => {
        const toggles = document.querySelectorAll('[id^="theme-toggle-"], .theme-toggle-btn');
        toggles.forEach(toggle => {
            const iconSpan = toggle.querySelector('.material-icons');
            if (iconSpan) {
                if (theme === 'dark') {
                    iconSpan.textContent = 'brightness_5'; // Sun icon for dark mode
                } else {
                    iconSpan.textContent = 'brightness_4'; // Moon icon for light mode
                }
            }
        });
    };

    const initializeTheme = () => {
        const initialTheme = getTheme();
        setTheme(initialTheme);
        applyThemeToAllToggles(initialTheme);
    };

    const handleThemeToggle = (e) => {
        const currentTheme = getTheme();
        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
        setTheme(newTheme);
        applyThemeToAllToggles(newTheme);
    };

    initializeTheme();

    document.querySelectorAll('.theme-toggle-btn, #theme-toggle-landing, #theme-toggle-login, #theme-toggle-signup, #theme-toggle-feed, #theme-toggle-profile, #theme-toggle-events, #theme-toggle-search').forEach(toggle => {
        toggle.addEventListener('click', handleThemeToggle);
    });


    // --- Page Specific Logic (Placeholder for actual interaction) ---

    // 1. Landing Page Interactions (index.html)
    if (document.getElementById('theme-toggle-landing')) {
        // Already handled by universal listener above
    }

    // 2. Auth Page Interactions (login.html, signup.html)
    if (document.getElementById('login-form') || document.getElementById('signup-form')) {
        // Placeholder for form submission logic (authentication/redirection)
        // Since we cannot implement backend logic, these will just prevent default and log.
        const forms = [document.getElementById('login-form'), document.getElementById('signup-form')];
        forms.forEach(form => {
            if (form) {
                form.addEventListener('submit', (e) => {
                    e.preventDefault();
                    console.log(`${form.id} submitted. In a real app, this would authenticate.`);
                    if (form.id === 'login-form') {
                        window.location.href = 'feed.html'; // Simulate successful login
                    } else {
                        window.location.href = 'login.html'; // Simulate successful signup
                    }
                });
            }
        });
    }

    // 3. Feed Page Interactions (feed.html)
    if (document.querySelector('.post-feed')) {
        console.log('Feed page loaded.');
        
        // Simple function to trigger fade-ins on load
        document.querySelectorAll('.post-card').forEach((card, index) => {
            card.style.transitionDelay = `${index * 0.1}s`;
            card.classList.add('fade-in-up');
        });
        
        // Apply delay to the new Create Post section
        const createArea = document.getElementById('create-post-area');
        if (createArea) {
            createArea.style.transitionDelay = '0s';
            createArea.classList.add('fade-in-up');
        }
    }

    // 4. Profile Page Interactions (profile.html)
    if (document.querySelector('.profile-main')) {
        const tabLinks = document.querySelectorAll('.tab-link');
        const tabContents = document.querySelectorAll('.tab-content');

        tabLinks.forEach(link => {
            link.addEventListener('click', function() {
                // Deactivate all links/contents
                tabLinks.forEach(l => l.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));

                // Activate clicked link and corresponding content
                this.classList.add('active');
                document.getElementById(this.dataset.tab).classList.add('active');
            });
        });

        // Trigger initial fade-ins for profile section
        document.querySelector('.profile-header').classList.add('fade-in-up');
        document.querySelector('.profile-tabs').classList.add('fade-in-up', 'delay-1');
    }

    // 5. Events Page Interactions (events.html)
    if (document.querySelector('.event-list')) {
         document.querySelectorAll('.event-card').forEach((card, index) => {
            card.style.transitionDelay = `${index * 0.1}s`;
            card.classList.add('fade-in-up');
        });
    }
    
    // 6. Create Post button placeholder (functional across navigation pages)
    document.querySelectorAll('.create-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            alert('Feature: Create Post Modal/Page. (Currently placeholder)');
        });
    });

    // 7. Search Page Placeholder (search.html)
    if (document.getElementById('search-input-main')) {
        const searchInput = document.getElementById('search-input-main');
        searchInput.addEventListener('input', () => {
            console.log('Searching for:', searchInput.value);
            // In a real scenario, this would trigger API calls and update the search-results-section
        });
    }

});