// Handle view mode persistence across HTMX requests
document.addEventListener('htmx:configRequest', function(evt) {
    // Preserve view mode
    const parkResults = document.getElementById('park-results');
    if (parkResults) {
        const viewMode = parkResults.getAttribute('data-view-mode');
        if (viewMode) {
            evt.detail.parameters['view_mode'] = viewMode;
        }
    }

    // Preserve search terms
    const searchInput = document.getElementById('search');
    if (searchInput && searchInput.value) {
        evt.detail.parameters['search'] = searchInput.value;
    }
});

// Handle loading states
document.addEventListener('htmx:beforeRequest', function(evt) {
    const target = evt.detail.target;
    if (target) {
        target.classList.add('htmx-requesting');
    }
});

document.addEventListener('htmx:afterRequest', function(evt) {
    const target = evt.detail.target;
    if (target) {
        target.classList.remove('htmx-requesting');
    }
});

// Handle history navigation
document.addEventListener('htmx:historyRestore', function(evt) {
    const parkResults = document.getElementById('park-results');
    if (parkResults && evt.detail.path) {
        const url = new URL(evt.detail.path, window.location.origin);
        const viewMode = url.searchParams.get('view_mode');
        if (viewMode) {
            parkResults.setAttribute('data-view-mode', viewMode);
        }
    }
});

// Initialize lazy loading for images
function initializeLazyLoading(container) {
    if (!('IntersectionObserver' in window)) return;

    const imageObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                imageObserver.unobserve(img);
            }
        });
    });

    container.querySelectorAll('img[data-src]').forEach(img => {
        imageObserver.observe(img);
    });
}

// Initialize lazy loading after HTMX content swaps
document.addEventListener('htmx:afterSwap', function(evt) {
    initializeLazyLoading(evt.detail.target);
});