// Function to view log details
function viewLogDetails(logId) {
    fetch(`/api/logs/${logId}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch log details');
            }
            return response.json();
        })
        .then(log => {
            const content = document.getElementById('logDetailsContent');
            
            // Format the details in a readable way
            let details = log.details;
            let formattedDetails = 'No details available';
            
            if (details) {
                if (typeof details === 'string') {
                    formattedDetails = details.replace(/\n/g, '<br>');
                } else if (typeof details === 'object') {
                    formattedDetails = JSON.stringify(details, null, 2).replace(/\n/g, '<br>');
                } else {
                    formattedDetails = String(details);
                }
            }
            
            content.innerHTML = `
                <div class="mb-3">
                    <strong>Timestamp:</strong> ${new Date(log.timestamp).toLocaleString()}
                </div>
                <div class="mb-3">
                    <strong>Level:</strong> <span class="badge bg-${getLogLevelBadgeClass(log.level)}">${log.level}</span>
                </div>
                <div class="mb-3">
                    <strong>Category:</strong> ${log.category || '-'}
                </div>
                <div class="mb-3">
                    <strong>Action:</strong> ${log.action || '-'}
                </div>
                <div class="mb-3">
                    <strong>Description:</strong> ${log.description || '-'}
                </div>
                <div class="mb-3">
                    <strong>User:</strong> ${log.user || '-'}
                </div>
                <div class="mb-3">
                    <strong>IP Address:</strong> ${log.ip_address || '-'}
                </div>
                <div class="mb-3">
                    <strong>Details:</strong>
                    <div class="mt-2 p-3 bg-light rounded">
                        ${formattedDetails}
                    </div>
                </div>
            `;
            
            // Show modal
            const modal = new bootstrap.Modal(document.getElementById('logDetailsModal'));
            modal.show();
        })
        .catch(error => {
            console.error('Error viewing log details:', error);
            showToast('Error loading log details', 'error');
        });
}

// Helper function to get log level badge class
function getLogLevelBadgeClass(level) {
    const classes = {
        'INFO': 'info',
        'WARNING': 'warning',
        'ERROR': 'danger',
        'DEBUG': 'secondary'
    };
    return classes[level] || 'secondary';
}

// Function to fetch logs
async function fetchLogs(page = 1) {
    try {
        const formData = new FormData(document.getElementById('logFiltersForm'));
        const params = new URLSearchParams();
        
        // Add form data to params
        for (let [key, value] of formData.entries()) {
            if (value) params.append(key, value);
        }
        
        // Add page number
        params.append('page', page);
        
        const response = await fetch(`/api/logs?${params.toString()}`);
        if (!response.ok) throw new Error('Failed to fetch logs');
        
        const data = await response.json();
        const logsTableBody = document.getElementById('logsTableBody');
        logsTableBody.innerHTML = '';
        
        data.logs.forEach(log => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${new Date(log.timestamp).toLocaleString()}</td>
                <td><span class="badge bg-${getLogLevelBadgeClass(log.level)}">${log.level}</span></td>
                <td>${log.category || '-'}</td>
                <td>${log.action || '-'}</td>
                <td>${log.description || '-'}</td>
                <td>${log.user || '-'}</td>
                <td>${log.ip_address || '-'}</td>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick="viewLogDetails(${log.id})">
                        <i class="fas fa-eye"></i>
                    </button>
                </td>
            `;
            logsTableBody.appendChild(row);
        });
        
        // Update pagination
        updateLogsPagination(data.current_page, data.total_pages);
    } catch (error) {
        console.error('Error fetching logs:', error);
        showToast('Error loading logs', 'error');
    }
}

// Function to update logs pagination
function updateLogsPagination(currentPage, totalPages) {
    const pagination = document.getElementById('logsPagination');
    if (!pagination) return;
    
    pagination.innerHTML = '';
    
    // Previous button
    const prevLi = document.createElement('li');
    prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
    prevLi.innerHTML = `
        <button class="page-link" onclick="fetchLogs(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>
            <i class="fas fa-chevron-left"></i>
        </button>
    `;
    pagination.appendChild(prevLi);
    
    // Page numbers
    for (let i = 1; i <= totalPages; i++) {
        const li = document.createElement('li');
        li.className = `page-item ${i === currentPage ? 'active' : ''}`;
        li.innerHTML = `
            <button class="page-link" onclick="fetchLogs(${i})">${i}</button>
        `;
        pagination.appendChild(li);
    }
    
    // Next button
    const nextLi = document.createElement('li');
    nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
    nextLi.innerHTML = `
        <button class="page-link" onclick="fetchLogs(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>
            <i class="fas fa-chevron-right"></i>
        </button>
    `;
    pagination.appendChild(nextLi);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Initial load
    fetchLogs();
    
    // Form submit handler
    document.getElementById('logFiltersForm').addEventListener('submit', function(e) {
        e.preventDefault();
        fetchLogs(1);
    });
    
    // Form reset handler
    document.getElementById('logFiltersForm').addEventListener('reset', function(e) {
        e.preventDefault();
        this.reset();
        fetchLogs(1);
    });
});