function lookupRpki() {
    const rpkiInput = document.getElementById('rpkiInput').value;
    const rpkiOutput = document.getElementById('rpkiOutput');
    rpkiOutput.innerHTML = 'Looking up...';

    fetch('/rpki/lookup', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: rpkiInput }),
    })
    .then(response => response.json())
    .then(data => {
        rpkiOutput.innerHTML = '';

        if (data.prefixes && data.prefixes.length > 0) {
            const table = document.createElement('table');
            table.className = 'table table-borderless';

            const thead = document.createElement('thead');
            thead.innerHTML = `
                <tr>
                    <th>Prefix</th>
                    <th>Prefix Length</th>
                    <th>Origin-AS</th>
                </tr>
            `;
            table.appendChild(thead);

            const tbody = document.createElement('tbody');
            data.prefixes.forEach(pfx => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${pfx.prefix}</td>
                    <td>${pfx.length}</td>
                    <td>${pfx.as}</td>
                `;
                tbody.appendChild(row);
            });
            table.appendChild(tbody);

            rpkiOutput.appendChild(table);

            if (data.summary && data.summary.length > 0) {
                const summaryDiv = document.createElement('div');
                summaryDiv.style.marginTop = '1rem';
                summaryDiv.innerHTML = data.summary.join('<br>');
                rpkiOutput.appendChild(summaryDiv);
            }

        } else {
            rpkiOutput.textContent = JSON.stringify(data, null, 2);
        }
    })
    .catch((error) => {
        rpkiOutput.textContent = 'Error: ' + error;
    });
}

function getRpkiStatus() {
    const rpkiStatusOutput = document.getElementById('rpkiStatusOutput');

    fetch('/rpki/status')
    .then(response => response.json())
    .then(servers => {
        rpkiStatusOutput.innerHTML = ''; 

        if (servers && servers.length > 0) {
            const list = document.createElement('ul');
            list.className = 'list-group';

            servers.forEach(server => {
                const listItem = document.createElement('li');
                listItem.className = 'list-group-item';

                const statusBadgeClass = server.status === 'Connected' ? 'badge bg-success' : 'badge bg-secondary';
                
                listItem.innerHTML = `
                    Server: <strong>${server.ip_address}:${server.port}</strong>
                    <span class="${statusBadgeClass} float-end">${server.status}</span>
                    <br>
                    <small>Preference: ${server.preference}</small>
                `;
                list.appendChild(listItem);
            });
            rpkiStatusOutput.appendChild(list);
        } else {
            rpkiStatusOutput.innerHTML = '<p>No RPKI cache servers found or could not parse data.</p>';
        }
    })
    .catch((error) => {
        rpkiStatusOutput.innerHTML = '<p class="text-danger">Error fetching status: ' + error + '</p>';
    });
}

document.addEventListener('DOMContentLoaded', function() {
    getRpkiStatus();
});