jQuery(document).ready(function($) {
    // Toggle form display
    $('#add-api-btn').on('click', function() {
        $('#api-form').toggle();
    });

    // Show relevant fields based on auth type
    $('#auth_type').on('change', function() {
        var authType = $(this).val();
        $('.auth-fields').hide();
        $('#' + authType.toLowerCase().replace(' ', '-') + '-fields').show();
    });

    // Add new additional headers row
    $('#add-header').on('click', function(e) {
        e.preventDefault();
        var headerTemplate = `
           <div class="header-pair">
                <input type="text" name="header_key" placeholder="Header Key" class="header-key">
                <input type="text" name="header_value" placeholder="Header Value" class="header-value">
                <button type="button" class="remove-header">Remove</button>
            </div>`;
        $(this).before(headerTemplate);
    });

    // Remove a header-pair on click of Remove button
    $(document).on('click', '.remove-header', function() {
        $(this).closest('.header-pair').remove();
    });

   
     // Save API Configuration
     $('#api_manager_form').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        formData += '&action=api_manager_save&nonce=' + apiManagerData.nonce;

        $.ajax({
            url: apiManagerData.ajax_url,
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    alert('API configuration saved successfully!');
                    location.reload();
                } else {
                    alert('Error saving API configuration: ' + response.data);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX request failed:', textStatus, errorThrown);
                alert('AJAX request failed. Please check the console for more information.');
            }
        });
    });

    // Edit API Configuration
    $('.edit-api').on('click', function() {
        var row = $(this).closest('tr');
        var apiId = $(this).data('id');
        var button = $(this);
    
        if (button.text() === 'Edit') {
            // Make only editable fields contenteditable
            row.find('.editable').prop('contenteditable', true).addClass('editing');
            button.text('Save');
        } else {
            // Collect all the data from the editable fields
            var data = {
                action: 'api_manager_save',
                nonce: apiManagerData.nonce,
                id: apiId,
                auth_type: row.find('.auth-type').text().trim(), // Include auth_type but don't make it editable
                name: row.find('.name').text().trim()

            };
    
            // Iterate through all editable fields and collect their values
            row.find('.editable').each(function() {
                var field = $(this);
                var fieldName = field.data('field');
                
                // Handle password/api key fields specially
                if (field.data('original') && field.text() === '********') {
                    data[fieldName] = field.data('original');
                } else {
                    data[fieldName] = field.text().trim();
                }
            });
    
            $.ajax({
                url: apiManagerData.ajax_url,
                method: 'POST',
                data: data,
                success: function(response) {
                    if (response.success) {
                        alert('API configuration updated successfully!');
                        row.find('.editable').prop('contenteditable', false).removeClass('editing');
                        button.text('Edit');
                        
                        // Reset sensitive fields display
                        row.find('[data-original]').text('********');
                    } else {
                        alert('Error updating API configuration: ' + response.data);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('AJAX request failed:', textStatus, errorThrown);
                    alert('Failed to update API configuration. Please try again.');
                }
            });
        }
    });

    // Delete API Configuration
    $('.delete-api').on('click', function() {
        if (!confirm('Are you sure you want to delete this API configuration?')) {
            return;
        }

        var apiId = $(this).data('id');
        var row = $(this).closest('tr');

        $.ajax({
            url: apiManagerData.ajax_url,
            method: 'POST',
            data: {
                action: 'api_manager_delete',
                nonce: apiManagerData.nonce,
                id: apiId
            },
            success: function(response) {
                if (response.success) {
                    alert('API configuration deleted successfully!');
                    row.fadeOut(400, function() {
                        $(this).remove();
                    });
                } else {
                    alert('Error deleting API configuration: ' + (response.data || 'Unknown error'));
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX request failed:', textStatus, errorThrown);
                alert('Failed to delete API configuration. Please try again.');
            }
        });
    });

//     // Function to send API call
//     window.sendToSAP = function(apiId, contractId, requestData) {
//         const data = new FormData();
//         data.append('action', 'trigger_api_call');
//         data.append('nonce', apiManagerData.nonce);
//         data.append('api_id', apiId);
//         data.append('contract_id', contractId);
//         data.append('request_data', JSON.stringify(requestData));

//         fetch(apiManagerData.ajax_url, {
//             method: 'POST',
//             credentials: 'same-origin',
//             body: data
//         })
//         .then(response => response.json())
//         .then(result => {
//             if (result.success) {
//                 document.getElementById('response-box').innerText = JSON.stringify(result.data, null, 2);
//             } else {
//                 throw new Error(result.data);
//             }
//         })
//         .catch(error => {
//             console.error('Error:', error);
//             document.getElementById('response-box').innerText = 'Error occurred during the request: ' + error.message;
//         });
//     };
});