// Array of scripts to load
const scriptsToLoad = [
    'jquery.ui.touch-punch.min.js',
    'jplist.core.min.js',
    'jplist.jquery-ui-bundle.min.js',
    'jplist.pagination-bundle.min.js',
    'jplist.filter-toggle-bundle.min.js',
    'jplist.textbox-filter.min.js',
    'jplist.history-bundle.min.js',
    'jplist.checkbox-dropdown.min.js',
    'jplist.counter-control.min.js',
    'jplist.sort-bundle.min.js'
];

// Function to load a script
function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

// Function to load all scripts
async function loadAllScripts() {
    for (const script of scriptsToLoad) {
        await loadScript(`/js/${script}`);
    }
}

// Function to get current script's URL parameters
function getCurrentScriptParams() {
    const script = document.getElementById('homepage-script');
    if (!script) {
        console.error('Homepage script not found');
        return {};
    }
    const src = script.src;
    // console.log('Homepage script src:', src);
    const urlParams = new URLSearchParams(src.split('?')[1]);
    const params = Object.fromEntries(urlParams);
    // console.log('Extracted parameters:', params);
    return params;
}

// Function to fetch configuration
async function fetchConfig() {
    const currentParams = getCurrentScriptParams();
    const queryString = new URLSearchParams(currentParams).toString();
    // console.log('Query string being sent to config.php:', queryString);
    const response = await fetch('/src/config.php?' + queryString);
    const config = await response.json();
    // console.log('Received config from server:', config);
    return config;
}

// Function to insert ads
function insertAds() {
    // Remove existing ads to prevent duplicates
    document.querySelectorAll('.list .adslot_container').forEach(ad => ad.remove());

    const items = document.querySelectorAll('.list .list-item');
    if (items.length < 5) {
        return; // Not enough items to process, exit function
    }

    items.forEach((item, index) => {
        // Determine if the current index allows for 5 subsequent items
        let canPlaceAd = (items.length - index > 5);

        // Place the first ad after the 5th item if there are at least 5 more items following
        if (index === 4 && canPlaceAd) {
            insertAdSlot(item);
        }
        // Place subsequent ads after every 10 items, ensuring 5 more items follow
        else if (index > 4 && (index - 4) % 10 === 0 && canPlaceAd) {
            insertAdSlot(item);
        }
    });
}

function insertAdSlot(item) {
    const adSlot = document.createElement('div');
    adSlot.className = 'adslot_container';
    adSlot.innerHTML = '<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5409517482266138" data-ad-slot="4933524568" data-ad-format="auto" data-full-width-responsive="true"></ins>';
    item.parentNode.insertBefore(adSlot, item.nextSibling);
    (adsbygoogle = window.adsbygoogle || []).push({});
}

// Function to initialize jpList
function initializeJpList(config) {
    // console.log('Initializing jpList');
    $('#evdb').jplist({				
        animateToTop: 'div.list', 
        itemsBox: '.list', 
        itemPath: '.list-item', 
        panelPath: '.jplist-panel',
        deepLinking: true,
        redrawCallback: function(collection, $dataview, statuses) { 
            //	console.log('jpList redrawCallback triggered');
            $(window).trigger("lookup");

            // // Remove loading overlay and show vehicles container with proper transition
            // $('.loading-overlay').fadeOut('fast', function() {
            //     $('.list').fadeIn('fast');
            // });
            
            // // Check if there are any results after redraw
            // const hasResults = collection.length > 0;
            
            // // Show/hide no results message with proper transition
            // $('.jplist-no-results').fadeIn(hasResults ? 'fast' : 'slow');

            insertAds();
        }
    });


}

// Main function to initialize everything
function initializeApp(config) {
    console.log('Initializing app with config:', config);
    // Set up jQuery UI tooltip
    $(function() {
        $( document ).tooltip();
    });

    $("#toggle-more-options").click(function(){
        $(".more-options-container").slideToggle();
    
        // Toggle the icon class between down and up arrows
        var icon = $(this).find('i.fas');
        if(icon.hasClass('fa-angle-double-down')) {
            icon.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
        } else {
            icon.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
        }
    });

    jQuery.fn.jplist.settings = {
        erangeSlider: function ($slider, $prev, $next){
            $slider.slider({
                min: config.erangeSlider_min,
                max: config.erangeSlider_max,
                step: 50,
                range: true,
                values: [config.erangeSlider_min, config.erangeSlider_max],
                slide: function (event, ui){
                    $prev.text(ui.values[0].toLocaleString(config.Locale_Active));
                    $next.text(ui.values[1].toLocaleString(config.Locale_Active) + ' ' + config.Units_Distance);
                }
            });
        },
        erangeValues: function ($slider, $prev, $next){
            $prev.text($slider.slider('values', 0).toLocaleString(config.Locale_Active));
            $next.text($slider.slider('values', 1).toLocaleString(config.Locale_Active) + ' ' + config.Units_Distance);
        },
        towweightSlider: function ($slider, $prev, $next){
            $slider.slider({
                min: config.towweightSlider_min,
                max: config.towweightSlider_max,
                step: config.towweightSlider_step,
                range: true,
                values: [config.towweightSlider_min, config.towweightSlider_max],
                slide: function (event, ui){
                    $prev.text(ui.values[0].toLocaleString(config.Locale_Active));
                    $next.text(ui.values[1].toLocaleString(config.Locale_Active) + ' ' + config.Units_Weight);
                }
            });
        },
        towweightValues: function ($slider, $prev, $next){
            $prev.text($slider.slider('values', 0).toLocaleString(config.Locale_Active));
            $next.text($slider.slider('values', 1).toLocaleString(config.Locale_Active) + ' ' + config.Units_Weight);
        },
        batterySlider: function ($slider, $prev, $next){
            $slider.slider({
                min: config.batterySlider_min,
                max: config.batterySlider_max,
                step: config.batterySlider_step,
                range: true,
                values: [config.batterySlider_min, config.batterySlider_max],
                slide: function (event, ui){
                    $prev.text(ui.values[0]);
                    $next.text(ui.values[1] + ' kWh');
                }
            });
        },
        batteryValues: function ($slider, $prev, $next){
            $prev.text($slider.slider('values', 0));
            $next.text($slider.slider('values', 1) + ' kWh');
        },
        effSlider: function ($slider, $prev, $next){
            $slider.slider({
                min: config.effSlider_min,
                max: config.effSlider_max,
                step: 10,
                range: true,
                values: [config.effSlider_min, config.effSlider_max],
                slide: function (event, ui){
                    $prev.text(ui.values[0]);
                    $next.text(ui.values[1] + ' ' + config.Units_Efficiency);
                }
            });
        },
        effValues: function ($slider, $prev, $next){
            $prev.text($slider.slider('values', 0));
            $next.text($slider.slider('values', 1) + ' ' + config.Units_Efficiency);
        },
        accelerationSlider: function ($slider, $prev, $next){
            $slider.slider({
                min: config.accelerationSlider_min,
                max: config.accelerationSlider_max,
                range: true,
                values: [config.accelerationSlider_min, config.accelerationSlider_max],
                slide: function (event, ui){
                    $prev.text(ui.values[0]);
                    $next.text(ui.values[1] + ' s');
                }
            });
        },
        accelerationValues: function ($slider, $prev, $next){
            $prev.text($slider.slider('values', 0));
            $next.text($slider.slider('values', 1) + ' s');
        },
        fastchargeSlider: function ($slider, $prev, $next){
            $slider.slider({
                min: config.fastchargeSlider_min,
                max: config.fastchargeSlider_max,
                range: true,
                step: 100,
                values: [config.fastchargeSlider_min, config.fastchargeSlider_max],
                slide: function (event, ui){
                    $prev.text(ui.values[0].toLocaleString(config.Locale_Active));
                    $next.text(ui.values[1].toLocaleString(config.Locale_Active) + ' ' + config.Units_Speed);
                }
            });
        },
        fastchargeValues: function ($slider, $prev, $next){
            $prev.text($slider.slider('values', 0).toLocaleString(config.Locale_Active));
            $next.text($slider.slider('values', 1).toLocaleString(config.Locale_Active) + ' ' + config.Units_Speed);
        },
        topspeedSlider: function ($slider, $prev, $next){
            $slider.slider({
                min: config.topspeedSlider_min,
                max: config.topspeedSlider_max,
                range: true,
                step: 10,
                values: [config.topspeedSlider_min, config.topspeedSlider_max],
                slide: function (event, ui){
                    $prev.text(ui.values[0]);
                    $next.text(ui.values[1] + ' ' + config.Units_Speed);
                }
            });
        },
        topspeedValues: function ($slider, $prev, $next){
            $prev.text($slider.slider('values', 0));
            $next.text($slider.slider('values', 1) + ' ' + config.Units_Speed);
        },
        priceSlider: function ($slider, $prev, $next){
            var maxPrice = config.priceSlider_max;
            var currencyUnit = config.Units_Currency;

            $slider.slider({
                min: config.priceSlider_min,
                max: maxPrice,
                range: true,
                step: config.priceSlider_step,
                values: [config.priceSlider_min, config.priceSlider_max],
                slide: function (event, ui){
                    var displayValue1 = ui.values[0].toLocaleString(config.Locale_Active);
                    var displayValue2 = ui.values[1] == maxPrice ? ui.values[1].toLocaleString(config.Locale_Active) + "+" + currencyUnit : ui.values[1].toLocaleString(config.Locale_Active) + currencyUnit;
                    $prev.text(displayValue1);
                    $next.text(displayValue2);
                }
            });
        },
        priceValues: function ($slider, $prev, $next){
            var maxPrice = config.priceSlider_max;
            var currencyUnit = config.Units_Currency;
            var value1 = $slider.slider('values', 0).toLocaleString(config.Locale_Active);
            var value2 = $slider.slider('values', 1);
            var displayValue2 = value2 == maxPrice ? value2.toLocaleString(config.Locale_Active) + '+' + currencyUnit : value2.toLocaleString(config.Locale_Active) + currencyUnit;

            $prev.text(value1);
            $next.text(displayValue2);
        },
        safetySlider: function ($slider, $prev, $next) {
            $slider.slider({
                min: config.safetySlider_min,
                max: config.safetySlider_max,
                range: true,
                step: config.safetySlider_step,
                values: [config.safetySlider_min, config.safetySlider_max],
                slide: function (event, ui) {
                    $prev.text(ui.values[0] === -1 ? config.Text_Unrated : ui.values[0]);
                    $next.text((ui.values[1] === -1 ? config.Text_Unrated : ui.values[1]) + (ui.values[1] === -1 ? "" : ' ' + config.Units_Safety));
                }
            });
        },
        safetyValues: function ($slider, $prev, $next) {
            let value0 = $slider.slider('values', 0);
            let value1 = $slider.slider('values', 1);
            $prev.text(value0 === -1 ? config.Text_Unrated : value0);
            $next.text((value1 === -1 ? config.Text_Unrated : value1) + (value1 === -1 ? "" : ' ' + config.Units_Safety));
        }
    };

    // Initialize jpList when the DOM is ready
    $(document).ready(function() {
        console.log('DOM ready, initializing jpList...');
        initializeJpList(config);
    });
}

// Load all scripts, then fetch config and initialize app
loadAllScripts()
    .then(() => {
        console.log('All scripts loaded, fetching config...');
        return fetchConfig();
    })
    .then(initializeApp)
    .catch(error => console.error('Error loading scripts or initializing app:', error));