document.addEventListener('DOMContentLoaded', function() {
    let currentPage = 1;
    let perPage = 50;
    let totalLogs = parseInt(document.getElementById('total_count').textContent);
    let allLogs = [];
    
    const logsContainer = document.getElementById('logs_container');
    const perPageSelect = document.getElementById('logs_per_page');
    const refreshBtn = document.getElementById('refresh_logs_btn');
    const prevBtn = document.getElementById('prev_btn');
    const nextBtn = document.getElementById('next_btn');
    const loadAllBtn = document.getElementById('load_all_btn');
    const loadedSpan = document.getElementById('loaded_count');
    const currentPageSpan = document.getElementById('current_page');
    const totalPagesSpan = document.getElementById('total_pages');
    
    perPageSelect.addEventListener('change', function(e) {
        perPage = parseInt(e.target.value);
        currentPage = 1;
        loadLogs();
    });
    
    refreshBtn.addEventListener('click', function() {
        currentPage = 1;
        loadLogs();
    });
    
    prevBtn.addEventListener('click', function() {
        if (currentPage > 1) {
            currentPage--;
            loadLogs();
        }
    });
    
    nextBtn.addEventListener('click', function() {
        const totalPages = Math.ceil(totalLogs / perPage);
        if (currentPage < totalPages) {
            currentPage++;
            loadLogs();
        }
    });
    
    loadAllBtn.addEventListener('click', function() {
        perPage = totalLogs;
        currentPage = 1;
        perPageSelect.value = totalLogs;
        loadLogs();
    });
    
    function loadLogs() {
        fetch('/api/logs', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                page: currentPage,
                per_page: perPage
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderLogs(data.logs);
                updatePagination(data);
                console.log(`[Logs] Załadowano page ${data.page}/${Math.ceil(data.total / data.per_page)}`);
            }
        })
        .catch(error => {
            console.error('Error loading logs:', error);
            logsContainer.innerHTML = `<tr><td class="alert alert-danger">Błąd załadowania logów</td></tr>`;
        });
    }
    
    function renderLogs(logs) {
        if (!logs || logs.length === 0) {
            logsContainer.innerHTML = '<tr><td class="text-center text-muted py-4"><i class="bi bi-inbox"></i> Brak logów</td></tr>';
            return;
        }
        
        logsContainer.innerHTML = logs.map(entry => `
            <tr>
                <td>
                    <small style="font-family: monospace; color: #666;">
                        <i class="bi bi-clock text-muted me-1"></i>${entry.timestamp || 'N/A'}<br>
                        <span class="text-muted">${entry.source || 'N/A'}</span><br>
                        <code style="color: #333; word-break: break-all; display: block; margin-top: 4px;">
                            ${entry.message || 'N/A'}
                        </code>
                    </small>
                </td>
            </tr>
        `).join('');
    }
    
    function updatePagination(data) {
        const totalPages = Math.ceil(data.total / data.per_page);
        loadedSpan.textContent = data.logs.length;
        currentPageSpan.textContent = data.page;
        totalPagesSpan.textContent = totalPages;
        
        prevBtn.disabled = data.page === 1;
        nextBtn.disabled = !data.has_more;
    }
    
    loadLogs();
});