{% extends "base.html" %}

{% block css %}
.reach-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.reach-header {
    margin-bottom: 10px;
}

.reach-header h1 {
    font-size: 1.35rem;
    margin-bottom: 2px;
}

.reach-panel {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.reach-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.reach-search {
    min-width: 0;
    flex: 0 1 420px;
}

.reach-search-label,
.reach-limit-label {
    align-self: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.reach-limit-label {
    margin-left: auto;
}

.reach-node-link {
    align-self: center;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .reach-controls {
        flex-direction: column;
    }
}

.reach-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.reach-metric {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.18);
}

.reach-metric-value {
    font-size: 1.2rem;
    line-height: 1.2;
}

.reach-table-wrap {
    overflow-x: auto;
    margin-top: 10px;
}

.reach-table {
    width: 100%;
    min-width: 760px;
    font-size: 0.9rem;
}

.reach-map {
    width: 100%;
    height: 520px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.18);
}

.reach-map-marker {
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.reach-map-marker-source {
    background: #111827;
    font-size: 0.95rem;
}

.reach-gateway-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.reach-gateway-panel {
    overflow-x: auto;
}

.reach-gateway-table {
    min-width: 0;
}

.reach-table th,
.reach-table td {
    vertical-align: top;
    padding: 0.35rem 0.5rem;
}

.reach-count-bar-cell {
    min-width: 180px;
}

.reach-count-bar-track {
    position: relative;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.reach-count-bar-fill {
    height: 100%;
    min-width: 24px;
    border-radius: inherit;
    background: var(--reach-bar-color, #4ade80);
}

.reach-count-bar-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 700;
}

.reach-muted {
    color: rgba(255, 255, 255, 0.62);
}

.reach-heard-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #8ab4f8;
    text-decoration: underline;
    cursor: pointer;
}

.port-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
}

.reliability-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.72);
}

.reliability-modal.open {
    display: flex;
}

.reliability-modal-panel {
    width: min(760px, 100%);
    max-height: min(720px, 92vh);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: #111827;
    padding: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.reliability-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.reliability-modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.reliability-status-heard {
    color: #4ade80 !important;
    font-weight: 700;
}

.reliability-status-missed {
    color: #f87171 !important;
    font-weight: 700;
}

.reliability-status-skipped {
    color: #cbd5e1 !important;
    font-weight: 700;
}

.reliability-row-skipped td {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: rgba(255, 255, 255, 0.58) !important;
}

@media (max-width: 600px) {
    .reach-gateway-panels {
        grid-template-columns: 1fr;
    }
}
{% endblock %}

{% block body %}
<main class="reach-page">
    <div class="reach-header">
        <h1>Reliability</h1>
        <p class="text-secondary mb-0">
            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>
    </div>

    <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-table-wrap">
            <table class="table table-dark table-sm table-striped 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-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-gateway-panels">
            <div class="reach-gateway-panel">
                <table class="table table-dark table-sm table-striped 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">
                <table class="table table-dark table-sm table-striped 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>
</main>

<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-light" type="button" onclick="closeGatewayPacketModal()">Close</button>
        </div>
        <div class="reach-table-wrap">
            <table class="table table-dark table-sm table-striped 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">${row.count}</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 %}