define([
    'jquery',
    'jquery/ui',
    'mage/mage',
    'mage/cookies'
],function ($) {
    'use strict';

    if (typeof window.cachedProductLabels === 'undefined') {
        window.cachedProductLabels = {};
    }

    const target = '.product-card .product_image .img-container-inner #product_image-';

    function getFormKey() {
        return $.mage.cookies.get('form_key') || $("input[name=form_key]").val();
    }

    function validateBeforeAjax(productSkus) {
        let skusToFetch = [];
        let cachedDataToRender = {};

        productSkus.forEach(function (sku) {
            if (window.cachedProductLabels[sku]) {
                if (window.cachedProductLabels[sku] !== 'emptyElement') {
                    cachedDataToRender[sku] = window.cachedProductLabels[sku];
                }
            } else {
                skusToFetch.push(sku);
            }
        });

        skusToFetch.sort().join(',');

        return {
            skusToFetch: skusToFetch,
            cachedDataToRender: cachedDataToRender
        };
    }


    function renderLabels(labelData, isAutosuggest = false) {
        if (labelData !== null) {
            Object.entries(labelData).forEach(function ([sku, labelHtml]) {
                if (labelHtml === 'emptyElement') {
                    return;
                }

                if (isAutosuggest) {
                    // Handle autosuggest context - find by data-sku attribute
                    const autosuggestElement = document.querySelector(`[data-sku="${sku}"] .unbxd-as-popular-product-image-container`);
                    if (autosuggestElement) {
                        autosuggestElement.insertAdjacentHTML('afterend', labelHtml);
                    }
                } else {
                    const fullSelector = target + sku;
                    let productImageElement = document.querySelector(fullSelector);

                    if (productImageElement) {
                        productImageElement.parentElement.insertAdjacentHTML('beforeend', labelHtml);
                    }
                }
            });
        }
    }

    return function (config) {
        let productSkus = config.productData && Array.isArray(config.productData) ? config.productData : [];
        let ajaxUrl = config.ajaxActionUrl || '';
        let isAutosuggest = config.isAutosuggest || false;
        
        if (!Array.isArray(productSkus) || productSkus.length === 0) {
            console.warn('No product SKUs provided or productData is not an array.');
            return;
        }
        if (!ajaxUrl) {
            console.error('AJAX URL is missing in the configuration.');
            return;
        }
        let { skusToFetch, cachedDataToRender } = validateBeforeAjax(productSkus);
        if (Object.keys(cachedDataToRender).length > 0) {
            renderLabels(cachedDataToRender, isAutosuggest);
        }
        if (skusToFetch.length === 0) {
            return;
        }

        const formData = new URLSearchParams();
        skusToFetch.forEach(sku => {
            formData.append('productSkus[]', sku);
        });

        const formKey = getFormKey();
        if (formKey) {
            formData.append('form_key', formKey);
        }

        ajaxUrl += '?productSkus=' + skusToFetch;

        fetch(ajaxUrl, {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(`HTTP error! Status: ${response.status}, Message: ${err.message || response.statusText}`);
                    }).catch(() => {
                        throw new Error(`HTTP error! Status: ${response.status}, Message: ${response.statusText}`);
                    });
                }
                return response.json();
            })
            .then(response => {
                if (response && response.success === true) {
                    let productData = response.products ?? null;
                    renderLabels(productData, isAutosuggest);

                    if (productData) {
                        Object.entries(productData).forEach(function ([sku, labelHtml]) {
                            window.cachedProductLabels[sku] = labelHtml;
                        });
                    }
                } else {
                    console.log('Error in fetch response:', response.message || 'Unknown error');
                }
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    };
});