{% extends "base.html" %}
{% block theme %}light{% endblock %}
{% block body_class %}{{ "mesh-dashboard" if dashboard else "mesh-map-only" }}{% endblock %}

{% block css %}
<style>
    .legend { background:white;padding:8px;line-height:1.5;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.3);font-size:14px;color:black; }
    .legend i { width:12px;height:12px;display:inline-block;margin-right:6px;border-radius:50%; }

    #filter-container { text-align:center;margin-top:10px; }
    .filter-checkbox { margin:0 10px; }

    #share-button,
    #reset-filters-button {
        padding:5px 15px;border:none;border-radius:4px;font-size:14px;cursor:pointer;color:white;
    }
    #share-button { margin-left:20px; background-color:#4CAF50; }
    #share-button:hover { background-color:#45a049; }
    #share-button:active { background-color:#3d8b40; }

    #reset-filters-button { margin-left:10px; background-color:#f44336; }
    #reset-filters-button:hover { background-color:#da190b; }
    #reset-filters-button:active { background-color:#c41e0d; }

    .blinking-tooltip {
        background: white;
        color: black;
        border: 1px solid #111;
        border-radius: 4px;
        padding: 3px 6px;
        font-size: 12px;
        font-weight: 400;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    .blinking-tooltip.text-packet {
        animation: textPulse 1.1s ease-in-out 6;
        border-color: #ff8c00;
    }
    .packet-seen-trace {
        stroke-dasharray: 0.01px var(--packet-trace-gap, 999px);
        stroke-linecap: round;
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.65));
        animation: packetTrace var(--packet-trace-duration, 6.5s) linear 1 forwards;
    }
    .packet-seen-landing {
        transform-box: fill-box;
        transform-origin: center;
        animation: packetSeenLanding 1s ease-out 1 forwards;
    }
    @keyframes packetTrace {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: calc(-1 * var(--packet-trace-distance, 1000px)); }
    }
    @keyframes packetSeenLanding {
        from {
            stroke-opacity: 0.7;
            fill-opacity: 0.24;
            transform: scale(0.3);
        }
        to {
            stroke-opacity: 0;
            fill-opacity: 0;
            transform: scale(1.6);
        }
    }
    @keyframes textPulse {
        0% { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
        50% { box-shadow: 0 4px 14px rgba(255,140,0,0.45); }
        100% { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
    }

    #map-wrapper {
        position: relative;
        width: 100%;
        height: calc(100vh - 270px);
    }
    #map {
        width: 100%;
        height: 100%;
    }
    #unmapped-packets {
        position: absolute;
        bottom: 30px;
        right: 15px;
        z-index: 600;
        width: 220px;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 12px;
        text-align: left;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        pointer-events: auto;
    }
    #unmapped-packets h3 {
        margin: 0 0 6px;
        font-size: 12px;
        font-weight: 600;
        color: #000;
    }
    #unmapped-list {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 120px;
        overflow-y: auto;
    }
    #unmapped-list li {
        display: flex;
        gap: 6px;
        padding: 3px 0;
        border-bottom: 1px dotted #e0e0e0;
    }
    #unmapped-list li:last-child { border-bottom: none; }
    .unmapped-node { font-weight: 400; color: #000; }
    .unmapped-empty { color: #666; font-style: italic; }

/* Standalone map uses the full content width. */
.mesh-map-only .mesh-map-panel #map-wrapper { height:calc(100dvh - 290px); min-height:420px; }
@media(max-width:700px) { .mesh-map-only .mesh-map-panel #map-wrapper { height:calc(100dvh - 300px); min-height:380px; } }
/* Map-side inspection and shared live packet stream. */
.mesh-node-browser[hidden],.mesh-node-inspector[hidden],.mesh-packet-inspector[hidden] { display:none; }
.mesh-node-inspector { max-height:690px; overflow:auto; }
.mesh-inspector-back,.mesh-inspector-close,.mesh-traffic-control { padding:6px 10px; background:var(--mesh-soft); color:var(--mesh-primary); border:1px solid var(--mesh-border); border-radius:5px; font-size:12px; }
.mesh-inspector-body { padding:16px; }
.mesh-inspector-name { font-size:17px; font-weight:650; overflow-wrap:anywhere; margin:0 0 5px; }
.mesh-inspector-meta { color:var(--mesh-muted); font-size:11px; margin:0 0 16px; overflow-wrap:anywhere; }
.mesh-inspector-facts { display:grid; grid-template-columns:90px minmax(0,1fr); gap:8px; font-size:12px; }
.mesh-inspector-facts dt { color:var(--mesh-muted); font-weight:500; }
.mesh-inspector-facts dd { margin:0; overflow-wrap:anywhere; }
.mesh-inspector-section { margin:18px 0 10px; font-size:12px; font-weight:650; padding-top:14px; border-top:1px solid var(--mesh-border); }
.mesh-inspector-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mesh-inspector-actions a { font-size:12px; }
.mesh-inspector-packet { display:block; width:100%; text-align:left; padding:10px 0; border:0; border-bottom:1px solid #edf1f6; background:white; color:#334155; font-size:12px; }
.mesh-inspector-packet:hover { background:var(--mesh-soft); }
.mesh-inspector-packet strong,.mesh-inspector-packet small { display:block; }
.mesh-inspector-packet small { color:var(--mesh-muted); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mesh-inspector-note { color:var(--mesh-muted); font-size:12px; margin:8px 0; }
.mesh-inspector-telemetry { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mesh-inspector-telemetry div { padding:10px; background:var(--mesh-soft); border-radius:6px; }
.mesh-inspector-telemetry strong { display:block; font-size:18px; color:var(--mesh-primary); }
.mesh-inspector-telemetry span { font-size:10px; color:var(--mesh-muted); }
.mesh-packet-inspector { border-top:1px solid var(--mesh-border); }
.mesh-packet-heading { margin:0; font-size:14px; font-weight:600; }
.mesh-packet-payload { max-height:100px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; background:var(--mesh-stripe); border:1px solid var(--mesh-border); border-radius:6px; font:12px/1.6 ui-monospace,monospace; }
.mesh-observer-list { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.mesh-observer { text-align:left; background:var(--mesh-soft); border:1px solid var(--mesh-border); color:var(--mesh-primary); border-radius:6px; padding:8px 10px; font-size:12px; max-width:100%; overflow-wrap:anywhere; }
.mesh-observer small { display:block; font-size:10px; color:var(--mesh-muted); margin-top:3px; }
.mesh-traffic { margin-top:20px; background:white; border:1px solid var(--mesh-border); border-radius:9px; overflow:hidden; }
.mesh-traffic-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mesh-traffic-status { font-size:11px; color:var(--mesh-primary); }
.mesh-traffic-status[data-state="error"] { color:#b23d2f; }
.mesh-traffic-list { max-height:260px; overflow:auto; }
 .mesh-traffic-table { width:100%; min-width:780px; border-collapse:collapse; font-size:13px; color:#334155; }
.mesh-traffic-table th { position:sticky; top:0; z-index:1; padding:12px 14px; background:var(--mesh-primary); color:white; font-weight:500; font-size:12px; white-space:nowrap; text-align:left; }
.mesh-traffic-table td { padding:11px 14px; border-bottom:1px solid #edf1f6; text-align:left; }
.mesh-traffic-row { cursor:pointer; background:white; }
.mesh-traffic-row:nth-of-type(4n+3) { background:var(--mesh-stripe); }
.mesh-traffic-row:hover,.mesh-traffic-row.selected { background:var(--mesh-soft); }
.mesh-traffic-table a { color:var(--mesh-primary); text-decoration:none; }
.mesh-traffic-table a:hover { text-decoration:underline; }
.mesh-traffic-time { white-space:nowrap; font-size:12px; }
.mesh-traffic-type { display:inline-block; color:white; padding:3px 7px; border-radius:5px; font-size:10px; font-weight:500; white-space:nowrap; }
.mesh-traffic-port-number { color:var(--mesh-muted); font-size:11px; margin:0 6px; }
.mesh-traffic-select,.mesh-traffic-toggle { border:1px solid var(--mesh-border); background:var(--mesh-soft); color:var(--mesh-primary); border-radius:5px; font-size:11px; padding:4px 7px; white-space:nowrap; }
.mesh-traffic-toggle { margin-right:7px; }
.mesh-traffic-payload[hidden] { display:none; }
.mesh-traffic-payload td { background:var(--mesh-soft); }
.mesh-traffic-payload pre { margin:0; max-height:180px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.7 ui-monospace,monospace; }
#map-traffic-channel { border:1px solid var(--mesh-border); border-radius:5px; color:#334155; background:white; font-size:12px; padding:6px 8px; max-width:180px; }
:is(.mesh-traffic-select,.mesh-traffic-toggle,.mesh-traffic-table a,#map-traffic-channel,.mesh-observer,.mesh-inspector-packet,.mesh-inspector-back,.mesh-inspector-close,.mesh-traffic-control):focus-visible { outline:2px solid var(--mesh-primary); outline-offset:2px; }
.mesh-traffic-note { padding:8px 18px; border-top:1px solid var(--mesh-border); color:var(--mesh-muted); font-size:11px; margin:0; }
@media(max-width:700px) { .mesh-node-inspector { max-height:none; } .mesh-traffic .mesh-panel-title { align-items:flex-start; flex-direction:column; } }
</style>
{% endblock %}

{% block body %}
{% if dashboard %}
<section class="mesh-page-heading">
    <div><span class="mesh-eyebrow">NETWORK EXPLORER</span><h1>Mesh overview</h1><p>Explore your nodes, connections, and live network activity.</p></div>
    <a class="mesh-secondary-button" href="/stats">View statistics ↗</a>
</section>
<section class="mesh-metrics" aria-label="Network summary">
    <div class="mesh-metric"><span>Recent nodes</span><strong id="metric-nodes">—</strong><small>Seen in the last 3 days</small></div>
    <div class="mesh-metric"><span>Active nodes</span><strong id="metric-active">—</strong><small>Seen in the last 24 hours</small></div>
    <div class="mesh-metric"><span>MQTT gateways</span><strong id="metric-gateways">—</strong><small>Among recent nodes</small></div>
    <div class="mesh-metric"><span>Total packets</span><strong id="metric-packets">—</strong><small id="metric-status" role="status">Loading network totals…</small></div>
</section>
<div class="mesh-explorer">
<aside class="mesh-node-panel" aria-label="Node explorer">
    <div id="mesh-node-browser" class="mesh-node-browser">
    <div class="mesh-panel-title"><h2>Network nodes</h2><span id="node-result-count" class="mesh-count">—</span></div>
    <label class="mesh-search-label" for="node-search">Search nodes</label>
    <input id="node-search" class="mesh-search" type="search" placeholder="Name or node ID…" autocomplete="off">
    <div id="mesh-node-list" class="mesh-node-list" aria-live="polite"><p class="mesh-empty">Loading nodes…</p></div>
    </div>
    <section id="mesh-node-inspector" class="mesh-node-inspector" aria-label="Selected node" hidden>
        <div class="mesh-panel-title"><h2>Node inspector</h2><button id="inspector-back" class="mesh-inspector-back" type="button">← Nodes</button></div>
        <div class="mesh-inspector-body">
            <h3 id="inspector-name" class="mesh-inspector-name"></h3>
            <p id="inspector-node-meta" class="mesh-inspector-meta"></p>
            <dl id="inspector-facts" class="mesh-inspector-facts"></dl>
            <div class="mesh-inspector-actions"><a id="inspector-node-link" href="/nodelist">Full node details ↗</a><a id="inspector-reliability-link" href="/reliability">Reliability ↗</a><button id="inspector-refresh" class="mesh-inspector-back" type="button">Refresh data</button></div>
            <h3 class="mesh-inspector-section">Latest device telemetry</h3>
            <div id="inspector-telemetry" aria-live="polite"></div>
            <h3 class="mesh-inspector-section">Recent packets · sent &amp; received</h3>
            <div id="inspector-recent" aria-live="polite"></div>
        </div>
    </section>
</aside>
{% else %}
<section class="mesh-page-heading"><div><span class="mesh-eyebrow">NETWORK EXPLORER</span><h1>Network map</h1><p>Explore node locations and network connections.</p></div><a class="mesh-secondary-button" href="/">Home ↗</a></section>
{% endif %}
<section class="mesh-map-panel" aria-label="Network map">
<div class="mesh-panel-title"><h2>Network map</h2><button class="mesh-fit-button" type="button" id="fit-network">Fit network</button></div>
<p id="map-load-status" role="status" style="margin:0; color:#b23d2f;"></p>

<div id="map-wrapper">
    <div id="map"></div>

    {% if dashboard %}
    <div id="unmapped-packets">
        <h3 data-translate-lang="unmapped_packets_title">Unmapped Packets</h3>  
        <ul id="unmapped-list">
            <li class="unmapped-empty" data-translate-lang="unmapped_packets_empty">
                No recent unmapped packets.
            </li>
        </ul>
    </div>
    {% endif %}
<div id="map-legend"
     class="legend"
     style="position:absolute;
            bottom:30px;
            right:15px;
            z-index:500;
            pointer-events:none;">
    <div>
        <i style="background:orange; width:15px; height:3px; border-radius:0;"></i>
        <span data-translate-lang="legend_traceroute">Traceroute Path (arrowed)</span>
    </div>

    <div style="margin-top:6px;">
        <i style="background:gray; width:15px; height:3px; border-radius:0;"></i>
        <span data-translate-lang="legend_neighbor">Neighbor Link</span>
    </div>
</div>


</div>

<div id="filter-container">
    <input type="checkbox" class="filter-checkbox" id="filter-routers-only" aria-label="Show routers only">
    <span data-translate-lang="show_routers_only">Show Routers Only</span>
    <input type="checkbox" class="filter-checkbox" id="filter-mqtt-only" aria-label="Show MQTT gateways only">
    <span data-translate-lang="show_mqtt_only">Show MQTT Gateways Only</span>
</div>

<div style="text-align:center;margin-top:5px;">
    <button id="share-button" onclick="shareCurrentView()" data-translate-lang="share_view">
        🔗 Share This View
    </button>
    <button id="reset-filters-button" onclick="resetFiltersToDefaults()" data-translate-lang="reset_filters">
        ↺ Reset Filters To Defaults
    </button>
</div>

{% if dashboard %}
<section id="mesh-packet-inspector" class="mesh-packet-inspector" aria-label="Selected packet" hidden>
    <div class="mesh-panel-title"><h2 id="packet-inspector-title">Packet observations</h2><button id="packet-inspector-close" class="mesh-inspector-close" type="button">Clear</button></div>
    <div class="mesh-inspector-body">
        <p id="packet-inspector-summary" class="mesh-packet-heading"></p>
        <p id="packet-inspector-meta" class="mesh-inspector-note"></p>
        <pre id="packet-inspector-payload" class="mesh-packet-payload"></pre>
        <div id="packet-inspector-observers" class="mesh-observer-list" aria-live="polite"></div>
        <p id="packet-inspector-status" class="mesh-inspector-note" role="status"></p>
        <a id="packet-inspector-link" href="/firehose">Full packet details ↗</a>
    </div>
</section>
{% endif %}

</section>
{% if dashboard %}
</div>

<section class="mesh-traffic" aria-label="Live network traffic">
    <div class="mesh-panel-title"><h2>Live traffic</h2><div class="mesh-traffic-tools"><label for="map-traffic-channel" class="visually-hidden">Channel</label><select id="map-traffic-channel"><option value="">All channels</option></select><span id="map-traffic-status" class="mesh-traffic-status" role="status">Loading packets…</span><button id="map-traffic-pause" class="mesh-traffic-control" type="button" aria-pressed="false" title="Pause the traffic list; map animations continue">Pause feed</button><button id="map-traffic-refresh" class="mesh-traffic-control" type="button">Refresh</button></div></div>
    <div id="map-traffic-list" class="mesh-traffic-list" role="region" aria-label="Live packet table" tabindex="0">
        <table class="mesh-traffic-table"><thead><tr><th>Time</th><th>Packet ID</th><th>From</th><th>To</th><th>Channel</th><th>Port</th></tr></thead><tbody id="map-traffic-body"><tr><td colspan="6" class="mesh-empty">Loading recent network traffic…</td></tr></tbody></table>
    </div>
    <p class="mesh-traffic-note">Latest 30 packets · expand the arrow to view payloads · select a row or Map to inspect gateway observations.</p>
</section>

{% endif %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
        crossorigin=""></script>

<script src="https://unpkg.com/leaflet-polylinedecorator@1.6.0/dist/leaflet.polylinedecorator.js"
        integrity="sha384-FhPn/2P/fJGhQLeNWDn9B/2Gml2bPOrKJwFqJXgR3xOPYxWg5mYQ5XZdhUSugZT0"
        crossorigin></script>
<script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
<script src="/static/portmaps.js"></script>

<script>
/* ======================================================
   MAP PAGE TRANSLATION SYSTEM
   ====================================================== */

let mapTranslations = {};

async function loadTranslationsMap() {
    try {
        const cfg = await window._siteConfigPromise;
        const lang = cfg?.site?.language || "en";
        const res  = await fetch(`/api/lang?lang=${lang}&section=map`);
        mapTranslations = await res.json();
        applyTranslationsMap();
    } catch (err) {
        console.error("Map translation load failed:", err);
    }
}

function applyTranslationsMap(root = document) {
    root.querySelectorAll("[data-translate-lang]").forEach(el => {
        const key = el.dataset.translateLang;
        const val = mapTranslations[key];
        if (!val) return;

        if (el.tagName === "INPUT" && el.placeholder !== undefined) {
            el.placeholder = val;
        } else {
            el.textContent = val;
        }
    });
}

/* ======================================================
   EXISTING MAP LOGIC
   ====================================================== */

var map = L.map('map');
var baseLayers = {
    "OpenStreetMap": L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap'
    }),
    "OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
        maxZoom: 17,
        attribution: 'Map data: &copy; OpenStreetMap, SRTM | Map style: &copy; OpenTopoMap'
    })
};
baseLayers["OpenStreetMap"].addTo(map);
L.control.scale({
    position: 'bottomleft',
    metric: true,
    imperial: true
}).addTo(map);
var nodeLayer = L.layerGroup().addTo(map);
var edgeLayer = L.layerGroup().addTo(map);
var packetSeenLayer = L.layerGroup();
var trafficHeatLayer = L.heatLayer([], {
    radius: 34,
    blur: 18,
    maxZoom: 12,
    minOpacity: 0.3,
    gradient: {
        0.2: "#0b1f4d",
        0.45: "#12436b",
        0.7: "#7f2704",
        1.0: "#4d0000"
    }
});
var overlayLayers = {
    "Nodes": nodeLayer,
    "Packets Reach": packetSeenLayer,
    "Traffic HeatMap": trafficHeatLayer
};
L.control.layers(baseLayers, overlayLayers, {
    collapsed: window.matchMedia("(max-width: 700px)").matches
}).addTo(map);

// Data structures
var nodes = [], markers = {}, markerById = {}, nodeMap = new Map();
var selectedNodeId = null;
var activeBlinks = new Map(), lastImportTime = null;
var activePacketSeenHighlights = [];
var mapInterval = 0;
var unmappedPackets = [];
var trafficHeatLoaded = false;
var trafficHeatLoading = false;
const UNMAPPED_LIMIT = 50;
const UNMAPPED_TTL_MS = 5000;
const PACKET_SEEN_DELAY_MS = 15000;
const PACKET_TRACE_MIN_DURATION_MS = 1500;
const PACKET_TRACE_MAX_DURATION_MS = 6500;
const PACKET_TRACE_MS_PER_PIXEL = 18;
const PACKET_LANDING_DURATION_MS = 1000;

const portMap = window.PORT_LABEL_MAP;

// Generated colors for channels without a configured override.
const palette = ["#18aa18","#976049","#a5508c","#1898dc","#3a8846","#dc1884",
                 "#b8813d","#b64f35","#408b18","#4c719e","#be379c","#18aa52"];

const channelColorOverrides = new Map();

const colorMap = new Map();
const channelSet = new Set();

map.on("popupopen", function (e) {
    const popupEl = e.popup.getElement();
    if (popupEl) applyTranslationsMap(popupEl);
});

function timeAgoFromUs(us){
    const diff = Date.now() - (us / 1000);
    const s = Math.floor(diff/1000), m = Math.floor(s/60),
          h = Math.floor(m/60),       d = Math.floor(h/24);
    return d>0?d+"d":h>0?h+"h":m>0?m+"m":s+"s";
}

function normalizeChannelName(str){
    return String(str || "Unknown").toLowerCase().replace(/[\s_-]+/g, "");
}

function hashToColor(str){
    const channel = String(str || "Unknown");
    if(colorMap.has(channel)) return colorMap.get(channel);

    const override = channelColorOverrides.get(normalizeChannelName(channel));
    const c = override || palette[Math.floor(hashToUnit(channel) * palette.length) % palette.length];
    colorMap.set(channel,c);
    return c;
}

function labelFor(key, fallback){
    return mapTranslations[key] || fallback;
}

function buildNodePopup(node){
    const labels = {
        channel: labelFor("channel_label", "Channel"),
        nodeId: labelFor("node_id", "Node ID"),
        model: labelFor("model_label", "Model"),
        role: labelFor("role_label", "Role"),
        mqtt: labelFor("mqtt_gateway", "MQTT Gateway"),
        lastSeen: labelFor("last_seen", "Last Seen"),
        firmware: labelFor("firmware", "Firmware"),
        yes: mapTranslations.yes || "Yes",
        no: mapTranslations.no || "No"
    };
    const displayName = node.long_name || node.short_name || `Node ${node.node_id}`;
    const shortName = node.short_name ? ` (${escapeHtml(node.short_name)})` : "";

    return `
        <b><a href="/node/${node.node_id}">${escapeHtml(displayName)}</a>${shortName}</b><br>

        <b>${labels.nodeId}</b> ${node.node_id}<br>
        <b>${labels.channel}</b> ${escapeHtml(node.channel || "N/A")}<br>
        <b>${labels.model}</b> ${escapeHtml(node.hw_model || "N/A")}<br>
        <b>${labels.role}</b> ${escapeHtml(node.role || "N/A")}<br>
        <b>${labels.mqtt}</b> ${node.is_mqtt_gateway ? labels.yes : labels.no}<br>

        ${
            node.last_seen_us
                ? `<b>${labels.lastSeen}</b> ${timeAgoFromUs(node.last_seen_us)}<br>`
                : ""
        }

        ${
            node.firmware
                ? `<b>${labels.firmware}</b> ${escapeHtml(node.firmware)}<br>`
                : ""
        }
    `;
}

function hashToUnit(str){
    let h = 2166136261;
    for(let i=0;i<str.length;i++){
        h ^= str.charCodeAt(i);
        h = Math.imul(h, 16777619);
    }
    return (h >>> 0) / 0xffffffff;
}

function jitterLatLng(lat, lon, key){
    const meters = 15; // small, visually separates overlaps
    const angle = hashToUnit(String(key)) * Math.PI * 2;
    const r = meters * (0.3 + 0.7 * hashToUnit(`r:${key}`));
    const dLat = (r * Math.cos(angle)) / 111320;
    const dLon = (r * Math.sin(angle)) / (111320 * Math.cos(lat * Math.PI / 180));
    return [lat + dLat, lon + dLon];
}

function isInvalidCoord(n){
    return !n || !n.lat || !n.long || n.lat === 0 || n.long === 0 ||
           Number.isNaN(n.lat) || Number.isNaN(n.long);
}

function getNodeLatLng(n){
    const marker = markerById[n.key];
    if(marker){
        return marker.getLatLng();
    }
    return { lat: n.lat, lng: n.long };
}

/* ======================================================
   SHARED PACKET FETCHING: MAP ANIMATIONS AND TRAFFIC FEED
   ====================================================== */

let mapPacketFetchBusy = false;
function publishMapTrafficStatus(state) {
    document.dispatchEvent(new CustomEvent("mesh:traffic-status", { detail: state }));
}
function publishMapPackets(packets) {
    document.dispatchEvent(new CustomEvent("mesh:packets", { detail: packets }));
}
async function fetchLatestPacket(){
    if(mapPacketFetchBusy) return;
    mapPacketFetchBusy = true;
    try {
        const res = await fetch('/api/packets?limit=30');
        if(!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if(!Array.isArray(data.packets)) throw new Error("Invalid packet response");
        lastImportTime = Math.max(lastImportTime || 0, ...data.packets.map(p => Number(p.import_time_us) || 0));
        publishMapPackets(data.packets);
        publishMapTrafficStatus("ready");
    } catch(error) {
        console.error("Map traffic:", error);
        publishMapTrafficStatus("error");
    } finally { mapPacketFetchBusy = false; }
}
async function fetchNewPackets(){
    if(mapInterval <= 0 || mapPacketFetchBusy) return;
    if(lastImportTime === null) return fetchLatestPacket();
    mapPacketFetchBusy = true;
    try {
        const url = new URL('/api/packets', window.location.origin);
        url.searchParams.set("since", lastImportTime);
        url.searchParams.set("limit", 50);
        const res = await fetch(url);
        if(!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if(!Array.isArray(data.packets)) throw new Error("Invalid packet response");
        data.packets.forEach(pkt => {
            lastImportTime = Math.max(lastImportTime || 0, Number(pkt.import_time_us) || 0);
            const marker = markerById[pkt.from_node_id];
            const nodeData = nodeMap.get(pkt.from_node_id);
            if(marker && nodeData) blinkNode(marker, nodeData.long_name, pkt.portnum, pkt.payload);
            else addUnmappedPacket(pkt, nodeData);
            schedulePacketSeenNodes(pkt);
        });
        publishMapPackets(data.packets);
        publishMapTrafficStatus("ready");
    } catch(error) {
        console.error("Map traffic:", error);
        publishMapTrafficStatus("error");
    } finally { mapPacketFetchBusy = false; }
}

let packetInterval=null;

function startPacketFetcher(){
    if(mapInterval<=0) return;
    if(!packetInterval){
        if(lastImportTime === null) fetchLatestPacket();
        else fetchNewPackets();
        packetInterval=setInterval(fetchNewPackets,mapInterval*1000);
    }
}

function stopPacketFetcher(){
    if(packetInterval){
        clearInterval(packetInterval);
        packetInterval=null;
    }
}

document.addEventListener("visibilitychange",()=>{
    document.hidden?stopPacketFetcher():startPacketFetcher();
});

map.on("overlayadd", e => {
    if(e.layer === nodeLayer) updateNodeVisibility();
    if(e.layer === trafficHeatLayer) loadTrafficHeat();
});

map.on("overlayremove", e => {
    if(e.layer === nodeLayer) clearActiveBlinks();
    if(e.layer === packetSeenLayer) clearPacketSeenHighlights();
});

async function waitForConfig() {
    while (typeof window._siteConfigPromise === "undefined") {
        await new Promise(r => setTimeout(r, 100));
    }
    try {
        const cfg = await window._siteConfigPromise;
        for(const [channel, color] of Object.entries(cfg.site?.map_channel_colors || {})){
            channelColorOverrides.set(normalizeChannelName(channel), color);
        }
        return cfg.site || {};
    } catch (err) {
        console.error("Error loading site config:", err);
        return {};
    }
}

async function initMapPolling() {
    try {
        const site = await waitForConfig();
        mapInterval = parseInt(site.map_interval, 10) || 0;

        const params = new URLSearchParams(window.location.search);
        const lat  = parseFloat(params.get('lat'));
        const lng  = parseFloat(params.get('lng'));
        const zoom = parseInt(params.get('zoom'), 10);

        if (!isNaN(lat) && !isNaN(lng) && !isNaN(zoom)) {
            map.setView([lat, lng], zoom);
            window.configBoundsApplied = true;
            setTimeout(() => map.invalidateSize(), 100);
        }
        else {
            const tl = [parseFloat(site.map_top_left_lat), parseFloat(site.map_top_left_lon)];
            const br = [parseFloat(site.map_bottom_right_lat), parseFloat(site.map_bottom_right_lon)];

            if (tl.every(isFinite) && br.every(isFinite)) {
                map.fitBounds([tl, br]);
                window.configBoundsApplied = true;
                setTimeout(() => map.invalidateSize(), 100);
            }
        }

        if (mapInterval > 0) startPacketFetcher();
        else if (document.getElementById("map-traffic-list")) fetchLatestPacket();

    } catch (err) {
        console.error("Failed to load /api/config:", err);
    }
}

initMapPolling();

/* ======================================================
   LOAD NODES
   ====================================================== */

fetch('/api/nodes?days_active=3')
    .then(r=>r.json())
    .then(async data=>{
        await waitForConfig();
        if(!Array.isArray(data.nodes)) throw new Error("Invalid node response");

        nodes = data.nodes.map(n=>({
            key: n.node_id ?? n.id,
            id: n.id,
            node_id: n.node_id,
            lat: n.last_lat ? n.last_lat/1e7 : null,
            long: n.last_long ? n.last_long/1e7 : null,
            long_name: n.long_name || "",
            short_name: n.short_name || "",
            channel: n.channel || "",
            hw_model: n.hw_model || "",
            role: n.role || "",
            firmware: n.firmware || "",
            last_seen_us: n.last_seen_us || null,
            is_mqtt_gateway: n.is_mqtt_gateway === true,
            isRouter: (n.role||"").toLowerCase().includes("router")
        }));

        nodes.forEach(n=>{
            nodeMap.set(n.key, n);
            if(n.channel) channelSet.add(n.channel);
        });

        renderNodesOnMap();
        createChannelFilters();
        if (typeof initializeNodeExplorer === "function") initializeNodeExplorer();
        if(map.hasLayer(trafficHeatLayer)){
            loadTrafficHeat();
        }
    })
    .catch(error => {
        console.error(error);
        const status = document.getElementById("mesh-node-list") || document.getElementById("map-load-status");
        status.textContent = "Unable to load nodes. Reload to try again.";
    });

/* ======================================================
   RENDER NODES
   ====================================================== */

function renderNodesOnMap(){
    nodes.forEach(node=>{
        if(isInvalidCoord(node)) return;

        const color = hashToColor(node.channel);

        const [jLat, jLon] = jitterLatLng(node.lat, node.long, node.key);
        const marker = L.circleMarker([jLat,jLon], {
            radius: node.isRouter ? 9 : 7,
            color: "white",
            fillColor: color,
            fillOpacity: 1,
            weight: 0.7
        }).addTo(nodeLayer);

        marker.nodeId = node.key;
        marker.originalColor = color;
        markerById[node.key] = marker;
        marker.bindPopup(buildNodePopup(node), {
            autoPan: true,
            closeButton: true
        });

        marker.on('click', e => {
            if(e.originalEvent){
                L.DomEvent.stopPropagation(e.originalEvent);
            }
            marker.setPopupContent(buildNodePopup(node));
            marker.openPopup();
            onNodeClick(node);
        });
    });

    setTimeout(() => applyTranslationsMap(), 50);
}

/* ======================================================
   TRAFFIC HEAT LAYER
   ====================================================== */

async function loadTrafficHeat(){
    if(trafficHeatLoaded || trafficHeatLoading) return;
    if(nodeMap.size === 0) return;

    trafficHeatLoading = true;

    try {
        const url = new URL("/api/packets", window.location.origin);
        url.searchParams.set("limit", 1000);

        const res = await fetch(url);
        if(!res.ok) return;

        const data = await res.json();
        const counts = new Map();

        (data.packets || []).forEach(pkt => {
            const nodeId = pkt.from_node_id;
            if(nodeId == null) return;
            counts.set(nodeId, (counts.get(nodeId) || 0) + 1);
        });

        const maxCount = Math.max(...counts.values(), 0);
        const heatPoints = [];

        counts.forEach((count, nodeId) => {
            const node = nodeMap.get(nodeId);
            if(!node || isInvalidCoord(node)) return;

            const markerLatLng = markerById[nodeId]?.getLatLng();
            const lat = markerLatLng?.lat ?? node.lat;
            const lng = markerLatLng?.lng ?? node.long;
            const intensity = maxCount > 0 ? count / maxCount : 0;

            heatPoints.push([lat, lng, Math.max(0.15, intensity)]);
        });

        trafficHeatLayer.setLatLngs(heatPoints);
        trafficHeatLoaded = true;
    } catch(err) {
        console.error("Failed to load traffic heat layer:", err);
    } finally {
        trafficHeatLoading = false;
    }
}

/* ======================================================
   UNMAPPED PACKETS LIST
   ====================================================== */

function addUnmappedPacket(pkt, nodeData){
    if(nodeData && !isInvalidCoord(nodeData)) return;

    const now = Date.now();
    const entry = {
        id: pkt.id,
        key: `${pkt.id ?? "x"}-${pkt.import_time_us ?? now}-${Math.random().toString(16).slice(2)}`,
        import_time_us: pkt.import_time_us || 0,
        from_node_id: pkt.from_node_id,
        long_name: pkt.long_name || (nodeData?.long_name || ""),
        portnum: pkt.portnum,
        payload: (pkt.payload || "").trim(),
        expires_at: now + UNMAPPED_TTL_MS
    };

    unmappedPackets.unshift(entry);
    pruneUnmappedPackets(now);
    if(unmappedPackets.length > UNMAPPED_LIMIT){
        unmappedPackets = unmappedPackets.slice(0, UNMAPPED_LIMIT);
    }
    renderUnmappedPackets();

    setTimeout(() => {
        pruneUnmappedPackets(Date.now());
        renderUnmappedPackets();
    }, UNMAPPED_TTL_MS + 50);
}

function pruneUnmappedPackets(now){
    unmappedPackets = unmappedPackets.filter(p => p.expires_at > now);
}

function renderUnmappedPackets(){
    pruneUnmappedPackets(Date.now());
    const list = document.getElementById("unmapped-list");
    if (!list) return;
    list.innerHTML = "";

    if(unmappedPackets.length === 0){
        const empty = document.createElement("li");
        empty.className = "unmapped-empty";
        empty.dataset.translateLang = "unmapped_packets_empty";
        empty.textContent = "No recent unmapped packets.";
        list.appendChild(empty);
        return;
    }

    unmappedPackets.forEach(p=>{
        const li = document.createElement("li");

        const node = document.createElement("span");
        node.className = "unmapped-node";
        const type = portMap[p.portnum] || `Port ${p.portnum ?? "?"}`;
        const name = p.long_name || `Node ${p.from_node_id ?? "?"}`;
        node.textContent = `${name} (${type})`;

        li.appendChild(node);
        list.appendChild(li);
    });
}

/* ======================================================
   ⭐ NEW: DYNAMIC EDGE LOADING
   ====================================================== */

async function onNodeClick(node){
    if (typeof openMapNodeInspector === "function") openMapNodeInspector(node);
    selectedNodeId = node.key;
    edgeLayer.clearLayers();

    try {
        const res = await fetch(`/api/edges?node_id=${node.key}`);
        const data = await res.json();
        if (selectedNodeId !== node.key) return;
        const edges = data.edges || [];

        edges.forEach(edge=>{
            const f = nodeMap.get(edge.from);
            const t = nodeMap.get(edge.to);

            if(!f || !t || isInvalidCoord(f) || isInvalidCoord(t)) return;

            const color = edge.type === "neighbor" ? "gray" : "orange";
            const fLatLng = getNodeLatLng(f);
            const tLatLng = getNodeLatLng(t);
            const line  = L.polyline([[fLatLng.lat, fLatLng.lng], [tLatLng.lat, tLatLng.lng]], {
                color, weight: 3
            }).addTo(edgeLayer);

            if(edge.type === "traceroute"){
                L.polylineDecorator(line, {
                    patterns: [
                        {
                            offset: '100%',
                            repeat: 0,
                            symbol: L.Symbol.arrowHead({
                                pixelSize:5,
                                polygon:false,
                                pathOptions:{stroke:true,color}
                            })
                        }
                    ]
                }).addTo(edgeLayer);
            }
        });

    } catch(err){
        console.error("Failed to load edges for node", node.key, err);
    }
}

map.on('click', e=>{
    if(e.originalEvent.defaultPrevented) return;

    if(!e.originalEvent.target.classList.contains('leaflet-interactive')){
        edgeLayer.clearLayers();
        selectedNodeId=null;
    }
});

/* ======================================================
   BLINKING
   ====================================================== */

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

function isTextPort(portnum){
    return portnum === 1 || portnum === 7;
}

function isNodeVisibleForPackets(marker){
    return map.hasLayer(nodeLayer) && nodeLayer.hasLayer(marker);
}

function clearBlinkForMarker(marker){
    if(activeBlinks.has(marker)){
        const blink = activeBlinks.get(marker);
        clearInterval(blink.interval);
        if(blink.tooltipTimeout) clearTimeout(blink.tooltipTimeout);
        activeBlinks.delete(marker);
    }
    marker.setStyle({ fillColor: marker.originalColor });
    if(marker.tooltip){
        map.removeLayer(marker.tooltip);
        marker.tooltip = null;
    }
}

function clearActiveBlinks(){
    activeBlinks.forEach((interval, marker) => clearBlinkForMarker(marker));
    activeBlinks.clear();
}

function clearPacketSeenHighlights(){
    activePacketSeenHighlights.forEach(timeout => clearTimeout(timeout));
    activePacketSeenHighlights = [];
    packetSeenLayer.clearLayers();
}

function schedulePacketSeenNodes(pkt){
    if(!map.hasLayer(packetSeenLayer) || pkt.id == null) return;

    const sourceNode = nodeMap.get(pkt.from_node_id);
    if(!sourceNode || isInvalidCoord(sourceNode)) return;

    const timeout = setTimeout(() => showPacketSeenNodes(pkt), PACKET_SEEN_DELAY_MS);
    activePacketSeenHighlights.push(timeout);
}

async function showPacketSeenNodes(pkt){
    if(!map.hasLayer(packetSeenLayer) || pkt.id == null) return;

    try {
        const res = await fetch(`/api/packets_seen/${pkt.id}`);
        if(!res.ok) return;

        const data = await res.json();
        const seen = data.seen || [];
        const sourceId = pkt.from_node_id;
        const sourceNode = nodeMap.get(sourceId);
        const sourceLatLng = sourceNode && !isInvalidCoord(sourceNode)
            ? getNodeLatLng(sourceNode)
            : null;

        seen.forEach(row => {
            const node = nodeMap.get(row.node_id);
            if(!node || isInvalidCoord(node)) return;

            const isSource = row.node_id === sourceId;
            if(!sourceLatLng || isSource) return;

            const markerLatLng = markerById[row.node_id]?.getLatLng();
            const lat = markerLatLng?.lat ?? node.lat;
            const lng = markerLatLng?.lng ?? node.long;
            const trace = L.polyline([[sourceLatLng.lat, sourceLatLng.lng], [lat, lng]], {
                color: "#000",
                weight: 3,
                opacity: 0.9,
                className: "packet-seen-trace",
                interactive: false
            }).addTo(packetSeenLayer);
            const traceEl = trace.getElement();
            let traceDurationMs = PACKET_TRACE_MAX_DURATION_MS;
            if(traceEl){
                const traceLength = traceEl.getTotalLength();
                traceDurationMs = Math.min(
                    PACKET_TRACE_MAX_DURATION_MS,
                    Math.max(PACKET_TRACE_MIN_DURATION_MS, traceLength * PACKET_TRACE_MS_PER_PIXEL)
                );
                traceEl.style.setProperty("--packet-trace-gap", `${traceLength + 20}px`);
                traceEl.style.setProperty("--packet-trace-distance", `${traceLength + 20}px`);
                traceEl.style.setProperty("--packet-trace-duration", `${traceDurationMs}ms`);
            }

            const landingTimeout = setTimeout(() => {
                const landing = L.circleMarker([lat, lng], {
                    radius: 16,
                    color: "#000",
                    fillColor: "#000",
                    fillOpacity: 0.24,
                    opacity: 0.7,
                    weight: 2,
                    className: "packet-seen-landing",
                    interactive: false
                }).addTo(packetSeenLayer);

                const clearLandingTimeout = setTimeout(() => {
                    packetSeenLayer.removeLayer(landing);
                }, PACKET_LANDING_DURATION_MS);
                activePacketSeenHighlights.push(clearLandingTimeout);
            }, traceDurationMs);
            activePacketSeenHighlights.push(landingTimeout);

            const timeout = setTimeout(() => {
                packetSeenLayer.removeLayer(trace);
            }, traceDurationMs + PACKET_LANDING_DURATION_MS);
            activePacketSeenHighlights.push(timeout);
        });
    } catch(err) {
        console.error("Failed to load packet seen nodes", pkt.id, err);
    }
}

function blinkNode(marker,longName,portnum,payload){
    if(!isNodeVisibleForPackets(marker)) return;

    if(activeBlinks.has(marker)){
        clearBlinkForMarker(marker);
    }

    const blinkStart = Date.now();
    const tooltipDurationMs = 5000;
    const blinkDurationMs = map.hasLayer(packetSeenLayer) ? 15000 : tooltipDurationMs;
    const fastBlinkStartMs = blinkDurationMs - 3000;
    const blinkColor = "yellow";
    const safeName = escapeHtml(longName);
    const portLabel = portMap[portnum] || `Port ${portnum ?? "?"}`;
    const payloadText = (payload || "").trim();
    const showPayload = isTextPort(portnum) && payloadText && payloadText !== "Did not decode";
    const shortPayload = showPayload && payloadText.length > 80
        ? `${payloadText.slice(0, 77)}...`
        : payloadText;
    const payloadLine = showPayload ? `<br><span>${escapeHtml(shortPayload)}</span>` : "";

    const tooltip = L.tooltip({
        permanent:true,
        direction:'top',
        offset:[0,-marker.options.radius-5],
        className: isTextPort(portnum) ? 'blinking-tooltip text-packet' : 'blinking-tooltip'
    })
    .setContent(`${safeName} (${escapeHtml(portLabel)})${payloadLine}`)
    .setLatLng(marker.getLatLng())
    .addTo(map);

    marker.tooltip = tooltip;
    const tooltipTimeout = setTimeout(() => {
        if(blinkDurationMs === tooltipDurationMs){
            clearBlinkForMarker(marker);
            return;
        }
        if(marker.tooltip){
            map.removeLayer(marker.tooltip);
            marker.tooltip = null;
        }
    }, tooltipDurationMs);

    const interval = setInterval(()=>{
        const elapsedMs = Date.now() - blinkStart;
        const blinkPeriodMs = elapsedMs >= fastBlinkStartMs ? 250 : 500;
        if(isNodeVisibleForPackets(marker)){
            marker.setStyle({
                fillColor: Math.floor(elapsedMs / blinkPeriodMs)%2===0
                    ? blinkColor
                    : marker.originalColor
            });
            marker.bringToFront();
        } else {
            clearBlinkForMarker(marker);
            return;
        }

        if(elapsedMs > blinkDurationMs){
            clearBlinkForMarker(marker);
        }

    },250);

    activeBlinks.set(marker, { interval, tooltipTimeout });
}

/* ======================================================
   CHANNEL FILTERS
   ====================================================== */

function createChannelFilters(){
    const filterContainer = document.getElementById("filter-container");
    const saved = JSON.parse(localStorage.getItem("mapFilters") || "{}");

    [...channelSet].sort((a, b) => a.localeCompare(b)).forEach(channel=>{
        const cb=document.createElement("input");
        cb.type="checkbox";
        cb.className="filter-checkbox";
        cb.id=`filter-channel-${channel}`;
        cb.checked = saved[channel] !== false;

        cb.addEventListener("change", saveFiltersToLocalStorage);
        cb.addEventListener("change", updateNodeVisibility);

        filterContainer.appendChild(cb);

        const label=document.createElement("label");
        label.htmlFor=cb.id;
        label.innerText=channel;
        label.style.color = hashToColor(channel);
        filterContainer.appendChild(label);
    });

    const routerOnly=document.getElementById("filter-routers-only");
    const mqttOnly=document.getElementById("filter-mqtt-only");
    routerOnly.checked = saved["routersOnly"] || false;
    mqttOnly.checked = saved["mqttOnly"] || false;

    routerOnly.addEventListener("change", saveFiltersToLocalStorage);
    routerOnly.addEventListener("change", updateNodeVisibility);
    mqttOnly.addEventListener("change", saveFiltersToLocalStorage);
    mqttOnly.addEventListener("change", updateNodeVisibility);

    updateNodeVisibility();
}

function saveFiltersToLocalStorage(){
    const state = {};
    channelSet.forEach(ch=>{
        state[ch] = document.getElementById(`filter-channel-${ch}`).checked;
    });
    state["routersOnly"] = document.getElementById("filter-routers-only").checked;
    state["mqttOnly"] = document.getElementById("filter-mqtt-only").checked;

    localStorage.setItem("mapFilters", JSON.stringify(state));
}

function updateNodeVisibility(){
    if(!map.hasLayer(nodeLayer)) return;

    const routerOnly = document.getElementById("filter-routers-only").checked;
    const mqttOnly = document.getElementById("filter-mqtt-only").checked;
    const activeChannels = [...channelSet].filter(ch =>
        document.getElementById(`filter-channel-${ch}`).checked
    );

    nodes.forEach(n=>{
        const marker = markerById[n.key];
        if(marker){
            const visible =
                (!routerOnly || n.isRouter) &&
                (!mqttOnly || n.is_mqtt_gateway) &&
                activeChannels.includes(n.channel);

            if(visible){
                nodeLayer.addLayer(marker);
            } else {
                clearBlinkForMarker(marker);
                nodeLayer.removeLayer(marker);
            }
        }
    });
}

/* ======================================================
   SHARE / RESET
   ====================================================== */

function shareCurrentView() {
    const c = map.getCenter();
    const url = `${window.location.origin}/map?lat=${c.lat.toFixed(6)}&lng=${c.lng.toFixed(6)}&zoom=${map.getZoom()}`;

    navigator.clipboard.writeText(url).then(()=>{
        const btn = document.getElementById('share-button');
        const old = btn.textContent;
        btn.textContent = '✓ ' + (mapTranslations.link_copied || 'Link Copied!');
        btn.style.backgroundColor = 'var(--mesh-primary-dark)';

        setTimeout(()=>{
            btn.textContent = old;
            btn.style.backgroundColor = 'var(--mesh-primary)';
        }, 2000);
    });
}

function resetFiltersToDefaults(){
    document.getElementById("filter-routers-only").checked = false;
    document.getElementById("filter-mqtt-only").checked = false;
    channelSet.forEach(ch => {
        document.getElementById(`filter-channel-${ch}`).checked = true;
    });
    saveFiltersToLocalStorage();
    updateNodeVisibility();
}

/* ======================================================
   TRANSLATION LOAD
   ====================================================== */

document.addEventListener("DOMContentLoaded", () => {
    loadTranslationsMap();
});
</script>

{% if dashboard %}
<script src="/static/map-dashboard.js"></script>
<script src="/static/map-inspector.js"></script>
{% else %}
<script>
document.getElementById('fit-network').addEventListener('click', () => {
    const points = Object.values(markerById).filter(marker => nodeLayer.hasLayer(marker)).map(marker => marker.getLatLng());
    if (points.length) map.fitBounds(L.latLngBounds(points), {padding:[35,35], maxZoom:13});
});
</script>
{% endif %}
{% endblock %}