jQuery(document).ready(function($) {
    const $modal = $('#demo-setup-modal');
    const $progressContent = $('#demo-progress-content');
    const $closeBtn = $('#demo-modal-close');
    const $triggerBtn = $('#setup-demo-import');
    const $progressDiv = $('#setup-demo-progress');

    // Steps configuration
    const steps = [
        { id: 'install_plugins', label: 'Installing plugins' },
        { id: 'import_books', label: 'Importing books' },
        { id: 'import_posts', label: 'Importing posts' },
        { id: 'import_templates', label: 'Importing templates' }
    ];

    $triggerBtn.on('click', function(e) {
        e.preventDefault();
        let stepIndex = 0;

        // Show modal
        $modal.show();
        $progressContent.html('<p>Starting demo setup...</p>');

        function runNextStep() {
            if (stepIndex >= steps.length) {
                $progressContent.append('<p><strong>✅ Demo Setup Complete!</strong></p>');
                $progressDiv.html('Demo setup completed! <a href="#" id="view-details">View Details</a>');
                setTimeout(function() {
                    location.reload();
                }, 1000); // 1-second delay for visibility
                return;
            }

            const currentStep = steps[stepIndex];
            $progressContent.append(`<p><strong>Processing:</strong> ${currentStep.label}...</p>`);

            $.ajax({
                url: setupDemoAjax.ajax_url,
                method: 'POST',
                data: {
                    action: 'setup_demo_ajax',
                    step: currentStep.id,
                    nonce: setupDemoAjax.nonce
                },
                success: function(response) {
                    if (response.success) {
                        $progressContent.append(`<p>✔️ ${response.data}</p>`);
                        stepIndex++;
                        runNextStep();
                    } else {
                        $progressContent.append(`<p>❌ Error: ${response.data}</p>`);
                        $progressDiv.html('Demo setup failed. Check details.');
                    }
                },
                error: function() {
                    $progressContent.append('<p>❌ Request failed. Please try again.</p>');
                    $progressDiv.html('Demo setup failed. Check details.');
                }
            });
        }

        runNextStep();
    });

    // Close modal handlers
    $closeBtn.on('click', function() {
        $modal.hide();
    });

    $(window).on('click', function(e) {
        if (e.target === $modal[0]) {
            $modal.hide();
        }
    });

    // View details link handler
    $(document).on('click', '#view-details', function(e) {
        e.preventDefault();
        $modal.show();
    });

    // Notice dismissal and remind handlers
    $('.author-portfolio-notice__dismiss-forever, .author-portfolio-notice__remind-later').on('click', function(e) {
        e.preventDefault();
        var action = $(this).data('action');
        $.ajax({
            url: setupDemoAjax.ajax_url,
            method: 'POST',
            data: {
                action: 'author_portfolio_notice_action',
                action_type: action,
                notice_nonce: setupDemoAjax.notice_nonce
            },
            success: function(response) {
                if (response.success) {
                    location.reload(); // Reload the page to reflect the updated options
                } else {
                    console.log('Error:', response);
                }
            },
            error: function(xhr, status, error) {
                console.log('AJAX Error:', error);
            }
        });
    });
});