define([
    'jquery',
    'underscore',
    'Magento_Catalog/js/price-utils',
    'Codilar_ProductListing/js/product_label',
    'mage/url',
    'mage/translate',
    'Codilar_ProductListing/js/product-item',
], function ($, _, priceUtils, loadAndRenderProductLabels, urlBuilder) {
    'use strict';

    return async function (recommendationContainers, configData) {

        /**
         * Read a specific cookie value by key
         * @param {string} key
         * @returns {string|null}
         */
        const readCookie = (key) => {
            const cookies = document.cookie.split('; ');
            for (const cookie of cookies) {
                const parts = cookie.split('=');
                const name = decode(parts.shift());
                const value = decode(parts.join('='));
                if (key === name) {
                    return value;
                }
            }
            return null;
        };

        /**
         * Decode URI-encoded cookie strings
         * @param {string} str
         * @returns {string}
         */
        const decode = (str) => {
            try {
                if (str.startsWith('"')) {
                    str = str.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
                }
                return decodeURIComponent(str.replace(/\+/g, ' '));
            } catch (e) {
                console.error('Failed to decode cookie:', e);
                return str;
            }
        };

        const beforeTemplateRenderer = function(templateData){
            return templateData;
        }

        const afterTemplateRenderer = function(templateData){
            let skus = [];
            const widgetId = templateData.analyticsData.widgetNum;
            const swiperContainers = document.querySelectorAll(`#${widgetId} .products.wrapper.grid.products-grid.products-recommended.swiper`);

            swiperContainers.forEach(function (swiperContainer) {

                const swiperWrapper = swiperContainer.querySelector('.swiper-wrapper');

                if (!swiperWrapper) {
                    console.warn(`Swiper wrapper not found for widget ${widgetId}. Skipping Swiper initialization.`);
                    return;
                }

                swiperWrapper.querySelectorAll('.product-card').forEach(function (productCard) {
                    const sku = productCard.dataset.productSku;
                    if (sku) {
                        skus.push(sku);
                    }
                });

                $(swiperWrapper).find('.product-item-actions').productItems();

                initializeSwiperCarousel(swiperContainer);
            });

            loadAndRenderProductLabels({
                productData: skus,
                ajaxActionUrl: urlBuilder.build('/product_listing/productlabel/index')
            });
        }

        /**
         * Initialize recommendation request using Unbxd SDK
         * @param {Array} widgets
         * @returns {Promise<Array>}
         */
        const init = (widgets) => {
            const pageInfo = window.Codilar_Recommendation_Page_Info;

            const extraParams = {
                netcoreId: netcoreId,
                rows: rows
            };

            if (typeof window.getUnbxdRecommendations === 'function') { // Corrected to window.getUnbxdRecommendations
                window.getUnbxdRecommendations({
                    widgets: widgets,
                    userInfo: {
                        userId: readCookie('unbxd.userId'),
                        siteKey: window.UnbxdSiteName,
                        apiKey: window.UnbxdApiKey
                    },
                    pageInfo,
                    extraParams: extraParams,
                    itemClickHandler: function (product) {
                        // Replaced alert with console.log for better user experience in Magento
                        console.log('Product clicked:', JSON.stringify(product));
                    },
                    dataParser: function (templateData) {
                        return templateData;
                    }
                });
            } else {
                console.error('Unbxd Recommendations SDK not loaded.'); // Changed reject to console.error
            }
        };

        /**
         * Initialize Swiper Carousel with responsive settings
         * @param {HTMLElement} carouselContainer The native DOM element of the Swiper container
         */
        const initializeSwiperCarousel = (carouselContainer) => {

            if (typeof Swiper === 'undefined') {
                console.error('Swiper library not loaded. Check requirejs-config.js and network.');
                return;
            }

            if (carouselContainer.swiper) {
                console.log('Swiper already initialized on element:', carouselContainer);
                return;
            }

            const sliderConfig = configData.getRecsSliderConfig;

            const finalConfig = Object.assign({}, sliderConfig, {
                navigation: {
                    nextEl: $(carouselContainer).find('.swiper-button-next')[0],
                    prevEl: $(carouselContainer).find('.swiper-button-prev')[0],
                },

                scrollbar: {
                    el: $(carouselContainer).find('.swiper-scrollbar')[0],
                    draggable: true,
                    enabled: true,
                },
            });

            const isHomePage = $('body').hasClass('cms-index-index');

            if(isHomePage) {
                finalConfig.breakpoints['768'].slidesPerView = 3.4;
                finalConfig.breakpoints['1200'].slidesPerView = 4.4;
                finalConfig.breakpoints['1400'].slidesPerView = 5.4;
            }

            const mySwiper = new Swiper(carouselContainer, finalConfig);
        };

        const queryParams = new URLSearchParams(window.location.search);
        const netcoreId = queryParams.get('netcoreId') || '';
        const rows = queryParams.get('rows') || '18';
        const widgetParam = queryParams.get('widget') || '';

        const widgetMap = {
            tp: "widget1",
            bab: "widget2",
            rfu: "widget3"
        };

        const allWidgets = [
            { name: "widget1", selector: "WIDGET1" },
            { name: "widget2", selector: "WIDGET2" },
            { name: "widget3", selector: "WIDGET3" }
        ];

        window.CodilarRecsConfig = {
            getColorValue: (color) => {
                return color?.split(':')[0];
            },
            formatPrice: (price) => priceUtils.formatPrice(
                price * configData.currencyExchangeRate,
                JSON.parse(configData.priceFormat)
            ),
            getWishlistUrl: (productId) => {
                const baseUrl =  window.BASE_URL ?? '/';
                const action = `${baseUrl}wishlist/index/add/`;
                const uenc = btoa(window.location.href);

                return JSON.stringify({
                    action,
                    data: {
                        product: productId,
                        uenc
                    }
                }).replace(/"/g, '&quot;').replace(/\//g, '\\/');
            },
            translate: (text) => {
                return configData.translations[text] || text;
            },
            isRatingEnabled: configData.isRatingEnabled
        }

        const recsInit = function () {

            if( typeof window._unbxd_registerHook !== 'function') {
                console.error('window register hook is not available')
                return;
            }

            window._unbxd_registerHook("beforeTemplateRender", beforeTemplateRenderer);
            window._unbxd_registerHook("afterTemplateRender", afterTemplateRenderer);


            const widgetsConfig = widgetParam && widgetMap[widgetParam]
                ? allWidgets.filter(widget => widget.name === widgetMap[widgetParam])
                : allWidgets;

            init(widgetsConfig);
        }

        $(document).ready(function () {
            recsInit();
        });
    }
});