{% extends "base.html" %}

{% block css %}
<style>
    body { background-color: #121212; color: #ddd; }
    h1 { text-align: center; margin-top: 20px; color: #fff; }

    .top-container {
        max-width: 1100px;
        margin: 25px auto;
        padding: 0 15px;
    }

    .filter-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
    }

    .filter-bar select {
        background-color: #1f2327;
        border: 1px solid #444;
        color: #ddd;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    table th, table td {
        padding: 12px;
        border: 1px solid #444;
        text-align: left;
        color: #ddd;
    }

    .filter-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    }


    table th { background-color: #333; }
    table tbody tr:nth-child(odd) { background-color: #272b2f; }
    table tbody tr:nth-child(even) { background-color: #212529; }
    table tbody tr:hover { background-color: #555; cursor: pointer; }

    .node-link {
        color: #9fd4ff;
        text-decoration: none;
    }
    .node-link:hover { text-decoration: underline; }

    .good-x { color: #81ff81; font-weight: bold; }
    .ok-x { color: #e8e86d; font-weight: bold; }
    .bad-x { color: #ff6464; font-weight: bold; }
</style>
{% endblock %}

{% block body %}

<h1>Top Nodes Traffic</h1>

<div class="top-container">

<div class="filter-bar">
    <div>
        <label for="channelFilter">Channel:</label>
        <select id="channelFilter" class="form-select form-select-sm" style="width:auto;"></select>
    </div>

    <div>
        <label for="nodeSearch">Search:</label>
        <input id="nodeSearch" type="text" class="form-control form-control-sm"
               placeholder="Search nodes..."
               style="width:180px; display:inline-block;">
    </div>
</div>




    <div class="table-responsive">
        <table id="nodesTable">
            <thead>
                <tr>
                    <th>Long Name</th>
                    <th>Short Name</th>
                    <th>Channel</th>
                    <th>Sent (24h)</th>
                    <th>Seen (24h)</th>
                    <th>Avg Gateways</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

</div>

<script>
    let allNodes = [];

    async function loadChannels() {
        try {
            const res = await fetch("/api/channels");
            const data = await res.json();
            const channels = data.channels || [];

            const select = document.getElementById("channelFilter");

            // Default LongFast first
            if (channels.includes("LongFast")) {
                const opt = document.createElement("option");
                opt.value = "LongFast";
                opt.textContent = "LongFast";
                select.appendChild(opt);
            }

            for (const ch of channels) {
                if (ch === "LongFast") continue;
                const opt = document.createElement("option");
                opt.value = ch;
                opt.textContent = ch;
                select.appendChild(opt);
            }

            select.addEventListener("change", renderTable);
        } catch (err) {
            console.error("Error loading channels:", err);
        }
    }

    async function loadNodes() {
        try {
            const res = await fetch("/api/nodes");
            const data = await res.json();
            allNodes = data.nodes || [];
        } catch (err) {
            console.error("Error loading nodes:", err);
        }
    }

    async function fetchNodeStats(nodeId) {
        try {
            const url = `/api/stats/count?from_node=${nodeId}&period_type=day&length=1`;
            const res = await fetch(url);
            const data = await res.json();

            const sent = data.total_packets || 0;
            const seen = data.total_seen || 0;
            const avg = seen / Math.max(sent, 1);

            return {
                sent,
                seen,
                avg: avg
            };
        } catch (err) {
            console.error("Stat error", err);
            return { sent: 0, seen: 0, avg: 0 };
        }
    }

    function avgClass(v) {
        if (v >= 10) return "good-x";   // Very strong node
        if (v >= 2)  return "ok-x";     // Normal node
        return "bad-x";                 // Weak node
    }

async function renderTable() {
    const tbody = document.querySelector("#nodesTable tbody");
    tbody.innerHTML = "";

    const channel = document.getElementById("channelFilter").value;
    const searchText = document.getElementById("nodeSearch").value.trim().toLowerCase();

    // Filter nodes by channel FIRST
    let filtered = allNodes.filter(n => n.channel === channel);

    // Then apply search
    if (searchText !== "") {
        filtered = filtered.filter(n =>
            (n.long_name && n.long_name.toLowerCase().includes(searchText)) ||
            (n.short_name && n.short_name.toLowerCase().includes(searchText)) ||
            String(n.node_id).includes(searchText)
        );
    }

    // --- Create placeholder rows ---
    const rowRefs = filtered.map(n => {
        const tr = document.createElement("tr");
        tr.addEventListener("click", () => {
            window.location.href = `/node/${n.node_id}`;
        });

        const tdLong = document.createElement("td");
        const a = document.createElement("a");
        a.href = `/node/${n.node_id}`;
        a.textContent = n.long_name || n.node_id;
        a.className = "node-link";
        a.addEventListener("click", e => e.stopPropagation());
        tdLong.appendChild(a);

        const tdShort = document.createElement("td");
        tdShort.textContent = n.short_name || "";

        const tdChannel = document.createElement("td");
        tdChannel.textContent = n.channel || "";

        const tdSent = document.createElement("td");
        tdSent.textContent = "Loading...";

        const tdSeen = document.createElement("td");
        tdSeen.textContent = "Loading...";

        const tdAvg = document.createElement("td");
        tdAvg.textContent = "Loading...";

        tr.appendChild(tdLong);
        tr.appendChild(tdShort);
        tr.appendChild(tdChannel);
        tr.appendChild(tdSent);
        tr.appendChild(tdSeen);
        tr.appendChild(tdAvg);

        tbody.appendChild(tr);

        return { node: n, tr, tdSent, tdSeen, tdAvg };
    });

    // --- Stats fetch ---
    const statsList = await Promise.all(
        rowRefs.map(ref => fetchNodeStats(ref.node.node_id))
    );

    // --- Update + cleanup empty nodes ---
    let combined = rowRefs.map((ref, i) => {
        const stats = statsList[i];

        ref.tdSent.textContent = stats.sent;
        ref.tdSeen.textContent = stats.seen;
        ref.tdAvg.innerHTML = `<span class="${avgClass(stats.avg)}">${stats.avg.toFixed(1)}</span>`;

        return {
            tr: ref.tr,
            sent: stats.sent,
            seen: stats.seen
        };
    });

    // Remove nodes with no traffic
    combined = combined.filter(r => !(r.sent === 0 && r.seen === 0));

    // Sort by traffic (seen)
    combined.sort((a, b) => b.seen - a.seen);

    // Rebuild table
    tbody.innerHTML = "";
    for (const r of combined) {
        tbody.appendChild(r.tr);
    }
}



(async () => {
    await loadNodes();
    await loadChannels();
    document.getElementById("channelFilter").value = "LongFast";

    document.getElementById("nodeSearch").addEventListener("input", renderTable);

    renderTable();
})();
</script>

{% endblock %}