{% extends "base.html" %}
{% block content %}

<h1>Traffic</h1>
<p class="page-subtitle">Live per-customer throughput, plus every other device on the network. Updates every second.</p>

<section>
    <div class="stat-grid">
        <div class="stat-card">
            <div class="label">Active customers</div>
            <div class="value" id="t-active-count">—</div>
            <div class="hint">currently consuming bandwidth</div>
        </div>
        <div class="stat-card">
            <div class="label">Total download</div>
            <div class="value" id="t-total-down">— Mbps</div>
            <div class="hint">across all customers</div>
        </div>
        <div class="stat-card">
            <div class="label">Total upload</div>
            <div class="value" id="t-total-up">— Mbps</div>
            <div class="hint">across all customers</div>
        </div>
        <div class="stat-card">
            <div class="label">Heaviest</div>
            <div class="value" id="t-heaviest-val">—</div>
            <div class="hint" id="t-heaviest-who">no customers</div>
        </div>
    </div>
</section>

<section>
    <div class="section-head">
        <h2>Customers</h2>
        <span class="section-link" id="t-last-updated">just now</span>
    </div>

    <div class="table-scroll">
        <table id="t-table">
            <thead>
                <tr>
                    <th>Voucher / device</th>
                    <th>IP</th>
                    <th class="col-hide-mobile">MAC</th>
                    <th>Status</th>
                    <th style="text-align:right;">↓ Mbps</th>
                    <th style="text-align:right;">↑ Mbps</th>
                    <th class="col-hide-mobile" style="text-align:right;">Total used</th>
                </tr>
            </thead>
            <tbody id="t-tbody">
                <tr id="t-empty-row">
                    <td colspan="7" style="text-align:center; color:var(--muted); padding:24px;">
                        Loading…
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <p class="page-subtitle" style="font-size:12px; margin-top:14px;">
        <strong>What this shows.</strong> Each row is a customer currently
        connected via a valid voucher — including sub-vendo customers on an
        ESP-issued voucher, tagged <strong>VLAN N</strong>. ↓ Mbps is what
        they're downloading right now (from the internet to their device);
        ↑ Mbps is what they're uploading. Customers with a <code>paused</code>
        status have a voucher but aren't currently connected — their row stays
        visible so you know they'll reappear if they reconnect.
    </p>
</section>

<script>
// Per-client throughput poller (v1.1.0 — A.1).
// Polls /api/traffic once a second — the cadence a router interface list
// runs at, so rates feel live rather than laggy. The server keeps this cheap
// by reading only the tc byte counters per tick and serving the who-is-who
// joins from a short-TTL cache. Polling pauses while the tab is hidden: a
// background tab hammering an Orange Pi once a second buys nothing.
(function() {
    var POLL_MS = 1000;

    function formatMbps(kbps) {
        if (kbps >= 1000) return (kbps / 1000).toFixed(1);
        if (kbps > 0)     return (kbps / 1000).toFixed(2);
        return '0.00';
    }

    function formatBytes(n) {
        if (n >= 1099511627776) return (n / 1099511627776).toFixed(1) + ' TB';
        if (n >= 1073741824)    return (n / 1073741824).toFixed(1) + ' GB';
        if (n >= 1048576)       return (n / 1048576).toFixed(0) + ' MB';
        if (n >= 1024)          return (n / 1024).toFixed(0) + ' KB';
        return n + ' B';
    }

    function escapeHtml(s) {
        return String(s || '').replace(/[&<>"']/g, function(c) {
            return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
        });
    }

    function badge(status) {
        if (!status) return '<span style="color:var(--muted);">—</span>';
        return '<span class="badge badge-' + escapeHtml(status) + '">' +
               escapeHtml(status) + '</span>';
    }

    // Connection-sharing evidence. "Shared" = we saw their own device AND
    // traffic from something a router-hop further away (a phone hotspot).
    // "Maybe shared" = every packet came from a hop away, which is also what a
    // customer's own travel router looks like — so it is shown as a question,
    // not an accusation. Hover gives the raw evidence.
    function sharingBadge(s) {
        if (!s || s.state === 'clean') return '';
        var confirmed = (s.state === 'confirmed');
        var title = 'Packets from one router-hop away: ' + s.hop_packets +
                    '\nPackets from a directly-connected device: ' + s.own_packets +
                    '\nOpen connections: ' + s.flows +
                    (confirmed
                        ? '\n\nTheir device plus at least ' + (s.devices_min - 1) +
                          ' more behind it.'
                        : '\n\nEverything arrives via another router — could be ' +
                          'sharing, or their own router.');
        return ' <span class="badge" title="' + escapeHtml(title) + '" style="' +
               (confirmed
                   ? 'background:#fee2e2; color:#991b1b;'
                   : 'background:#fef3c7; color:#92400e;') +
               '">' + (confirmed ? 'shared' : 'maybe shared') +
               (s.busy ? ' · busy' : '') + '</span>';
    }

    function tick() {
        fetch('/api/traffic', { credentials: 'same-origin' })
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(d) {
                if (!d || !d.clients) return;

                var rows = d.clients;
                var tbody = document.getElementById('t-tbody');

                // Stats
                var totalDown = 0, totalUp = 0, activeCount = 0;
                var heaviest = null;
                rows.forEach(function(r) {
                    totalDown += r.down_kbps;
                    totalUp += r.up_kbps;
                    if (r.status === 'active') activeCount++;
                    if (!heaviest || r.down_kbps > heaviest.down_kbps) heaviest = r;
                });

                document.getElementById('t-active-count').textContent = activeCount;
                document.getElementById('t-total-down').textContent =
                    formatMbps(totalDown) + ' Mbps';
                document.getElementById('t-total-up').textContent =
                    formatMbps(totalUp) + ' Mbps';

                var hv = document.getElementById('t-heaviest-val');
                var hw = document.getElementById('t-heaviest-who');
                if (heaviest && heaviest.down_kbps > 0) {
                    hv.textContent = formatMbps(heaviest.down_kbps) + ' Mbps';
                    hw.textContent = (heaviest.code || heaviest.ip || heaviest.mac || '—');
                } else {
                    hv.textContent = 'idle';
                    hw.textContent = 'no active traffic';
                }

                // Table
                if (rows.length === 0) {
                    tbody.innerHTML =
                        '<tr><td colspan="7" style="text-align:center; ' +
                        'color:var(--muted); padding:24px;">' +
                        'Nothing on the network right now.</td></tr>';
                } else {
                    var html = '';
                    rows.forEach(function(r) {
                        // Unbound = on the network but holding no voucher (the AP,
                        // an ESP, a phone idling on DHCP). Dimmed so paying
                        // customers stay visually dominant.
                        var dim = r.unbound ? ' style="opacity:.72;"' : '';
                        var firstCell;
                        if (r.unbound) {
                            firstCell = '<span style="color:var(--muted);">' +
                                    escapeHtml(r.hostname || 'device') + '</span>' +
                                (r.role && r.role !== 'unknown'
                                    ? ' <span style="color:var(--muted-2); font-size:11px; white-space:nowrap;">' +
                                      (r.role === 'esp' ? 'ESP' : 'infra') + '</span>'
                                    : '');
                        } else {
                            firstCell = (r.code ? '<code>' + escapeHtml(r.code) + '</code>' : '<span style="color:var(--muted);">—</span>');
                        }
                        html += '<tr' + dim + '>' +
                            '<td>' + firstCell +
                                (r.vlan ? ' <span style="color:var(--muted-2); font-size:11px; white-space:nowrap;">VLAN ' + escapeHtml(String(r.vlan)) + '</span>' : '') + '</td>' +
                            '<td><code>' + escapeHtml(r.ip || '—') + '</code>' +
                                (r.unbound && r.segment_iface ? '<div style="color:var(--muted-2); font-size:11px;">' + escapeHtml(r.segment_iface) + '</div>' : '') + '</td>' +
                            '<td class="col-hide-mobile"><code>' + escapeHtml(r.mac || '—') + '</code></td>' +
                            '<td>' + (r.unbound
                                ? '<span class="badge badge-expired">' + (r.online ? 'no voucher' : 'offline') + '</span>'
                                : badge(r.status) + sharingBadge(r.sharing)) + '</td>' +
                            // Unbound devices are unshaped, so there is no
                            // per-device counter to report — show "—" rather
                            // than a 0 that would read as "using nothing".
                            '<td style="text-align:right; font-variant-numeric:tabular-nums;"><strong>' +
                                (r.unbound ? '<span style="color:var(--muted-2); font-weight:400;">—</span>' : formatMbps(r.down_kbps)) + '</strong></td>' +
                            '<td style="text-align:right; font-variant-numeric:tabular-nums;"><strong>' +
                                (r.unbound ? '<span style="color:var(--muted-2); font-weight:400;">—</span>' : formatMbps(r.up_kbps)) + '</strong></td>' +
                            '<td class="col-hide-mobile" style="text-align:right; color:var(--muted);">' +
                                (r.unbound
                                    ? '<span style="color:var(--muted-2);">not metered</span>'
                                    : '↓ ' + formatBytes(r.down_bytes) + ' &nbsp;↑ ' + formatBytes(r.up_bytes)) +
                            '</td>' +
                        '</tr>';
                    });
                    tbody.innerHTML = html;
                }

                document.getElementById('t-last-updated').textContent =
                    'updated ' + new Date().toLocaleTimeString();
            })
            .catch(function() { /* transient — let next tick recover */ });
    }

    // Skip the fetch while the tab is in the background — the browser throttles
    // timers there anyway, and an unattended tab should not keep the SBC busy.
    // Redraw immediately on return so the operator never sees stale numbers.
    function pollIfVisible() {
        if (document.hidden) return;
        tick();
    }

    tick();
    setInterval(pollIfVisible, POLL_MS);
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden) tick();
    });
})();
</script>

{% endblock %}