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

{% block css %}
{% include "data-page-styles.html" %}
<style>
.reach-page { width:100%; }
.reach-description { margin-bottom:20px; background:var(--mesh-surface); border:1px solid var(--mesh-border); border-radius:9px; padding:14px 18px; font-size:13px; color:var(--mesh-muted); }
.reach-description summary { cursor:pointer; color:var(--mesh-text); font-weight:500; }
.reach-description p { margin:12px 0 0; line-height:1.7; }
.reach-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; background:var(--mesh-surface); border:1px solid var(--mesh-border); border-radius:9px; padding:16px; margin-bottom:20px; }
.reach-search { flex:1 1 260px; }
.reach-search-label,.reach-limit-label { color:var(--mesh-muted); font-size:12px; }
.reach-node-link { white-space:nowrap; font-size:12px; }
.reach-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:20px; }
.reach-metric { background:var(--mesh-surface); border:1px solid var(--mesh-border); border-radius:9px; padding:20px 24px; font-size:13px; }
.reach-metric-value { font-size:30px; font-weight:650; color:var(--mesh-primary); margin-top:6px; font-variant-numeric:tabular-nums; }
.reach-metric:nth-child(2) .reach-metric-value { color:#198754; }
.reach-table-wrap { overflow-x:auto; border:1px solid var(--mesh-border); border-radius:9px; background:var(--mesh-surface); margin-bottom:20px; }
.reach-table { min-width:520px; }
.reach-map { width:100%; height:450px; border:1px solid var(--mesh-border); border-radius:9px; overflow:hidden; margin-bottom:20px; background:var(--mesh-stripe); }
.reach-map-marker { width:34px; height:34px; border:2px solid white; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:10px; font-weight:800; line-height:1; text-shadow:0 1px 2px #000b; box-shadow:0 2px 8px #0003; }
.reach-map-marker-source { font-size:14px; }
.reach-gateway-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.reach-gateway-panel { min-width:0; overflow:auto; border:1px solid var(--mesh-border); border-radius:9px; background:var(--mesh-surface); margin-bottom:20px; }
.reach-gateway-table { min-width:480px; }
.reach-count-bar-cell { min-width:180px; }
.reach-count-bar-track { position:relative; height:24px; border-radius:5px; background:#edf1f7; overflow:hidden; }
.reach-count-bar-value span { background:#fffffff2; border-radius:3px; padding:0 5px; }
.reach-count-bar-fill { height:100%; border-radius:inherit; background:var(--reach-bar-color,#22c55e); }
.reach-count-bar-value { position:absolute; inset:0; display:flex; align-items:center; padding-left:9px; font:600 12px ui-monospace,monospace; color:#17263c; }
.reach-muted { color:var(--mesh-muted); }
.mesh-data-page .mesh-content .reach-heard-link { padding:2px 7px; font-weight:600; }
.reliability-modal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; padding:16px; background:#17263c99; }
.reliability-modal.open { display:flex; }
.reliability-modal-panel { width:min(900px,100%); max-height:90dvh; overflow:auto; border:1px solid var(--mesh-border); border-radius:10px; background:var(--mesh-surface); padding:20px; box-shadow:0 16px 48px #17263c33; }
.reliability-modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.reliability-modal-title { font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.reliability-status-heard { color:#187346!important; font-weight:600; }
.reliability-status-missed { color:#b23d2f!important; font-weight:600; }
.reliability-status-skipped { color:var(--mesh-muted)!important; font-weight:600; }
.reliability-row-skipped td { text-decoration:line-through; color:var(--mesh-muted)!important; }
@media(max-width:1000px) { .reach-gateway-panels { grid-template-columns:minmax(0,1fr); gap:0; } }
@media(max-width:600px) { .reach-controls { align-items:stretch; } .reach-search-label { width:100%; } .reach-search { flex-basis:100%; } .reach-summary { gap:10px; } .reach-metric { padding:16px; } .reach-metric-value { font-size:26px; } .reach-map { height:340px; } .reliability-modal-panel { padding:14px; } }
</style>
{% endblock %}

{% block body %}
<section class="reach-page">
    <header class="data-heading"><div><span class="mesh-eyebrow">GATEWAY DIAGNOSTICS</span><h1>Reliability</h1><p>See how consistently gateways hear packets from a selected node.</p></div><a class="mesh-secondary-button" href="/nodelist">All nodes ↗</a></header>
    <details class="reach-description"><summary>How reliability is calculated</summary><p>Review how often each gateway hears packets from a selected node. The report uses the
            latest selected packet sample and calculates reliability as heard packets divided by packets
            reviewed. The range table groups gateways by reliability bands, while the gateway list
            shows each gateway's heard count and percentage for the same sample. Reliability is
            calculated only from Text, Position, Node Info, and Telemetry packets; other packet types
            are shown in packet details but skipped from the calculation.</p></details>

    <section class="reach-panel">
        <form class="reach-controls" id="reach-search-form">
            <label class="reach-search-label" for="reach-node-search">Search</label>
            <input
                class="form-control reach-search"
                id="reach-node-search"
                list="reach-node-options"
                placeholder="Search node name or enter node ID"
                autocomplete="off"
            >
            <datalist id="reach-node-options"></datalist>
            <label class="reach-limit-label" for="reliability-packet-type">Packet type</label>
            <select class="form-select" id="reliability-packet-type" style="max-width:150px;">
                <option value="">All</option>
                <option value="1" selected>Text</option>
                <option value="3">Position</option>
                <option value="4">Node Info</option>
                <option value="67">Telemetry</option>
            </select>
            <label class="reach-limit-label" for="reach-packet-limit">Packets to review</label>
            <select class="form-select" id="reach-packet-limit" style="max-width:110px;">
                <option value="10">10</option>
                <option value="20" selected>20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>
                <option value="60">60</option>
                <option value="70">70</option>
                <option value="80">80</option>
                <option value="90">90</option>
                <option value="100">100</option>
            </select>
            <button class="btn btn-primary" type="submit">Load</button>
            <a class="btn btn-outline-secondary reach-node-link" id="reach-node-link" href="/node/3530776522">
                Back to Node
            </a>
        </form>

        <div class="reach-summary">
            <div class="reach-metric">
                <div class="text-secondary">Latest Packets</div>
                <div class="reach-metric-value" id="reach-packet-count">...</div>
            </div>
            <div class="reach-metric">
                <div class="text-secondary">Unique Gateways</div>
                <div class="reach-metric-value" id="reach-gateway-count">...</div>
            </div>
        </div>

        <div class="reach-table-wrap" role="region" aria-label="Reliability report table" tabindex="0">
            <table class="table table-sm reach-table">
                <thead>
                    <tr>
                        <th>Reliability Bands</th>
                        <th>Gateway Count</th>
                    </tr>
                </thead>
                <tbody id="reach-bucket-body">
                    <tr>
                        <td colspan="2" class="reach-muted">Loading statistics...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="reach-gateway-map" class="reach-map"></div>

        <div class="reach-gateway-panels">
            <div class="reach-gateway-panel" role="region" aria-label="Gateway reliability table" tabindex="0">
                <table class="table table-sm reach-table reach-gateway-table">
                    <thead>
                        <tr>
                            <th>Gateway</th>
                            <th>Heard</th>
                            <th>Avg Hops</th>
                            <th>Reliability</th>
                        </tr>
                    </thead>
                    <tbody id="reach-packet-body-left">
                        <tr>
                            <td colspan="4" class="reach-muted">Loading packets...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="reach-gateway-panel" role="region" aria-label="Gateway reliability table" tabindex="0">
                <table class="table table-sm reach-table reach-gateway-table">
                    <thead>
                        <tr>
                            <th>Gateway</th>
                            <th>Heard</th>
                            <th>Avg Hops</th>
                            <th>Reliability</th>
                        </tr>
                    </thead>
                    <tbody id="reach-packet-body-right">
                        <tr>
                            <td colspan="4" class="reach-muted">Loading packets...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</section>

<div class="reliability-modal" id="gateway-packet-modal" role="dialog" aria-modal="true" aria-labelledby="gateway-packet-title">
    <div class="reliability-modal-panel">
        <div class="reliability-modal-header">
            <div class="reliability-modal-title" id="gateway-packet-title">Packet Details</div>
            <button class="btn btn-sm btn-outline-secondary" type="button" onclick="closeGatewayPacketModal()">Close</button>
        </div>
        <div class="reach-table-wrap" role="region" aria-label="Reliability report table" tabindex="0">
            <table class="table table-sm reach-table">
                <thead>
                    <tr>
                        <th>Packet</th>
                        <th>Time</th>
                        <th>Type</th>
                        <th>Hops</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="gateway-packet-body">
                    <tr>
                        <td colspan="5" class="reach-muted">No packet selected.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="/static/portmaps.js"></script>
<script>
const defaultReachNodeId = 3530776522;
const defaultReachPacketLimit = 20;
const initialReachNodeId = Number(new URLSearchParams(window.location.search).get("node_id")) || defaultReachNodeId;
let reachNodeId = initialReachNodeId;
let reachNodes = [];
let reliabilityGatewayDetails = new Map();
let reliabilityMap = null;
let reliabilityMapLayer = null;
const countedReliabilityPorts = new Set([1, 3, 4, 67]);
const reliabilityBuckets = [
    { label: "100%", color: "#22c55e", matches: row => row.percent === 100 },
    { label: "90-99%", color: "#84cc16", matches: row => row.percent >= 90 && row.percent < 100 },
    { label: "80-89%", color: "#eab308", matches: row => row.percent >= 80 && row.percent < 90 },
    { label: "70-79%", color: "#f97316", matches: row => row.percent >= 70 && row.percent < 80 },
    { label: "60-69%", color: "#ef4444", matches: row => row.percent >= 60 && row.percent < 70 },
    { label: "50-59%", color: "#991b1b", matches: row => row.percent >= 50 && row.percent < 60 },
];

function escapeHtml(value) {
    return String(value ?? "")
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
}

function gatewayLabel(nodeId, nodesById) {
    const node = nodesById.get(Number(nodeId));
    const name = node?.long_name || node?.short_name;
    return name ? `${name} (${nodeId})` : String(nodeId);
}

function nodeLink(nodeId, nodesById) {
    return `<a href="/node/${encodeURIComponent(nodeId)}">${
        escapeHtml(gatewayLabel(nodeId, nodesById))
    }</a>`;
}

function nodeSearchLabel(node) {
    const name = node.long_name || node.short_name || "Unnamed";
    return `${name} (${node.node_id})`;
}

function formatPacketTime(us) {
    if (!us) return "N/A";
    return new Date(us / 1000).toLocaleString();
}

function packetTypeTag(portnum) {
    const name = window.PORT_MAP?.[portnum] || "Unknown";
    const color = window.PORT_COLORS?.[portnum] || "#6c757d";
    return `
        <span class="port-tag" style="background-color:${color}">
            ${escapeHtml(name)}
        </span>
        <span class="text-secondary">(${escapeHtml(portnum ?? "?")})</span>
    `;
}

function packetSeenHopCount(row) {
    const hopStart = Number(row?.hop_start ?? 0);
    const hopLimit = Number(row?.hop_limit ?? 0);
    return Math.max(0, hopStart - hopLimit);
}

function formatAverageHopCount(value) {
    if (value === null || value === undefined || !Number.isFinite(value)) return "—";

    const lower = Math.floor(value);
    return value - lower === 0.5 ? lower : Math.round(value);
}

function formatAverageHopCountWithActual(value) {
    if (value === null || value === undefined || !Number.isFinite(value)) return "—";
    return `${formatAverageHopCount(value)} (${value.toFixed(1)})`;
}

function reliabilityBucketFor(row) {
    return reliabilityBuckets.find(bucket => bucket.matches(row)) || null;
}

function nodeLatLng(node) {
    if (!node?.last_lat || !node?.last_long) return null;

    const lat = node.last_lat / 1e7;
    const lon = node.last_long / 1e7;
    if (!Number.isFinite(lat) || !Number.isFinite(lon) || lat === 0 || lon === 0) return null;

    return [lat, lon];
}

function initReliabilityMap() {
    if (reliabilityMap) return reliabilityMap;

    reliabilityMap = L.map("reach-gateway-map", { preferCanvas: true }).setView([37.7749, -122.4194], 8);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "&copy; OpenStreetMap",
        maxZoom: 19,
    }).addTo(reliabilityMap);
    L.control.scale({
        position: "bottomleft",
        metric: true,
        imperial: true,
    }).addTo(reliabilityMap);
    reliabilityMapLayer = L.layerGroup().addTo(reliabilityMap);

    return reliabilityMap;
}

function resetReliabilityMap() {
    if (!reliabilityMap) initReliabilityMap();
    reliabilityMapLayer.clearLayers();
    requestAnimationFrame(() => reliabilityMap.invalidateSize());
}

function reachMapIcon(label, color, extraClass = "") {
    return L.divIcon({
        className: "",
        iconSize: [34, 34],
        iconAnchor: [17, 17],
        popupAnchor: [0, -17],
        html: `
            <div class="reach-map-marker ${extraClass}" style="background:${color};">
                ${escapeHtml(label)}
            </div>
        `,
    });
}

function renderReliabilityMap(gatewayRows, nodesById) {
    if (!reliabilityMap) initReliabilityMap();
    reliabilityMapLayer.clearLayers();

    const bounds = [];
    const sourceNode = nodesById.get(Number(reachNodeId));
    const sourceLatLng = nodeLatLng(sourceNode);
    if (sourceLatLng) {
        L.marker(sourceLatLng, {
            icon: reachMapIcon("TX", "#111827", "reach-map-marker-source"),
        }).bindPopup(`<b>${escapeHtml(gatewayLabel(reachNodeId, nodesById))}</b><br>Selected Node`)
            .addTo(reliabilityMapLayer);
        bounds.push(sourceLatLng);
    }

    gatewayRows.forEach(row => {
        const bucket = reliabilityBucketFor(row);
        if (!bucket) return;

        const node = nodesById.get(Number(row.nodeId));
        const latLng = nodeLatLng(node);
        if (!latLng) return;

        L.marker(latLng, {
            icon: reachMapIcon(`${Math.round(row.percent)}%`, bucket.color),
        }).bindPopup(`
            <b>${nodeLink(row.nodeId, nodesById)}</b><br>
            Reliability: ${row.percent.toFixed(1)}% · Avg. hops ${formatAverageHopCountWithActual(row.avgHopCount)}<br>
            Heard:
            <button class="reach-heard-link" type="button" onclick="openGatewayPacketModal(${row.nodeId})">
                ${row.heardCount}
            </button>
            <span class="text-secondary">(${row.total})</span>
        `).addTo(reliabilityMapLayer);
        bounds.push(latLng);
    });

    requestAnimationFrame(() => {
        reliabilityMap.invalidateSize();
        if (bounds.length) {
            reliabilityMap.fitBounds(bounds, { padding: [24, 24], maxZoom: 12 });
        }
    });
}

function isSkippedReliabilityPacket(packet) {
    return !countedReliabilityPorts.has(Number(packet.portnum));
}

function openGatewayPacketModal(nodeId) {
    const details = reliabilityGatewayDetails.get(Number(nodeId));
    const titleEl = document.getElementById("gateway-packet-title");
    const bodyEl = document.getElementById("gateway-packet-body");
    const modalEl = document.getElementById("gateway-packet-modal");

    if (!details) return;

    titleEl.textContent = `${details.label}: ${details.heardCount} (${details.total}) packets heard`;
    bodyEl.innerHTML = details.packets.map(packet => {
        const statusClass = packet.skipped
            ? "reliability-status-skipped"
            : packet.heard ? "reliability-status-heard" : "reliability-status-missed";
        const statusText = packet.heard ? "Heard" : "Missed";

        return `
        <tr class="${packet.skipped ? "reliability-row-skipped" : ""}">
            <td><a href="/packet/${packet.id}">${packet.id}</a></td>
            <td>${escapeHtml(formatPacketTime(packet.import_time_us))}</td>
            <td>${packetTypeTag(packet.portnum)}</td>
            <td>${packet.hopCount ?? "—"}</td>
            <td class="${statusClass}">${statusText}</td>
        </tr>
        `;
    }).join("");
    modalEl.classList.add("open");
}

function closeGatewayPacketModal() {
    document.getElementById("gateway-packet-modal").classList.remove("open");
}

function parseNodeSearchValue(value) {
    const trimmed = value.trim();
    const parenthesizedId = trimmed.match(/\((\d+)\)\s*$/);
    if (parenthesizedId) return Number(parenthesizedId[1]);

    const rawId = trimmed.match(/^\d+$/);
    if (rawId) return Number(trimmed);

    const lower = trimmed.toLowerCase();
    const node = reachNodes.find(n =>
        (n.long_name || "").toLowerCase() === lower ||
        (n.short_name || "").toLowerCase() === lower
    );
    return node ? Number(node.node_id) : null;
}

async function fetchJson(url) {
    const res = await fetch(url);
    if (!res.ok) {
        throw new Error(`${url} returned ${res.status}`);
    }
    return res.json();
}

async function loadReachNodes() {
    const data = await fetchJson("/api/nodes?days_active=3");
    reachNodes = data.nodes || [];

    const optionsEl = document.getElementById("reach-node-options");
    optionsEl.innerHTML = reachNodes
        .filter(node => node.node_id)
        .map(node => `<option value="${escapeHtml(nodeSearchLabel(node))}"></option>`)
        .join("");

    return reachNodes;
}

async function loadReachReport(nodeId = reachNodeId) {
    reachNodeId = Number(nodeId);
    const packetLimit = Number(document.getElementById("reach-packet-limit").value) || defaultReachPacketLimit;
    const packetType = document.getElementById("reliability-packet-type").value;
    const packetCountEl = document.getElementById("reach-packet-count");
    const gatewayCountEl = document.getElementById("reach-gateway-count");
    const nodeLinkEl = document.getElementById("reach-node-link");
    const bodyEls = [
        document.getElementById("reach-packet-body-left"),
        document.getElementById("reach-packet-body-right"),
    ];
    const bucketBodyEl = document.getElementById("reach-bucket-body");
    const setGatewayTables = html => {
        bodyEls.forEach(el => {
            el.innerHTML = html;
        });
    };

    packetCountEl.textContent = "...";
    gatewayCountEl.textContent = "...";
    reliabilityGatewayDetails = new Map();
    nodeLinkEl.href = `/node/${encodeURIComponent(reachNodeId)}`;
    bucketBodyEl.innerHTML = '<tr><td colspan="2" class="reach-muted">Loading statistics...</td></tr>';
    setGatewayTables('<tr><td colspan="4" class="reach-muted">Loading packets...</td></tr>');
    resetReliabilityMap();

    try {
        const packetUrl = new URL("/api/packets", window.location.origin);
        packetUrl.searchParams.set("from_node_id", reachNodeId);
        packetUrl.searchParams.set("limit", packetLimit);
        if (packetType) packetUrl.searchParams.set("portnum", packetType);

        const [packetData] = await Promise.all([
            fetchJson(packetUrl),
        ]);

        const packets = packetData.packets || [];
        const nodesById = new Map(reachNodes.map(node => [Number(node.node_id), node]));

        packetCountEl.textContent = packets.length;

        if (packets.length === 0) {
            gatewayCountEl.textContent = "0";
            bucketBodyEl.innerHTML = '<tr><td colspan="2" class="reach-muted">No packets found.</td></tr>';
            setGatewayTables('<tr><td colspan="4" class="reach-muted">No packets found.</td></tr>');
            resetReliabilityMap();
            return;
        }

        const seenResults = await Promise.all(
            packets.map(packet =>
                fetchJson(`/api/packets_seen/${packet.id}`)
                    .then(data => ({ packet, seen: data.seen || [] }))
                    .catch(err => {
                        console.error("Failed to load packet seen rows", packet.id, err);
                        return { packet, seen: [], error: true };
                    })
            )
        );

        const gatewayStats = new Map();
        const reportResults = seenResults.filter(result => !isSkippedReliabilityPacket(result.packet));
        reportResults.forEach(result => {
            const seenByGateway = new Map();
            result.seen.forEach(row => {
                const nodeId = Number(row.node_id);
                if (nodeId === reachNodeId || seenByGateway.has(nodeId)) return;
                seenByGateway.set(nodeId, row);
            });
            seenByGateway.forEach((seenRow, nodeId) => {
                const stats = gatewayStats.get(nodeId) || { heardCount: 0, hopTotal: 0 };
                stats.heardCount += 1;
                stats.hopTotal += packetSeenHopCount(seenRow);
                gatewayStats.set(nodeId, stats);
            });
        });

        const gatewayRows = [...gatewayStats.entries()]
            .map(([nodeId, stats]) => ({
                nodeId,
                heardCount: stats.heardCount,
                avgHopCount: stats.heardCount ? stats.hopTotal / stats.heardCount : null,
                total: reportResults.length,
                percent: reportResults.length ? (stats.heardCount / reportResults.length) * 100 : 0,
            }))
            .sort((a, b) => b.percent - a.percent || b.heardCount - a.heardCount || a.nodeId - b.nodeId);

        gatewayCountEl.textContent = gatewayRows.length;
        const bucketRows = reliabilityBuckets.map(bucket => ({
            label: bucket.label,
            color: bucket.color,
            count: gatewayRows.filter(bucket.matches).length,
        }));
        const maxBucketCount = Math.max(...bucketRows.map(row => row.count), 1);
        bucketBodyEl.innerHTML = bucketRows.map(row => {
            const width = row.count > 0 ? Math.max((row.count / maxBucketCount) * 100, 8) : 0;
            return `
                <tr>
                    <td>${row.label}</td>
                    <td class="reach-count-bar-cell">
                        <div class="reach-count-bar-track">
                            <div class="reach-count-bar-fill" style="width:${width}%; --reach-bar-color:${row.color};"></div>
                            <div class="reach-count-bar-value"><span>${row.count}</span></div>
                        </div>
                    </td>
                </tr>
            `;
        }).join("");

        const renderGatewayRows = rows => rows.length
            ? rows.map(row => `
                <tr>
                    <td>${nodeLink(row.nodeId, nodesById)}</td>
                    <td>
                        <button class="reach-heard-link" type="button" onclick="openGatewayPacketModal(${row.nodeId})">
                            ${row.heardCount}
                        </button>
                        <span class="text-secondary">(${reportResults.length})</span>
                    </td>
                    <td>${formatAverageHopCountWithActual(row.avgHopCount)}</td>
                    <td>${row.percent.toFixed(1)}%</td>
                </tr>
            `).join("")
            : '<tr><td colspan="4" class="reach-muted">No gateways heard these packets.</td></tr>';
        reliabilityGatewayDetails = new Map(gatewayRows.map(row => [
            Number(row.nodeId),
            {
                label: gatewayLabel(row.nodeId, nodesById),
                heardCount: row.heardCount,
                total: reportResults.length,
                packets: seenResults.map(result => {
                    const seenRow = result.seen.find(seen => Number(seen.node_id) === Number(row.nodeId));
                    return {
                        id: result.packet.id,
                        import_time_us: result.packet.import_time_us,
                        portnum: result.packet.portnum,
                        skipped: isSkippedReliabilityPacket(result.packet),
                        heard: Boolean(seenRow),
                        hopCount: seenRow ? packetSeenHopCount(seenRow) : null,
                    };
                }),
            }
        ]));
        const splitIndex = Math.ceil(gatewayRows.length / 2);
        bodyEls[0].innerHTML = renderGatewayRows(gatewayRows.slice(0, splitIndex));
        bodyEls[1].innerHTML = gatewayRows.length > 1
            ? renderGatewayRows(gatewayRows.slice(splitIndex))
            : '<tr><td colspan="4" class="reach-muted">No additional gateways.</td></tr>';
        renderReliabilityMap(gatewayRows, nodesById);
    } catch (err) {
        console.error("Failed to load reach report:", err);
        packetCountEl.textContent = "!";
        gatewayCountEl.textContent = "!";
        bucketBodyEl.innerHTML = '<tr><td colspan="2" class="text-danger">Failed to load statistics.</td></tr>';
        setGatewayTables('<tr><td colspan="4" class="text-danger">Failed to load report.</td></tr>');
        resetReliabilityMap();
    }
}

document.addEventListener("DOMContentLoaded", async () => {
    document.getElementById("gateway-packet-modal").addEventListener("click", event => {
        if (event.target.id === "gateway-packet-modal") closeGatewayPacketModal();
    });

    document.getElementById("reach-search-form").addEventListener("submit", event => {
        event.preventDefault();

        const nodeId = parseNodeSearchValue(document.getElementById("reach-node-search").value);
        if (!nodeId) {
            document.getElementById("reach-bucket-body").innerHTML =
                '<tr><td colspan="2" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
            document.getElementById("reach-packet-body-left").innerHTML =
                '<tr><td colspan="4" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
            document.getElementById("reach-packet-body-right").innerHTML =
                '<tr><td colspan="4" class="text-warning">Enter a valid node ID or select a node.</td></tr>';
            return;
        }

        loadReachReport(nodeId);
    });

    try {
        await loadReachNodes();
    } catch (err) {
        console.error("Failed to load node list:", err);
    }
    initReliabilityMap();

    const searchEl = document.getElementById("reach-node-search");
    searchEl.value = nodeSearchLabel(
        reachNodes.find(node => Number(node.node_id) === initialReachNodeId) ||
        { node_id: initialReachNodeId, long_name: "Node" }
    );
    loadReachReport(initialReachNodeId);
});
</script>
{% endblock %}