jQuery(document).ready(function ($) {
    // Fetch data via AJAX
    function fetchDashboardData() {
        var $spinner = $('<span class="spinner is-active"></span>'),
            $container = $('.fooconvert-top-performers-container');
        $container.html($spinner);
        $.ajax({
            url: fooconvertData.ajaxUrl,
            method: 'POST',
            data: {
                action: 'fooconvert_dashboard_task',
                task: 'fetch_top_performers',
                sort: $('.fooconvert-top-performers-sort').val(),
                nonce: fooconvertData.nonce
            },
            success: function (response) {
                $('.fooconvert-top-performers-container').html(response.html);
            },
            error: function () {
                $container.html('<p>ERROR : Failed to fetch top performers!</p>');
            }
        });
    }

    function refreshSalesPanel() {
        var $panel = $('.fooconvert-panel[data-panel="recent-sales"]');

        if (!$panel.length || !$panel.is(':visible')) {
            return;
        }

        $.ajax({
            url: fooconvertData.ajaxUrl,
            method: 'POST',
            data: {
                action: 'fooconvert_dashboard_task',
                task: 'fetch_sales_panel',
                nonce: fooconvertData.nonce
            },
            success: function (response) {
                if (response.html) {
                    $panel.replaceWith(response.html);
                }
            }
        });
    }

    // Fetch and display the dashboard data on page load
    fetchDashboardData();

    $('.fooconvert-top-performers-sort').change(function () {
        fetchDashboardData();
    });

    // Update stats
    $('.fooconvert-update-stats').click(function (e) {
        e.preventDefault();
        var $spinner = $('.fooconvert-update-stats-spinner'),
            $button = $(this);
        $spinner.addClass('is-active');
        $button.attr('disabled', 'disabled');
        $.ajax({
            url: fooconvertData.ajaxUrl,
            method: 'POST',
            data: {
                action: 'fooconvert_dashboard_task',
                task: 'update_stats',
                nonce: fooconvertData.nonce
            },
            success: function (response) {
                $spinner.removeClass('is-active');
                $button.removeAttr('disabled');
                $('.fooconvert-last-updated').html(response.message);
                fetchDashboardData();
                refreshSalesPanel();
            },
            error: function () {
                $spinner.removeClass('is-active');
                $button.removeAttr('disabled');
                alert('Failed to update stats!');
            }
        });
    });

    // Create demo popups
    $('.fooconvert-create-demo-popups').click(function (e) {
        e.preventDefault();
        var $spinner = $('.fooconvert-create-demo-popups-spinner');
        $spinner.addClass('is-active');
        $(this).attr('disabled', 'disabled');
        $.ajax({
            url: fooconvertData.ajaxUrl,
            method: 'POST',
            data: {
                action: 'fooconvert_dashboard_task',
                task: 'create_demo_popups',
                nonce: fooconvertData.nonce
            },
            success: function (response) {
                $spinner.removeClass('is-active');
                $('.fooconvert-create-demo-container').html(response.message);
            },
            error: function () {
                $spinner.removeClass('is-active');
                alert('Failed to create demo popups!');
            }
        });
    });

    // Delete demo popups
    $('.fooconvert-delete-demo-popups').click(function (e) {
        e.preventDefault();
        var $spinner = $('.fooconvert-delete-demo-popups-spinner');
        $spinner.addClass('is-active');
        $(this).attr('disabled', 'disabled');
        $.ajax({
            url: fooconvertData.ajaxUrl,
            method: 'POST',
            data: {
                action: 'fooconvert_dashboard_task',
                task: 'delete_demo_popups',
                nonce: fooconvertData.nonce
            },
            success: function (response) {
                $spinner.removeClass('is-active');
                $('.fooconvert-delete-demo-container').html(response.message);
            },
            error: function () {
                $spinner.removeClass('is-active');
                alert('Failed to delete demo popups!');
            }
        });
    });

    // Hide panel
    $(document).on('click', '.fooconvert-hide-panel', function (e) {
        e.preventDefault();
        var $spinner = $('<span class="spinner is-active panel-hide-spinner"></span>'),
            $link = $(this),
            panel = $(this).data('panel'),
            $panel = $('.fooconvert-panel[data-panel="' + panel + '"]');

        $link.hide().after($spinner);

        $.ajax({
            url: fooconvertData.ajaxUrl,
            method: 'POST',
            dataType: 'json',
            data: {
                action: 'fooconvert_dashboard_task',
                task: 'hide_panel',
                panel: panel,
                nonce: fooconvertData.nonce
            },
            success: function (response) {
                $spinner.remove();
                if (response && response.success) {
                    $panel.hide();
                    return;
                }

                $link.show();
                alert(response && response.data && response.data.message ? response.data.message : 'Failed to hide panel!');
            },
            error: function () {
                $spinner.remove();
                $link.show();
                alert('Failed to hide panel!');
            }
        });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    const sliderWrapper = document.querySelector('.fooconvert-slider-wrapper');
    const slides = document.querySelectorAll('.fooconvert-slide');
    const sliderNav = document.querySelector('.fooconvert-slider-nav');
    const prevButton = document.querySelector('.fooconvert-slider-prev');
    const nextButton = document.querySelector('.fooconvert-slider-next');

    let currentIndex = 0;

    // Hide navigation buttons if there is only one slide
    if (slides.length > 1) {
        sliderNav.style.display = 'flex';
    } else {
        return; // Exit script since we don't need navigation
    }

    function updateSliderPosition() {
        sliderWrapper.style.transform = `translateX(-${currentIndex * 50}%)`;
    }

    prevButton.addEventListener('click', () => {
        currentIndex = (currentIndex > 0) ? currentIndex - 1 : slides.length - 1;
        updateSliderPosition();
    });

    nextButton.addEventListener('click', () => {
        currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
        updateSliderPosition();
    });

    // Auto slide every 5 seconds
    setInterval(() => {
        currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
        updateSliderPosition();
    }, 5000);
});
