{% extends "base.html" %}
{% block theme %}light{% endblock %}
{% block body_class %}mesh-data-page mesh-top-page{% endblock %}

{% block css %}
{% include "data-page-styles.html" %}
<style>
.top-container { width:100%; }
.filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:white; border:1px solid var(--mesh-border); border-radius:9px; padding:16px; margin-bottom:18px; }
.filter-bar > div { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.filter-bar label { color:#64748b; font-size:13px; }
#channelFilter { width:200px; }
.top-count { color:#64748b; font-size:13px; margin-bottom:14px; }
#node-count { font-weight:650; color:var(--mesh-primary); }
#nodesTable tbody tr { cursor:pointer; }
#nodesTable td:nth-child(n+4) { font-variant-numeric:tabular-nums; }
.good-x,.ok-x,.bad-x { display:inline-block; padding:3px 8px; border-radius:5px; font-weight:600; font-size:12px; }
.good-x { background:#e8f5ee; color:#187346; }
.ok-x { background:#fff4d9; color:#8a6200; }
.bad-x { background:#fff0ed; color:#b23d2f; }
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin:20px 0 0; }
#pageInfo { font-size:12px; color:#64748b; }
@media(max-width:700px) { #channelFilter { width:180px; } }
</style>
{% endblock %}

{% block body %}

<header class="data-heading"><div><span class="mesh-eyebrow">TRAFFIC LEADERBOARD</span><h1 data-translate-lang="top_traffic_nodes">Top nodes</h1><p>Compare packets sent and gateway observations over the last 24 hours.</p></div><a class="mesh-secondary-button" href="/stats">View statistics ↗</a></header>

<div class="top-container">

    <div class="filter-bar">
        <div>
            <label for="channelFilter" data-translate-lang="channel">Channel:</label>
            <select id="channelFilter"></select>
        </div>
    </div>

    <div class="top-count">
        <span data-translate-lang="showing_nodes">Showing</span>
        <span id="node-count">0</span>
        <span data-translate-lang="nodes_suffix">nodes</span>
    </div>

    <div class="data-table-wrap" role="region" aria-label="Top nodes traffic table" tabindex="0">
    <table id="nodesTable">
        <thead>
            <tr>
                <th data-translate-lang="long_name">Long Name</th>
                <th data-translate-lang="short_name">Short Name</th>
                <th data-translate-lang="channel">Channel</th>
                <th data-translate-lang="packets_sent">Sent (24h)</th>
                <th data-translate-lang="times_seen">Seen (24h)</th>
                <th data-translate-lang="avg_gateways">Avg Gateways</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    </div>

    <div class="pagination" aria-label="Leaderboard pagination">
        <button id="prevPage" class="btn btn-sm btn-secondary">Prev</button>
        <span id="pageInfo" role="status"></span>
        <button id="nextPage" class="btn btn-sm btn-secondary">Next</button>
    </div>

</div>

<script>
/* ======================================================
   TRANSLATIONS
   ====================================================== */
let topTranslations = {};

function applyTranslationsTop(dict, root=document) {
    root.querySelectorAll("[data-translate-lang]").forEach(el => {
        const key = el.dataset.translateLang;
        if (!dict[key]) return;
        el.textContent = dict[key];
    });
}

async function loadTranslationsTop() {
    const cfg = await window._siteConfigPromise;
    const lang = cfg?.site?.language || "en";
    const res = await fetch(`/api/lang?lang=${lang}&section=top`);
    topTranslations = await res.json();
    applyTranslationsTop(topTranslations);
}

/* ======================================================
   CONFIG
   ====================================================== */
const PAGE_SIZE = 20;
let currentPage = 0;
let totalRows = 0;

/* ======================================================
   HELPERS
   ====================================================== */
function avgClass(v) {
    if (v >= 10) return "good-x";
    if (v >= 2)  return "ok-x";
    return "bad-x";
}

/* ======================================================
   LOAD CHANNELS
   ====================================================== */
async function loadChannels() {
    const res = await fetch("/api/channels");
    const data = await res.json();
    const sel = document.getElementById("channelFilter");

    sel.innerHTML = "";
    const allOpt = document.createElement("option");
    allOpt.value = "";
    allOpt.textContent = topTranslations.all_channels || "All channels";
    sel.appendChild(allOpt);

    for (const ch of data.channels || []) {
        const opt = document.createElement("option");
        opt.value = ch;
        opt.textContent = ch;
        sel.appendChild(opt);
    }

    sel.value = "";
}

/* ======================================================
   FETCH + RENDER
   ====================================================== */
async function renderTable() {
    const tbody = document.querySelector("#nodesTable tbody");
    tbody.innerHTML = "";

    const channel = document.getElementById("channelFilter").value;
    const offset  = currentPage * PAGE_SIZE;

    const url = new URL("/api/stats/top", window.location.origin);
    url.searchParams.set("limit", PAGE_SIZE);
    url.searchParams.set("offset", offset);
    if (channel) url.searchParams.set("channel", channel);

    const res = await fetch(url);
    const data = await res.json();

    totalRows = data.total || 0;
    if (!(data.nodes || []).length) {
        const row = document.createElement("tr");
        const cell = document.createElement("td");
        cell.colSpan = 6;
        cell.className = "data-empty";
        cell.textContent = "No node traffic found for this channel.";
        row.append(cell);
        tbody.append(row);
    }

    for (const n of data.nodes || []) {
        const tr = document.createElement("tr");
        tr.onclick = () => location.href = `/node/${n.node_id}`;

        tr.innerHTML = `
            <td>
                <a class="node-link" href="/node/${n.node_id}"
                   onclick="event.stopPropagation()">
                    ${escapeHtml(n.long_name || n.node_id)}
                </a>
            </td>
            <td>${escapeHtml(n.short_name || "")}</td>
            <td>${escapeHtml(n.channel || "")}</td>
            <td>${n.sent}</td>
            <td>${n.seen}</td>
            <td><span class="${avgClass(n.avg)}">${n.avg.toFixed(1)}</span></td>
        `;
        tbody.appendChild(tr);
    }

    const totalPages = Math.max(1, Math.ceil(totalRows / PAGE_SIZE));

    document.getElementById("node-count").textContent = totalRows;
    document.getElementById("pageInfo").textContent =
        `Page ${currentPage + 1} / ${totalPages}`;

    document.getElementById("prevPage").disabled = currentPage === 0;
    document.getElementById("nextPage").disabled = currentPage >= totalPages - 1;
}

/* ======================================================
   INIT
   ====================================================== */
document.addEventListener("DOMContentLoaded", async () => {
    await loadTranslationsTop();
    await loadChannels();
    await renderTable();

    channelFilter.onchange = () => {
        currentPage = 0;
        renderTable();
    };

    prevPage.onclick = () => {
        if (currentPage > 0) {
            currentPage--;
            renderTable();
        }
    };

    nextPage.onclick = () => {
        currentPage++;
        renderTable();
    };
});
</script>

{% endblock %}