function mxchatOpenEditModal(intentId, phrases) {
    const modal = document.getElementById('mxchat-edit-modal');
    if (!modal) return;
    const intentIdField = document.getElementById('edit_intent_id');
    const phrasesField = document.getElementById('edit_phrases');

    intentIdField.value = intentId;
    phrasesField.value = phrases;
    modal.style.display = 'block';
}




jQuery(document).ready(function($) {
    //console.log('Script loaded'); // Confirm script is loading


// --- AJAX Auto-Save ---
// Only target elements within the autosave sections
const $autosaveSections = $('.mxchat-autosave-section');

if ($autosaveSections.length) {
   // Handle real-time range slider value updates
   $autosaveSections.find('input[type="range"]').on('input', function() {
       const value = $(this).val();
       $('#threshold_value').text(value);
   });

   // Handle all input changes (including range slider)
   $autosaveSections.find('input, textarea, select').on('change', function() {
       const $field = $(this);
       const name = $field.attr('name');
       let value;

       // Handle different input types
       if ($field.attr('type') === 'checkbox') {
           value = $field.is(':checked') ? 'on' : 'off';
       } else {
           value = $field.val();
       }

       // Create feedback container
       const feedbackContainer = $('<div class="feedback-container"></div>');
       const spinner = $('<div class="saving-spinner"></div>');
       const successIcon = $('<div class="success-icon">✔</div>');

       // Position feedback container based on input type
       if ($field.closest('.toggle-switch').length) {
           $field.closest('.toggle-switch').after(feedbackContainer);
       } else if ($field.closest('.slider-container').length) {
           $field.closest('.slider-container').after(feedbackContainer);
       } else {
           $field.after(feedbackContainer);
       }
       feedbackContainer.append(spinner);

       // AJAX save request
       $.ajax({
           url: mxchatAdmin.ajax_url,
           type: 'POST',
           data: {
               action: 'mxchat_save_setting',
               name: name,
               value: value,
               _ajax_nonce: mxchatAdmin.setting_nonce
           },
           success: function(response) {
               if (response.success) {
                   spinner.fadeOut(200, function() {
                       feedbackContainer.append(successIcon);
                       successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
                           feedbackContainer.remove();
                       });
                   });
               } else {
                   alert('Error saving: ' + response.data.message);
                   if ($field.attr('type') === 'checkbox') {
                       $field.prop('checked', !$field.is(':checked'));
                   }
                   feedbackContainer.remove();
               }
           },
           error: function() {
               alert('An error occurred while saving.');
               if ($field.attr('type') === 'checkbox') {
                   $field.prop('checked', !$field.is(':checked'));
               }
               feedbackContainer.remove();
           }
       });
   });

   // Initialize color pickers with debouncing
   $autosaveSections.find('.my-color-field').wpColorPicker({
       change: _.debounce(function(event, ui) {
           const $field = $(this);
           const name = $field.attr('name');
           const value = $field.val();

           // Create feedback container
           const feedbackContainer = $('<div class="feedback-container"></div>');
           const spinner = $('<div class="saving-spinner"></div>');
           const successIcon = $('<div class="success-icon">✔</div>');

           // Position feedback container
           $field.closest('.wp-picker-container').after(feedbackContainer);
           feedbackContainer.append(spinner);

           // AJAX save request
           $.ajax({
               url: mxchatAdmin.ajax_url,
               type: 'POST',
               data: {
                   action: 'mxchat_save_setting',
                   name: name,
                   value: value,
                   _ajax_nonce: mxchatAdmin.setting_nonce
               },
               success: function(response) {
                   if (response.success) {
                       spinner.fadeOut(200, function() {
                           feedbackContainer.append(successIcon);
                           successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
                               feedbackContainer.remove();
                           });
                       });
                   } else {
                       alert('Error saving: ' + response.data.message);
                       feedbackContainer.remove();
                   }
               },
               error: function() {
                   alert('An error occurred while saving.');
                   feedbackContainer.remove();
               }
           });
       }, 500)
   });
}

    // --- Tab Navigation and Toggles ---

    $('.mxchat-nav-tab').on('click', function(e) {
        e.preventDefault();
        $('.mxchat-nav-tab').removeClass('mxchat-nav-tab-active');
        $(this).addClass('mxchat-nav-tab-active');
        $('.mxchat-tab-content').removeClass('active').hide();
        var activeTab = $(this).attr('href');
        $(activeTab).addClass('active').show();
    });

    // Activate the first tab by default
    $('.mxchat-nav-tab-active').trigger('click');


    // Attach click event to dynamically call the function
    $(document).on('click', '.mxchat-edit-button', function() {
        const intentId = $(this).data('intent-id');
        const phrases = $(this).data('phrases');
        mxchatOpenEditModal(intentId, phrases);
    });

    // Toggle visibility of various API keys
    function toggleVisibility(selector) {
        $(selector).on('click', function() {
            var inputField = $(this).prev('input');
            if (inputField.attr('type') === 'password') {
                inputField.attr('type', 'text');
                $(this).text('Hide');
            } else {
                inputField.attr('type', 'password');
                $(this).text('Show');
            }
        });
    }
    toggleVisibility('#toggleApiKeyVisibility');
    toggleVisibility('#toggleWooCommerceSecretVisibility');
    toggleVisibility('#toggleLoopsApiKeyVisibility');
    toggleVisibility('#toggleXaiApiKeyVisibility');
    toggleVisibility('#toggleClaudeApiKeyVisibility');
    toggleVisibility('#toggleBraveApiKeyVisibility');
    toggleVisibility('#toggleWebhookUrlVisibility');
    toggleVisibility('#toggleSecretKeyVisibility');
    toggleVisibility('#toggleBotTokenVisibility');
    toggleVisibility('#toggleDeepSeekApiKeyVisibility');


    // --- Add Intent Form Submission ---

    $('#mxchat-add-intent-form').on('submit', function(event) {
        $('#mxchat-intent-loading').show();
        $('#mxchat-intent-loading-text').show();
        $(this).find('button[type="submit"]').hide(); // Hide the submit button to prevent multiple clicks
    });

    // --- Inline Edit Functionality ---

    $('.edit-button').on('click', function() {
        var row = $(this).closest('tr');
        row.find('.content-view, .url-view').hide();
        row.find('.content-edit, .url-edit').show();
        row.find('.edit-button').hide();
        row.find('.save-button').show();
    });

$('.save-button').on('click', function() {
    var button = $(this);
    var row = button.closest('tr');
    var id = button.data('id');
    var newContent = row.find('.content-edit').val();
    var newUrl = row.find('.url-edit').val();

    // Add loading state
    button.prop('disabled', true);
    button.text('Saving...');

    $.ajax({
        url: mxchatAdmin.ajax_url,
        type: 'POST',
        data: {
            action: 'mxchat_save_inline_prompt',
            id: id,
            article_content: newContent,
            article_url: newUrl,
            _ajax_nonce: mxchatAdmin.inline_edit_nonce
        },
        success: function(response) {
            button.prop('disabled', false);
            button.text('Save');
            
            if (response.success) {
                // Update the view
                row.find('.content-view').html(newContent.replace(/\n/g, "<br>"));
                if (newUrl) {
                    row.find('.url-view').html('<a href="' + newUrl + '" target="_blank">' + newUrl + '</a>');
                } else {
                    row.find('.url-view').html('N/A');
                }
                
                // Hide edit fields, show view fields
                row.find('.content-edit, .url-edit').hide();
                row.find('.content-view, .url-view').show();
                row.find('.save-button').hide();
                row.find('.edit-button').show();
            } else {
                alert('Error saving content: ' + (response.data?.message || 'Unknown error'));
            }
        },
        error: function() {
            button.prop('disabled', false);
            button.text('Save');
            alert('An error occurred while saving.');
        }
    });
});

    // --- Activation Script ---

    // Select activation-related elements
    var form = $('#mxchat-activation-form');
    var spinner = $('#mxchat-activation-spinner');
    var submitButton = $('#activate_license_button');
    var licenseStatus = $('#mxchat-license-status');

    // Ensure essential elements exist before running activation-specific code
    if (form.length && licenseStatus.length && submitButton.length) {
        //console.log('Activation elements detected, running activation-specific code.');

        // Function to handle the response from the activation AJAX request
        function handleActivationResponse(response) {
            spinner.hide(); // Hide the spinner

            if (response.success) {
                // Update UI on successful activation
                licenseStatus.text('Active');
                licenseStatus.removeClass('inactive').addClass('active');
                form.hide(); // Hide the activation form after successful activation
            } else {
                licenseStatus.text('Inactive');
                alert(response.data || 'Activation failed. Please check your input.');
                submitButton.prop('disabled', false); // Re-enable button on failure
            }
        }

        // Event listener for form submission to activate the license
        form.on('submit', function(event) {
            event.preventDefault();
        
            // Show spinner and disable the submit button
            spinner.show();
            submitButton.prop('disabled', true);
        
            // Gather form data
            var formData = {
                action: 'mxchat_activate_license',
                mxchat_pro_email: $('#mxchat_pro_email').val(),
                mxchat_activation_key: $('#mxchat_activation_key').val(),
                security: mxchatAdmin.license_nonce  // FIXED: Using correct nonce
            };
        
            // Send the AJAX request using jQuery
            $.post(mxchatAdmin.ajax_url, formData, function(response) {
                handleActivationResponse(response);
            }).fail(function() {
                alert('Server error. Please try again.');
                spinner.hide();
                submitButton.prop('disabled', false);
            });
        });
    } else {
        //console.log('Activation elements not found; skipping activation-specific code.');
    }




 // Handle adding new questions
    $('.mxchat-add-question').on('click', function () {
        const container = $('#mxchat-additional-questions-container');
        const questionCount = container.find('.mxchat-question-row').length + 4;
        const questionIndex = container.find('.mxchat-question-row').length;

        const newQuestion = `
            <div class="mxchat-question-row">
                <input type="text"
                       name="additional_popular_questions[]"
                       placeholder="Enter Additional Popular Question ${questionCount}"
                       class="regular-text mxchat-question-input"
                       data-question-index="${questionIndex}" />
                <button type="button" class="button mxchat-remove-question"
                        aria-label="Remove question">Remove</button>
            </div>
        `;
        container.append(newQuestion);
    });

    // Handle removing questions
    $(document).on('click', '.mxchat-remove-question', function () {
        const $row = $(this).closest('.mxchat-question-row');
        $row.remove();

        // Save the updated questions array after removal
        saveQuestions();
    });

    // Handle question input changes
    $(document).on('change', '.mxchat-question-input', function() {
        saveQuestions();
    });

    // Function to save all questions
    function saveQuestions() {
        const questions = [];
        $('.mxchat-question-input').each(function() {
            const value = $(this).val().trim();
            if (value) {
                questions.push(value);
            }
        });

        // Create feedback container
        const feedbackContainer = $('<div class="feedback-container"></div>');
        const spinner = $('<div class="saving-spinner"></div>');
        const successIcon = $('<div class="success-icon">✔</div>');

        // Append feedback after the add button
        $('.mxchat-add-question').after(feedbackContainer);
        feedbackContainer.append(spinner);

        // Save via AJAX
        $.ajax({
            url: mxchatAdmin.ajax_url,
            type: 'POST',
            data: {
                action: 'mxchat_save_setting',
                name: 'additional_popular_questions',
                value: JSON.stringify(questions),
                _ajax_nonce: mxchatAdmin.setting_nonce
            },
            success: function(response) {
                if (response.success) {
                    spinner.fadeOut(200, function() {
                        feedbackContainer.append(successIcon);
                        successIcon.fadeIn(200).delay(1000).fadeOut(200, function() {
                            feedbackContainer.remove();
                        });
                    });
                } else {
                    alert('Error saving questions: ' + response.data.message);
                    feedbackContainer.remove();
                }
            },
            error: function() {
                alert('An error occurred while saving questions.');
                feedbackContainer.remove();
            }
        });
    }

const statusToggle = document.getElementById('live_agent_status');
const statusText = statusToggle?.parentElement.nextElementSibling?.querySelector('.status-text');
if (statusToggle && statusText) {
    statusToggle.addEventListener('change', function() {
        // Update display text
        statusText.textContent = this.checked ? 'Online' : 'Offline';
        
        // Send the correct on/off value to the server
        if (window.mxchatSaveSetting) {
            window.mxchatSaveSetting('live_agent_status', this.checked ? 'on' : 'off');
        }
    });
}
});