/**
 * Includes.js - Handles the inclusion of header and footer files
 * and applies the correct active states to navigation items
 */

document.addEventListener('DOMContentLoaded', function() {
    // Function to include HTML content
    async function includeHTML(elementId, filePath, callback) {
        try {
            const response = await fetch(filePath);
            if (!response.ok) {
                throw new Error(`Failed to load ${filePath}: ${response.status} ${response.statusText}`);
            }
            const content = await response.text();
            document.getElementById(elementId).innerHTML = content;
            if (callback) callback();
        } catch (error) {
            console.error('Error including HTML:', error);
        }
    }

    // Function to set active navigation item
    function setActiveNavItem() {
        const currentPath = window.location.pathname;
        
        // Wait for the navigation to be loaded
        setTimeout(() => {
            // Remove all active classes first
            document.querySelectorAll('.main-nav a').forEach(link => {
                link.classList.remove('active');
            });
            
            // Set active class based on current path
            if (currentPath === '/' || currentPath === '/index.html') {
                const portfolioLink = document.getElementById('nav-portfolio');
                if (portfolioLink) portfolioLink.classList.add('active');
            } else if (currentPath.includes('/stories/')) {
                const storiesLink = document.getElementById('nav-stories');
                if (storiesLink) storiesLink.classList.add('active');
                
                // Check for specific story pages
                if (currentPath.includes('viperwire.html')) {
                    const link = document.getElementById('nav-viperwire');
                    if (link) link.classList.add('active');
                } else if (currentPath.includes('fawe-plotsquared.html')) {
                    const link = document.getElementById('nav-fawe');
                    if (link) link.classList.add('active');
                } else if (currentPath.includes('healthcare-platform.html')) {
                    const link = document.getElementById('nav-healthcare');
                    if (link) link.classList.add('active');
                } else if (currentPath.includes('wordpress-security.html')) {
                    const link = document.getElementById('nav-wordpress');
                    if (link) link.classList.add('active');
                } else if (currentPath.includes('airport-dns.html')) {
                    const link = document.getElementById('nav-airport');
                    if (link) link.classList.add('active');
                } else if (currentPath.includes('nitric-leadership.html')) {
                    const link = document.getElementById('nav-nitric');
                    if (link) link.classList.add('active');
                } else if (currentPath.includes('open-source-success.html')) {
                    const link = document.getElementById('nav-opensource');
                    if (link) link.classList.add('active');
                }
            } else if (currentPath.includes('/one-pager-tools/')) {
                const toolsLink = document.getElementById('nav-tools');
                if (toolsLink) toolsLink.classList.add('active');
                
                // Check for specific tool pages
                if (currentPath.includes('csv-tool.html')) {
                    const link = document.getElementById('nav-csv');
                    if (link) link.classList.add('active');
                }
            }
        }, 100); // Small delay to ensure the DOM is updated
    }

    // Process header and footer placeholders
    const headerElement = document.getElementById('header-include');
    const footerElement = document.getElementById('footer-include');
    
    if (headerElement) {
        includeHTML('header-include', '/includes/header.html', setActiveNavItem);
    }
    
    if (footerElement) {
        includeHTML('footer-include', '/includes/footer.html');
    }
});