function iafwzdeskEscapeHtml(str) {
    if (str === null || str === undefined) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function iafwzdesk_showErrorDetails(errorLogID) {


    jQuery.ajax({
        url: iafwzdesk_error_log.ajax_url, // WordPress AJAX URL
        type: 'POST',
        data: {
            action: 'IAFWZDESK_Error_Log_show_action', // Action name registered in PHP
            log_id: errorLogID, // Data to send to PHP
            security: iafwzdesk_error_log.error_log_nonce  // Send nonce for security
        },
        success: function(response) {
            if (response.success) {
                const details = response.data.details;

                // Build the HTML content dynamically
                let content = `<h3>Error Log Details</h3>
                               <table class="iafwzdesk-error-table">
                                   <tr>
                                       <th>Integration Name</th>
                                       <td>${iafwzdeskEscapeHtml(details.integration_name || 'N/A')}</td>
                                   </tr>
                                   <tr>
                                       <th>Error Type</th>
                                       <td>${iafwzdeskEscapeHtml(details.error_type || 'N/A')}</td>
                                   </tr>
                                   <tr>
                                       <th>Retry Count</th>
                                       <td>${iafwzdeskEscapeHtml(details.retry_count || 'N/A')}</td>
                                   </tr>
                                   <tr>
                                       <th>Created At</th>
                                       <td>${iafwzdeskEscapeHtml(details.created_at || 'N/A')}</td>
                                   </tr>
                                   <tr>
                                       <th>Updated At</th>
                                       <td>${iafwzdeskEscapeHtml(details.updated_at || 'N/A')}</td>
                                   </tr>
                               </table>`;

                content += `<h4>Form Data</h4>
                            <table class="iafwzdesk-error-table">`;
                for (const [key, value] of Object.entries(details.form_data || {})) {
                    content += `<tr>
                                    <th>${iafwzdeskEscapeHtml(key)}</th>
                                    <td>${iafwzdeskEscapeHtml(value)}</td>
                                </tr>`;
                }
                content += `</table>`;

                content += `<h4>Response</h4>
                <table class="iafwzdesk-error-table">`;

    const apiResponse = details.api_response || {};

    if (apiResponse.status) {
        for (const [key, value] of Object.entries(apiResponse)) {
            if (typeof value === 'object' && value !== null) {
                content += `<tr><th>${iafwzdeskEscapeHtml(key)}</th><td><ul>`;

                for (const [subKey, subValue] of Object.entries(value)) {
                    const displayValue = (typeof subValue === 'object' && subValue !== null)
                        ? `<pre>${iafwzdeskEscapeHtml(JSON.stringify(subValue, null, 2))}</pre>`
                        : iafwzdeskEscapeHtml(subValue);

                    content += `<li><strong>${iafwzdeskEscapeHtml(subKey)}:</strong> ${displayValue}</li>`;
                }

                content += `</ul></td></tr>`;
            } else {
                content += `<tr><th>${iafwzdeskEscapeHtml(key)}</th><td>${iafwzdeskEscapeHtml(value)}</td></tr>`;
            }
        }
    } else {
        content += `<tr><td colspan="2">No API response details available.</td></tr>`;
    }

    content += `</table>`;


                // Append the content to the modal
                const overlay = document.getElementById('iafwzdesk-error-overlay');
                const contentDiv = document.getElementById('iafwzdesk-error-content');
                contentDiv.innerHTML = content;

                // Make the overlay visible
                overlay.style.visibility = 'visible';
                overlay.style.opacity = '1';
            } else {
                alert('Failed to fetch error log details: ' + response.data.message);
            }
        },
        error: function(xhr, status, error) {
            alert('An error occurred while fetching error log details.');
        }
    });
}


function iafwzdesk_closeErrorOverlay() {
    const overlay = document.getElementById('iafwzdesk-error-overlay');
    if (overlay) {
        overlay.style.visibility = 'hidden';
        overlay.style.opacity = '0';
    }
}
