document.addEventListener('DOMContentLoaded', function () {
    const compareButton = document.getElementById('compareButton');
    const compareSimilarButton = document.getElementById('compareSimilarButton');
    const footer = document.getElementById('comparisonFooter');
    const maxVehicles = 4;
    let vehicleId = compareButton ? compareButton.getAttribute('data-vehicle-id') : 0;
    let textAddButton = compareButton ? compareButton.getAttribute('data-text-add') : null;
    let textRemoveButton = compareButton ? compareButton.getAttribute('data-text-remove') : null;

    // Initial variables for scroll detection
    let lastScrollTop = 0;
    const scrollThreshold = 10;

    function updateFooter(data) {
        if (!footer) return;

        // Clear existing images and placeholders
        for (let i = 0; i < maxVehicles; i++) {
            const imgElement = document.getElementById(`vehicleImg${i}`);
            const nameElement = document.getElementById(`vehicleName${i}`);
            const removeBtn = document.getElementById(`removeBtn${i}`);
            const slotElement = document.getElementById(`vehicleSlot${i}`);
            if (imgElement) imgElement.style.display = 'none';
            if (imgElement) imgElement.src = '';
            if (nameElement) nameElement.style.display = 'none';
            if (nameElement) nameElement.textContent = '';
            if (removeBtn) removeBtn.style.display = 'none';
            if (removeBtn) removeBtn.dataset.id = '';
            if (slotElement) slotElement.classList.add('empty-slot');
            if (slotElement) slotElement.classList.remove('filled-slot');
        }

        // Get the order array
        const order = data.order;
        if (!order) return;

        // Iterate over the order array to maintain the order
        let vehicleCount = 0;
        let isVehicleInFooter = false;
        order.forEach(id => {
            if (vehicleCount >= maxVehicles) return;
            const vehicle = data[id];
            const imageUrl = vehicle.image_url;
            const fullName = vehicle.full_name;
            const imgElement = document.getElementById(`vehicleImg${vehicleCount}`);
            const nameElement = document.getElementById(`vehicleName${vehicleCount}`);
            const removeBtn = document.getElementById(`removeBtn${vehicleCount}`);
            const slotElement = document.getElementById(`vehicleSlot${vehicleCount}`);
            if (imgElement) imgElement.src = imageUrl;
            if (imgElement) imgElement.style.display = 'block';
            if (nameElement) nameElement.textContent = fullName;
            if (nameElement) nameElement.style.display = 'block';
            if (removeBtn) removeBtn.dataset.id = id;
            if (removeBtn) removeBtn.style.display = 'block';
            if (slotElement) slotElement.classList.add('filled-slot');
            if (slotElement) slotElement.classList.remove('empty-slot');
            if (id.toString() === vehicleId.toString()) { // Convert both to string for comparison
                isVehicleInFooter = true;
            }
            vehicleCount++;
        });

        if (vehicleCount > 0) {
            footer.classList.add('show');
        } else {
            footer.classList.remove('show');
        }

        // Enable or disable the compareButton based on vehicle count and presence in footer
        if (compareButton) {
            if (isVehicleInFooter || vehicleCount < maxVehicles) {
                compareButton.disabled = false;
            } else {
                compareButton.disabled = true;
            }
        }

        updateCompareButtonState(data);
        updateCompareLink(data.order); // Update compare link with new vehicle list

        // Update checkboxes
        updateCheckboxStates(data);
    }

    function updateCompareButtonState(data) {
        if (!compareButton) return;
        if (data.hasOwnProperty(vehicleId)) {
            compareButton.textContent = textRemoveButton;
            compareButton.classList.add('compared');
        } else {
            compareButton.textContent = textAddButton;
            compareButton.classList.remove('compared');
        }
    }

    function updateCompareLink(vehicleIds) {
        const currentLocale = window.currentLocale || 'default';
        fetch('/comparison_generate_compare_link.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ vehicleIds, locale: currentLocale })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const compareLink = document.getElementById('compareLink');
                compareLink.href = data.newLink;
            }
        })
        .catch(error => console.error('Error:', error));
    }

    function fetchCurrentComparisonList() {
        const currentLocale = window.currentLocale || 'default';
        return fetch('/comparison_get_list.php?locale=' + encodeURIComponent(currentLocale))
            .then(response => response.json())
            .then(data => {
                updateFooter(data);
                return data;
            })
            .catch(error => console.error('Error fetching comparison list:', error));
    }

    async function toggleVehicleInComparison(vehicleIdToToggle) {
        const currentLocale = window.currentLocale || 'default';
        try {
            await fetch('/comparison_update_list.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'vehicleId=' + vehicleIdToToggle + '&locale=' + encodeURIComponent(currentLocale)
            });
            const data = await fetchCurrentComparisonList();

            // Unhide the footer if it is hidden on small screens
						if (footer && footer.classList.contains('hidden')) {
            	footer.classList.remove('hidden');
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    async function addMultipleVehicles(vehicleIds) {
        const currentLocale = window.currentLocale || 'default';

        try {
            // First, clear the existing vehicles
            await fetch('/comparison_clear_list.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'locale=' + encodeURIComponent(currentLocale)
            });

            // Now add each vehicle
            for (const vehicleId of vehicleIds) {
                if (vehicleIds.length <= maxVehicles) {
                    await fetch('/comparison_update_list.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: 'vehicleId=' + vehicleId + '&locale=' + encodeURIComponent(currentLocale)
                    });
                }
            }
            
            // Fetch the updated list and update the footer
            await fetchCurrentComparisonList();

            // Unhide the footer if it is hidden on small screens
						if (footer && footer.classList.contains('hidden')) {
            	footer.classList.remove('hidden');
            }

        } catch (error) {
            console.error('Error in adding multiple vehicles:', error);
        }
    }

    function updateCheckboxStates(data) {
        const checkboxes = document.querySelectorAll('.vehicle-checkbox');
        const vehicleCount = Object.keys(data).filter(key => key !== 'order').length;

        checkboxes.forEach(checkbox => {
            const vehicleId = checkbox.dataset.vehicleId;
            if (data.hasOwnProperty(vehicleId)) {
                checkbox.checked = true;
            } else {
                checkbox.checked = false;
            }

            // Disable checkbox if max vehicles selected and this vehicle is not in the list
            if (vehicleCount >= maxVehicles && !data.hasOwnProperty(vehicleId)) {
                checkbox.disabled = true;
            } else {
                checkbox.disabled = false;
            }
        });
    }

    document.addEventListener('change', function(event) {
        if (event.target.classList.contains('vehicle-checkbox')) {
            const vehicleId = event.target.dataset.vehicleId;
            toggleVehicleInComparison(vehicleId);
        }
    });

    if (compareButton) {
        compareButton.addEventListener('click', function () {
            fetchCurrentComparisonList()
                .then(data => {
                    const vehicleKeys = Object.keys(data).filter(key => key !== 'order');
                    if (vehicleKeys.length < maxVehicles || vehicleKeys.includes(vehicleId.toString())) {
                        toggleVehicleInComparison(vehicleId);
                    } else {
                        alert('You can only compare up to 4 vehicles.');
                    }
                })
                .catch(error => console.error('Error checking vehicle count:', error));
        });
    }
    
    if (compareSimilarButton) {
        compareSimilarButton.addEventListener('click', function () {
            const vehicleIds = JSON.parse(compareSimilarButton.getAttribute('data-vehicle-ids'));
            addMultipleVehicles(vehicleIds);
        });
    }

    if (footer) {
        footer.addEventListener('click', function(event) {
            if (event.target.className === 'remove-link') {
                event.preventDefault();
                const vehicleIdToRemove = event.target.dataset.id;
                toggleVehicleInComparison(vehicleIdToRemove);
            }
        });
    }

    // Ensure the footer and button states are accurate on page load
    fetchCurrentComparisonList();

    // Scroll detection to show/hide footer on mobile
    window.addEventListener('scroll', function () {
        const st = window.pageYOffset || document.documentElement.scrollTop;

        // Apply scroll effect only on mobile
        if (window.innerWidth <= 450 || window.innerHeight <= 600) {
            if (st > lastScrollTop) {
                // Scroll down
                footer.classList.add('hidden');
            } else if (lastScrollTop - st > scrollThreshold) {
                // Scroll up with threshold
                footer.classList.remove('hidden');
            }
        }

        lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
    }, false);

    // Event listener for filter changes
    $(window).on("lookup", function () {
        fetchCurrentComparisonList().then(data => {
            updateCheckboxStates(data);
        });
    });

    // Initialize jplist
    $('#evdb').jplist({
        animateToTop: 'div.list',
        itemsBox: '.list',
        itemPath: '.list-item',
        panelPath: '.jplist-panel',
        deepLinking: true,
        redrawCallback: function (collection, $dataview, statuses) {
            $(window).trigger("lookup");
            // Call insertAds on page load
            insertAds();
        }
    });
});