/**
 * Elementor Widget JavaScript for Product Display
 */
(function($) {
    'use strict';

    // Wait for Elementor to be ready
    $(window).on('elementor/frontend/init', function() {
        
        // Handle showcase selection change in editor
        if (window.elementor && elementor.hooks) {
            elementor.hooks.addAction('panel/open_editor/widget/product-display-showcase', function(panel, model, view) {
                
                // Add event listener for showcase selection
                panel.$el.on('change', '[data-setting="showcase_id"]', function() {
                    var showcaseId = $(this).val();
                    updateShowcaseInfo(showcaseId, panel.$el);
                });
                
                // Initial load
                var initialShowcaseId = model.get('settings').get('showcase_id');
                if (initialShowcaseId) {
                    updateShowcaseInfo(initialShowcaseId, panel.$el);
                }
            });
        }
    });

    /**
     * Update showcase information display
     */
    function updateShowcaseInfo(showcaseId, panelEl) {
        if (!showcaseId) {
            panelEl.find('#proddisp-showcase-info').hide();
            return;
        }

        // Check if we have the required variables
        if (typeof ajaxurl === 'undefined' || typeof proddisp_elementor === 'undefined') {
            console.error('Product Display: Required variables not found');
            return;
        }

        // Make AJAX request to get showcase details
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'proddisp_get_showcase_info',
                showcase_id: showcaseId,
                nonce: proddisp_elementor.nonce
            },
            success: function(response) {
                if (response.success && response.data) {
                    var info = response.data;
                    var detailsHtml = '<ul style="margin: 5px 0; padding-left: 15px; font-size: 12px;">';
                    detailsHtml += '<li><strong>Layout:</strong> ' + info.layout + '</li>';
                    if (info.mode) {
                        detailsHtml += '<li><strong>Mode:</strong> ' + info.mode + '</li>';
                    }
                    detailsHtml += '<li><strong>Products:</strong> ' + info.product_count + '</li>';
                    detailsHtml += '<li><strong>Columns:</strong> ' + info.columns + '</li>';
                    detailsHtml += '</ul>';
                    
                    panelEl.find('#proddisp-showcase-details').html(detailsHtml);
                    panelEl.find('#proddisp-showcase-info').show();
                } else {
                    console.error('Product Display: Failed to get showcase info', response);
                    panelEl.find('#proddisp-showcase-info').hide();
                }
            },
            error: function(xhr, status, error) {
                console.error('Product Display: AJAX error', error);
                panelEl.find('#proddisp-showcase-info').hide();
            }
        });
    }

    // Additional initialization for frontend
    $(document).ready(function() {
        // Any frontend-specific JavaScript can go here
        $('.proddisp-elementor-widget').each(function() {
            // Widget-specific initialization
        });
    });

})(jQuery);