jQuery(document).ready(function($) {
    // Function to parse JSON safely
    function parseJSONSafe(jsonString) {
        try {
            const parsedData = JSON.parse(jsonString);
            return parsedData;
        } catch (error) {
            alert(error);
            return { success: false, error: error.message };
        }
    }

    // Handle click event on post JSON button
    $('#post_json_button').on('click', function() {
        let endpointUrl = $('#post_endpoint_select').val();
        let jsonData = parseJSONSafe($('#json_data').val());

        if (endpointUrl) {
            $.ajax({
                url: ajax_object.ajax_url,
                method: 'POST',
                data: {
                    action: 'post_json_data',
                    endpoint_url: endpointUrl,
                    json_data: jsonData // Encode JSON data
                },
                success: function(response) {
                    // Transform the string WP response to JS object
                    $('#response_message').remove();
                    response = JSON.parse(response)
                    let alertType = 'success';
                    let messageContent = '';
                    console.log(response);
                
                    if (response.status === 'error' || response.status === 'errors') {
                        alertType = 'danger';
                        messageContent = response.message || response.error || 'An error occurred check server side or logs';
                    } else {
                        messageContent = response.message || 'Operation successful';
                    }
                
                    $('#response_message').remove();
                    let message = '<div id="response_message" class="alert alert-' + alertType + '" role="alert">' + messageContent + '</div>';
                    $('#post_json_button').after(message);
                },
                error: function(response) {
                    $('#response_message').remove();
                    let message = '<div id="response_message" class="alert alert-danger" role="alert">Error: ' + response + '</div>';
                    $('#post_json_button').after(message);
                }
            });
        } else {
            alert('Please select an endpoint.');
        }
    });
});