{% extends "base.html" %}

{% block title %}Events - Central{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
{% endblock %}

{% block content %}
{# 12-slot legend/marker palette. Adapters map to colors by their sorted index
   (loop.index0 % palette length) — no per-adapter color is hardcoded. #}
{% set palette = [
    "#f59e0b", "#dc2626", "#7c3aed", "#2563eb", "#059669", "#db2777",
    "#0891b2", "#65a30d", "#ea580c", "#4f46e5", "#9333ea", "#0d9488"
] %}
<h1>{{ "Telemetry" if base_path == "/telemetry" else "Events" }}</h1>

{% if filter_error %}
<div class="flash flash-error" role="alert"><strong>Filter Error:</strong> {{ filter_error }}</div>
{% endif %}

{% from "_chip_picker.html" import chip_picker %}
<form id="filter-form" class="filter-form" action="{{ base_path }}" method="get"
      hx-get="{{ base_path }}/rows" hx-target="#events-rows" hx-push-url="true">

    {# Full-width search (server-side ILIKE over subject + location). #}
    <input type="search" id="filter-q" name="q" class="filter-search"
           placeholder="Search subject or location…" autocomplete="off"
           value="{{ filter_state.q }}">

    {# Chip-picker row: adapter (grouped, swatches), category, event type,
       severity, plus the time-preset dropdown. #}
    <div class="filter-row">
        {{ chip_picker("adapter", "Adapters", adapters_grouped, filter_state.adapters,
                       grouped=True, searchable=True, with_swatch=True) }}
        {{ chip_picker("category", "Categories", all_categories, filter_state.categories,
                       searchable=True) }}
        {{ chip_picker("event_type", "Event Types", all_event_types, filter_state.event_types) }}
        {{ chip_picker("severity", "Severity", severity_order, filter_state.severities) }}

        {# Time preset dropdown (bespoke; not a chip-picker). #}
        <div class="chip-picker time-picker" data-field="time">
            <button type="button" class="chip-picker-toggle" aria-expanded="false"
                    data-toggle="time" id="time-toggle">Time</button>
            <input type="hidden" name="time" id="filter-time" value="{{ filter_state.time_token }}">
            <div class="chip-picker-panel" data-panel="time" hidden>
                {% for token, label in time_presets %}
                <button type="button" class="time-preset" data-time-value="{{ token }}">{{ label }}</button>
                {% endfor %}
                <div class="time-custom">
                    <label>From <input type="datetime-local" id="time-from"></label>
                    <label>To <input type="datetime-local" id="time-to"></label>
                    <button type="button" class="time-custom-apply" data-time-custom>Apply range</button>
                </div>
            </div>
        </div>
    </div>

    {# Hidden region inputs (managed by map viewport) + limit. #}
    <input type="hidden" id="region_north" name="region_north" value="{{ filter_state.region_north }}">
    <input type="hidden" id="region_south" name="region_south" value="{{ filter_state.region_south }}">
    <input type="hidden" id="region_east" name="region_east" value="{{ filter_state.region_east }}">
    <input type="hidden" id="region_west" name="region_west" value="{{ filter_state.region_west }}">
    <input type="hidden" name="limit" id="filter-limit" value="{{ filter_state.limit }}">
    {# Map-filter toggle state. Disabled (omitted from the URL) when off; the
       map-controls checkbox below syncs + enables it. #}
    <input type="hidden" name="map_filter" id="filter-map_filter" value="1"
           {{ '' if filter_state.map_filter else 'disabled' }}>
    {# Tombstone visibility: enabled only when "Show removed" is on, so it's
       omitted from the URL by default (GUI default-hides *.removed events). #}
    <input type="hidden" name="show_removed" id="filter-show_removed" value="1"
           {{ '' if filter_state.show_removed else 'disabled' }}>

    <div class="filter-actions">
        <label class="show-removed-toggle">
            <input type="checkbox" id="show-removed-toggle" {{ 'checked' if filter_state.show_removed else '' }}>
            Show removed
        </label>
        <a href="{{ base_path }}" role="button" class="btn-outline" id="filter-clear-all">Clear all</a>
        <button type="submit" class="filter-apply">Apply</button>
    </div>
</form>

{# Active filter pills — server-rendered; updated out-of-band on each swap. #}
<div id="active-pills">{% include "_active_pills.html" %}</div>

<div class="map-container">
    <div id="events-map"></div>
    {# Map toolbar overlays the map (top-right). JS binds #fit-to-results +
       #map-filter-toggle; the label carries .on styling when the box is checked. #}
    <div class="map-toolbar">
        <button type="button" id="fit-to-results" class="tb">Fit to results</button>
        <label class="map-filter-toggle tb">
            <input type="checkbox" id="map-filter-toggle" {{ 'checked' if filter_state.map_filter else '' }}>
            Filter table by map view
        </label>
        <label class="map-filter-toggle tb" title="Pair WFIGS perimeters with nearby FIRMS hotspots into a single fire; lone hotspots show amber as possible new fires.">
            <input type="checkbox" id="fuse-fire-toggle" checked>
            Fuse fire layers
        </label>
    </div>
</div>

{# Adapter legend: collapsed by default; expands to domain-grouped chips
   (same grouping as the v0.7.1 chip-picker). Clicking a chip toggles that
   adapter's filter (reuses the chip-picker's hidden CSV via syncField). #}
<div class="map-legend">
    <button type="button" id="legend-toggle"
            aria-expanded="false">{{ adapters | length }} adapters · Show legend ▾</button>
    <div id="legend-body" class="legend-body" hidden>
        {% for group_label, items in adapters_grouped %}
        <div class="legend-group">
            <div class="legend-group-header">{{ group_label }}</div>
            {% for opt in items %}
            <button type="button" class="legend-chip" data-adapter="{{ opt.value }}" title="{{ opt.label }}">
                <span class="legend-chip-swatch" style="background:{{ opt.color }}"></span>
                <span class="legend-chip-label">{{ opt.label }}</span>
            </button>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</div>

<div id="events-rows">
    {% include "_events_rows.html" %}
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script>
(function() {
    var tileUrl = {{ tile_url | tojson }};
    var tileAttr = {{ tile_attribution | tojson }};

    // Adapter color mapping — built from the registry-derived adapter list and
    // the same palette the legend uses, keyed by sorted index. No adapter name
    // or color is hardcoded here.
    var PALETTE = {{ palette | tojson }};
    var ADAPTER_COLORS = {
        {% for a in adapters %}{{ a.name | tojson }}: PALETTE[{{ loop.index0 }} % PALETTE.length]{{ "," if not loop.last }}
        {% endfor %}
    };

    function getAdapterColor(adapter) {
        return ADAPTER_COLORS[adapter] || "#3388ff";
    }

    // tomtom_flow segments color by severity (relative_speed band): green=free
    // flowing, red=jammed. Mirrors the green/yellow/red flow overlay.
    var FLOW_COLOR = { "1": "#2ecc71", "2": "#f1c40f", "3": "#e67e22", "4": "#e74c3c" };
    function flowColor(sev) { return FLOW_COLOR[sev] || "#7f8c8d"; }

    // Flatten arbitrarily-nested GeoJSON coordinates into a flat [lng, lat] list.
    function flattenCoords(coords, out) {
        if (coords.length && typeof coords[0] === "number") {
            out.push(coords);
            return;
        }
        for (var i = 0; i < coords.length; i++) {
            flattenCoords(coords[i], out);
        }
    }

    // A geometry whose vertices all collapse to a single point (zero extent in
    // both dimensions). Enrichment stores some point-like sources as degenerate
    // polygons; Leaflet would draw these invisibly, so we plot a marker instead.
    function isDegenerate(geom) {
        if (!geom || !geom.coordinates) return false;
        var pts = [];
        flattenCoords(geom.coordinates, pts);
        if (pts.length === 0) return false;
        var minX = pts[0][0], maxX = pts[0][0], minY = pts[0][1], maxY = pts[0][1];
        for (var i = 1; i < pts.length; i++) {
            if (pts[i][0] < minX) minX = pts[i][0];
            if (pts[i][0] > maxX) maxX = pts[i][0];
            if (pts[i][1] < minY) minY = pts[i][1];
            if (pts[i][1] > maxY) maxY = pts[i][1];
        }
        return (maxX - minX) < 1e-9 && (maxY - minY) < 1e-9;
    }

    // Mean of all vertices, returned as Leaflet [lat, lng].
    function centroidLatLng(geom) {
        var pts = [];
        flattenCoords(geom.coordinates, pts);
        var sx = 0, sy = 0;
        for (var i = 0; i < pts.length; i++) { sx += pts[i][0]; sy += pts[i][1]; }
        return [sy / pts.length, sx / pts.length];
    }

    // Initialize map
    var map = L.map("events-map").setView([39, -98], 4);

    L.tileLayer(tileUrl, {
        attribution: tileAttr,
        maxZoom: 18
    }).addTo(map);

    // Point markers cluster (v0.7.2); polygons/lines go in a separate
    // un-clustered group (markercluster only supports point markers).
    var markerCluster = L.markerClusterGroup({
        disableClusteringAtZoom: 9,
        showCoverageOnHover: false,
        spiderfyOnMaxZoom: true
    }).addTo(map);
    var polyGroup = L.featureGroup().addTo(map);
    var fireFusedGroup = L.featureGroup().addTo(map);  // v0.9.14 fused fire view
    var highlightedRow = null;
    var highlightedLayer = null;
    var isInitialLoad = true;
    var programmaticMove = false;

    // event_type is the first dotted segment of category (disaster/fire/hydro/
    // quake/space/wx). Shape encodes it; severity encodes opacity.
    var EVENT_TYPE_SHAPE = {
        quake: "evt-circle", hydro: "evt-circle", space: "evt-circle",
        fire: "evt-square", wx: "evt-triangle", disaster: "evt-star"
    };
    var SEVERITY_OPACITY = { "4": 1.0, "3": 0.85, "2": 0.7, "1": 0.5, "0": 0.4 };
    function eventTypeOf(row) { return (row.dataset.category || "").split(".")[0]; }
    function shapeClass(row) { return EVENT_TYPE_SHAPE[eventTypeOf(row)] || "evt-circle"; }
    function severityOpacity(row) {
        var s = row.dataset.severity;
        return (s !== undefined && s !== "" && SEVERITY_OPACITY[s] !== undefined)
            ? SEVERITY_OPACITY[s] : 0.4;  // null / 0 / missing -> unknown
    }
    function makeDivIcon(row, color) {
        var op = severityOpacity(row);
        return L.divIcon({
            className: "",  // suppress Leaflet's default icon styling
            html: '<div class="evt-marker ' + shapeClass(row) +
                  '" style="background:' + color + ';opacity:' + op + '"></div>',
            iconSize: [15, 15], iconAnchor: [8, 8]
        });
    }

    // Region input elements
    var northInput = document.getElementById("region_north");
    var southInput = document.getElementById("region_south");
    var eastInput = document.getElementById("region_east");
    var westInput = document.getElementById("region_west");
    var mapFilterHidden = document.getElementById("filter-map_filter");
    var mapFilterToggle = document.getElementById("map-filter-toggle");
    function mapFilterOn() { return mapFilterToggle && mapFilterToggle.checked; }

    // Viewport-driven filter with debounce
    var viewportDebounceTimer = null;

    map.on("moveend", function() {
        if (programmaticMove) {
            programmaticMove = false;
            return;
        }
        // Only drive the table from the viewport when the toggle is ON.
        if (!mapFilterOn()) return;
        if (viewportDebounceTimer) clearTimeout(viewportDebounceTimer);
        viewportDebounceTimer = setTimeout(applyViewportFilter, 400);
    });

    // Normalize a longitude into [-180, 180]. Leaflet returns out-of-range
    // values (e.g. east=411, west=-608) when the map is panned past the
    // dateline / wrapped at low zoom; those must not reach the bbox filter.
    function wrapLon(lon) {
        return ((((lon + 180) % 360) + 360) % 360) - 180;
    }

    function applyViewportFilter() {
        var bounds = map.getBounds();
        var rawWest = bounds.getWest();
        var rawEast = bounds.getEast();
        // When the visible map spans more than ~350 deg of longitude (zoomed
        // far out / wrapped), a bbox filter is meaningless — treat as no bbox.
        if (rawEast - rawWest > 350) {
            northInput.value = "";
            southInput.value = "";
            eastInput.value = "";
            westInput.value = "";
        } else {
            northInput.value = Math.min(90, bounds.getNorth()).toFixed(4);
            southInput.value = Math.max(-90, bounds.getSouth()).toFixed(4);
            eastInput.value = wrapLon(rawEast).toFixed(4);
            westInput.value = wrapLon(rawWest).toFixed(4);
        }
        htmx.trigger(document.getElementById("filter-form"), "submit");
    }

    function buildPopup(row) {
        var adapter = row.dataset.adapter || "";
        var category = row.dataset.category || "";
        var time = row.dataset.time ? new Date(row.dataset.time).toLocaleString() : "";
        var subject = row.dataset.subject || "";
        var eventId = row.dataset.eventId || "";

        var html = "<strong>" + adapter + "</strong><br>" +
            category + "<br>" +
            "<small>" + time + "</small>";
        if (subject) {
            html += "<br><em>" + subject + "</em>";
        }
        html += '<br><a href="#" data-show-row="' + eventId + '">View details &#9662;</a>';
        return html;
    }

    // --- Fused fire view (v0.9.14) -----------------------------------------
    // Fire-domain adapters whose rows are replaced by the fused renderer.
    var FIRE_ADAPTERS = { firms: 1, wfigs_perimeters: 1, wfigs_incidents: 1 };
    var fuseFireToggle = document.getElementById("fuse-fire-toggle");
    if (fuseFireToggle) fuseFireToggle.addEventListener("change", rebindEventLayers);
    function fuseFireOn() { return fuseFireToggle && fuseFireToggle.checked; }
    // Colors come from CSS vars so they can be retuned without code.
    function cssVar(name, fallback) {
        var v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
        return v || fallback;
    }
    function fireConfirmedColor() { return cssVar("--fire-confirmed", "#d7261e"); }
    function fireUnconfirmedColor() { return cssVar("--fire-unconfirmed", "#f59e0b"); }

    function fireFusedPopup(fire) {
        var name = fire.incident_name || "(unnamed fire)";
        var n = fire.hotspot_count || 0;
        var html = "<strong>&#128293; " + name + "</strong><br>Confirmed fire (perimeter + " +
            n + " hotspot" + (n === 1 ? "" : "s") + ")";
        if (fire.acres != null) html += "<br>" + Math.round(fire.acres).toLocaleString() + " acres";
        if (fire.cause) html += "<br>Cause: " + fire.cause;
        if (fire.max_frp != null) html += "<br>Max FRP: " + fire.max_frp;
        if (fire.irwin_id) html += "<br><small>" + fire.irwin_id + "</small>";
        return html;
    }
    function unconfirmedPopup(h) {
        var html = "<strong>&#9888; Unconfirmed hotspot</strong><br>Satellite detection, no perimeter yet";
        if (h.satellite) html += "<br>Satellite: " + h.satellite;
        if (h.frp) html += "<br>FRP: " + h.frp;
        if (h.confidence) html += "<br>Confidence: " + h.confidence;
        var t = h.time ? new Date(h.time).toLocaleString() : "";
        if (t) html += "<br><small>" + t + "</small>";
        return html;
    }

    function drawConfirmedFire(fire, color) {
        if (fire.geometry) {
            var poly = L.geoJSON(fire.geometry, { style: { color: color, weight: 2,
                fillColor: color, opacity: 0.9, fillOpacity: 0.25 } });
            poly.bindPopup(fireFusedPopup(fire));
            poly.addTo(fireFusedGroup);
        }
        (fire.hotspots || []).forEach(function(h) {
            if (!h.geometry) return;
            L.geoJSON(h.geometry, { pointToLayer: function(f, ll) {
                return L.circleMarker(ll, { radius: 3, color: color, weight: 1,
                    fillColor: color, fillOpacity: 0.8 }); },
                style: { color: color, weight: 1, fillColor: color, fillOpacity: 0.55 }
            }).addTo(fireFusedGroup);
        });
        // Collapsed glyph at the perimeter centroid; click expands (zoom to bounds).
        var center = centroidLatLng(fire.geometry);
        if (center) {
            var glyph = L.marker(center, { icon: L.divIcon({ className: "",
                html: '<div class="evt-marker evt-square fire-glyph" style="background:' + color + '"></div>',
                iconSize: [17, 17], iconAnchor: [9, 9] }) });
            glyph.bindPopup(fireFusedPopup(fire));
            glyph.on("click", function() {
                try { var b = L.geoJSON(fire.geometry).getBounds();
                    if (b.isValid()) map.fitBounds(b.pad(0.3)); } catch (e) {}
            });
            glyph.addTo(fireFusedGroup);
        }
    }
    function drawUnconfirmedHotspot(h, color) {
        if (!h.geometry) return;
        var layer = L.geoJSON(h.geometry, { pointToLayer: function(f, ll) {
            return L.circleMarker(ll, { radius: 4, color: color, weight: 1,
                fillColor: color, fillOpacity: 0.7 }); },
            style: { color: color, weight: 1, fillColor: color, fillOpacity: 0.5 } });
        layer.bindPopup(unconfirmedPopup(h));
        layer.addTo(fireFusedGroup);
    }
    function renderFusedFires() {
        fireFusedGroup.clearLayers();
        var url = "/events/fire-fused.json";
        if (mapFilterOn()) {
            var b = map.getBounds();
            url += "?north=" + Math.min(90, b.getNorth()).toFixed(4) +
                   "&south=" + Math.max(-90, b.getSouth()).toFixed(4) +
                   "&east=" + wrapLon(b.getEast()).toFixed(4) +
                   "&west=" + wrapLon(b.getWest()).toFixed(4);
        }
        fetch(url, { headers: { "Accept": "application/json" } })
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(data) {
                if (!data) return;
                var cc = fireConfirmedColor(), uc = fireUnconfirmedColor();
                (data.fires || []).forEach(function(fire) { drawConfirmedFire(fire, cc); });
                (data.unconfirmed || []).forEach(function(h) { drawUnconfirmedHotspot(h, uc); });
            })
            .catch(function(e) { console.error("fused fire fetch failed", e); });
    }

    function rebindEventLayers() {
        markerCluster.clearLayers();
        polyGroup.clearLayers();
        var fused = fuseFireOn();
        if (fused) { renderFusedFires(); } else { fireFusedGroup.clearLayers(); }

        var rows = document.querySelectorAll("#events-rows tr.event-row[data-geometry]");

        rows.forEach(function(row) {
            var geomStr = row.dataset.geometry;
            if (!geomStr || geomStr === "") return;
            if (fused && FIRE_ADAPTERS[row.dataset.adapter || ""]) return;

            try {
                var geom = JSON.parse(geomStr);
                if (!geom) return;

                var adapter = row.dataset.adapter || "";
                var color = adapter === "tomtom_flow" ? flowColor(row.dataset.severity) : getAdapterColor(adapter);
                var op = severityOpacity(row);

                // Point-like geometries (Points + zero-extent polygons from
                // enrichment) become divIcon markers (shape=event_type,
                // opacity=severity) and cluster. Real polygons/lines render as
                // geometry in the un-clustered group.
                var layer, isMarker;
                if (isDegenerate(geom)) {
                    layer = L.marker(centroidLatLng(geom), { icon: makeDivIcon(row, color) });
                    isMarker = true;
                    layer.addTo(markerCluster);
                } else {
                    layer = L.geoJSON(geom, {
                        style: { color: color, weight: 2, fillColor: color,
                                 opacity: op, fillOpacity: op * 0.5 },
                        pointToLayer: function(feature, latlng) {
                            return L.marker(latlng, { icon: makeDivIcon(row, color) });
                        }
                    });
                    isMarker = false;
                    layer.addTo(polyGroup);
                }

                layer.bindPopup(buildPopup(row));
                layer.on("click", function() {
                    highlightRow(row, layer, color);
                });

                row._mapLayer = layer;
                row._mapColor = color;
                row._isMarker = isMarker;
            } catch (e) {
                console.error("Error parsing geometry:", e);
            }
        });
    }

    // Toggle the red highlight ring on a divIcon marker's element (may be null
    // when the marker is collapsed inside a cluster).
    function setMarkerHl(layer, on) {
        var el = layer.getElement && layer.getElement();
        var inner = el && el.querySelector(".evt-marker");
        if (inner) inner.classList.toggle("evt-hl", on);
    }

    function highlightRow(row, layer, originalColor) {
        // Reset previous highlight (marker via class, polygon via setStyle).
        if (highlightedRow) {
            highlightedRow.classList.remove("highlighted");
        }
        if (highlightedLayer) {
            if (highlightedLayer._isMarker) {
                setMarkerHl(highlightedLayer, false);
            } else if (highlightedLayer._originalColor) {
                highlightedLayer.setStyle({
                    color: highlightedLayer._originalColor,
                    weight: 2,
                    fillColor: highlightedLayer._originalColor,
                    fillOpacity: 0.25
                });
            }
        }

        // Set new highlight
        row.classList.add("highlighted");
        highlightedRow = row;

        if (layer) {
            layer._isMarker = row._isMarker;
            if (layer._isMarker) {
                setMarkerHl(layer, true);
            } else {
                layer._originalColor = originalColor;
                layer.setStyle({
                    color: "#ff3333",
                    weight: 4,
                    fillColor: "#ff3333",
                    fillOpacity: 0.4
                });
            }
            highlightedLayer = layer;
        }
    }

    function fitToAllLayers() {
        var layers = markerCluster.getLayers().concat(polyGroup.getLayers());
        if (layers.length === 0) return;  // empty set -> keep CONUS setView (graceful)
        programmaticMove = true;
        map.fitBounds(L.featureGroup(layers).getBounds(), { padding: [20, 20] });
    }

    // Row click handler (event delegation)
    document.addEventListener("click", function(e) {
        // Expand/collapse handler
        if (e.target.classList.contains("expand-row")) {
            var row = e.target.closest("tr");
            var detail = row.nextElementSibling;
            if (detail && detail.classList.contains("event-detail")) {
                detail.hidden = !detail.hidden;
                e.target.innerHTML = detail.hidden ? "&#9656;" : "&#9662;";
            }
            return;
        }

        // Popup "View details" link handler
        if (e.target.matches("[data-show-row]")) {
            e.preventDefault();
            var eventId = e.target.dataset.showRow;
            var targetRow = document.querySelector(
                'tr[data-event-id="' + CSS.escape(eventId) + '"]'
            );
            if (!targetRow) return;
            targetRow.scrollIntoView({ behavior: "smooth", block: "center" });
            var detail = targetRow.nextElementSibling;
            if (detail && detail.classList.contains("event-detail")) {
                detail.hidden = false;
                var button = targetRow.querySelector(".expand-row");
                if (button) button.innerHTML = "&#9662;";
            }
            return;
        }

        // Row click to highlight (no auto-pan - user controls viewport)
        var row = e.target.closest("tr.event-row");
        if (row && row._mapLayer) {
            highlightRow(row, row._mapLayer, row._mapColor);
            // Map stays where user put it
        }
    });

    // Row hover handlers (event delegation)
    document.addEventListener("mouseenter", function(e) {
        var row = e.target.closest && e.target.closest("tr.event-row");
        if (row && row._mapLayer && row._mapLayer !== highlightedLayer) {
            row._mapLayer.setStyle({
                color: row._mapColor,
                weight: 3,
                fillColor: row._mapColor,
                fillOpacity: 0.25
            });
        }
    }, true);

    document.addEventListener("mouseleave", function(e) {
        var row = e.target.closest && e.target.closest("tr.event-row");
        if (row && row._mapLayer && row._mapLayer !== highlightedLayer) {
            row._mapLayer.setStyle({
                color: row._mapColor,
                weight: 2,
                fillColor: row._mapColor,
                fillOpacity: 0.25
            });
        }
    }, true);

    // Fit to results button
    document.getElementById("fit-to-results").addEventListener("click", fitToAllLayers);

    // Client-side sort of the displayed rows; state persists across HTMX swaps.
    var sortState = { col: null, dir: 1 };  // dir: 1 asc, -1 desc

    function sortKey(row, col) {
        // Time sorts on the ISO timestamp for true chronological order.
        if (col === 1) return row.dataset.time || "";
        var cell = row.children[col];
        return cell ? cell.textContent.trim().toLowerCase() : "";
    }

    function applySort() {
        if (sortState.col === null) return;
        var tbody = document.querySelector("#events-rows table.events-table tbody");
        if (!tbody) return;
        var pairs = [];
        tbody.querySelectorAll("tr.event-row").forEach(function(r) {
            pairs.push([r, r.nextElementSibling]);  // main row + its detail row
        });
        // Array.prototype.sort is stable (ES2019+), so equal keys keep order.
        pairs.sort(function(a, b) {
            var ka = sortKey(a[0], sortState.col), kb = sortKey(b[0], sortState.col);
            if (ka < kb) return -sortState.dir;
            if (ka > kb) return sortState.dir;
            return 0;
        });
        pairs.forEach(function(p) {
            tbody.appendChild(p[0]);
            if (p[1]) tbody.appendChild(p[1]);
        });
    }

    function updateSortIndicators(ths) {
        ths.forEach(function(th, idx) {
            th.querySelectorAll(".sort-ind").forEach(function(s) { s.remove(); });
            if (idx === sortState.col) {
                var s = document.createElement("span");
                s.className = "sort-ind";
                s.textContent = sortState.dir === 1 ? " ▲" : " ▼";
                th.appendChild(s);
            }
        });
    }

    function bindSortHandlers() {
        var ths = document.querySelectorAll("#events-rows table.events-table thead th");
        ths.forEach(function(th, idx) {
            if (idx === 0) return;  // expand column is not sortable
            th.style.cursor = "pointer";
            th.onclick = function() {
                if (sortState.col === idx) { sortState.dir *= -1; }
                else { sortState.col = idx; sortState.dir = 1; }
                updateSortIndicators(ths);
                applySort();
            };
        });
        updateSortIndicators(ths);
    }

    // Initial load - bind layers and fit to the actual result distribution
    // (v0.7.2). Empty set -> fitToAllLayers no-ops, keeping the CONUS setView.
    rebindEventLayers();
    bindSortHandlers();
    fitToAllLayers();
    isInitialLoad = false;

    // Re-bind layers after each HTMX swap so the map tracks the current
    // (filtered / paginated) result set. Re-fit ONLY when the map-filter toggle
    // is OFF; when ON the viewport is operator-driven (it feeds the bbox) and
    // re-fitting would fight/loop the filter.
    document.body.addEventListener("htmx:afterSwap", function(evt) {
        if (evt.detail.target.id === "events-rows") {
            rebindEventLayers();
            bindSortHandlers();
            applySort();
            if (!mapFilterOn()) fitToAllLayers();
        }
    });

    // Map-filter toggle: sync the form's hidden input (enabled only when ON, so
    // it's omitted from the URL when OFF) and apply immediately.
    if (mapFilterToggle) {
        mapFilterToggle.addEventListener("change", function() {
            if (mapFilterToggle.checked) {
                mapFilterHidden.disabled = false;
                applyViewportFilter();        // sends current bbox + map_filter=1
            } else {
                mapFilterHidden.disabled = true;
                northInput.value = ""; southInput.value = "";
                eastInput.value = ""; westInput.value = "";
                htmx.trigger(document.getElementById("filter-form"), "submit");
            }
        });
    }

    // Fix map rendering after container shows
    setTimeout(function() { map.invalidateSize(); }, 100);
})();
</script>

<script>
// --- v0.7.1 filter behavior (vanilla JS + HTMX; no framework) --------------
(function () {
    var form = document.getElementById("filter-form");
    if (!form) return;
    var BASE_PATH = {{ base_path | tojson }};  // "/events" or "/telemetry"

    function submitForm() { if (window.htmx) htmx.trigger(form, "submit"); }

    // Sync a chip-picker's checked checkboxes into its hidden CSV input + badge.
    function syncField(field) {
        var boxes = form.querySelectorAll('.chip-cb[data-field="' + field + '"]');
        var vals = [];
        boxes.forEach(function (b) { if (b.checked) vals.push(b.value); });
        var hidden = document.getElementById("filter-" + field);
        if (hidden) hidden.value = vals.join(",");
        var badge = form.querySelector('[data-count-for="' + field + '"]');
        if (badge) badge.textContent = vals.length ? " (" + vals.length + ")" : "";
    }

    function closeAllPanels(except) {
        form.querySelectorAll(".chip-picker-panel").forEach(function (p) {
            if (p !== except && !p.hidden) {
                p.hidden = true;
                var t = form.querySelector('[data-toggle="' + p.dataset.panel + '"]');
                if (t) t.setAttribute("aria-expanded", "false");
                // Auto-apply on close for the multi-select chip-pickers.
                if (p.dataset.panel && p.dataset.panel !== "time") submitForm();
            }
        });
    }

    // Toggle panels open/closed.
    form.querySelectorAll(".chip-picker-toggle").forEach(function (btn) {
        btn.addEventListener("click", function (e) {
            e.preventDefault();
            var field = btn.dataset.toggle;
            var panel = form.querySelector('.chip-picker-panel[data-panel="' + field + '"]');
            if (!panel) return;
            var willOpen = panel.hidden;
            closeAllPanels(willOpen ? panel : null);
            panel.hidden = !willOpen;
            btn.setAttribute("aria-expanded", willOpen ? "true" : "false");
        });
    });

    // Checkbox change -> keep hidden CSV in sync (apply happens on close).
    form.querySelectorAll(".chip-cb").forEach(function (cb) {
        cb.addEventListener("change", function () { syncField(cb.dataset.field); });
    });

    // In-panel search: filter visible chip rows by label substring.
    form.querySelectorAll(".chip-picker-search").forEach(function (inp) {
        inp.addEventListener("input", function () {
            var field = inp.dataset.searchFor;
            var term = inp.value.trim().toLowerCase();
            var panel = form.querySelector('.chip-picker-panel[data-panel="' + field + '"]');
            panel.querySelectorAll(".chip-row").forEach(function (row) {
                var lbl = row.dataset.chipLabel || "";
                row.classList.toggle("chip-hidden", term && lbl.indexOf(term) === -1);
            });
        });
    });

    // Time presets.
    var timeHidden = document.getElementById("filter-time");
    form.querySelectorAll(".time-preset").forEach(function (btn) {
        btn.addEventListener("click", function () {
            timeHidden.value = btn.dataset.timeValue;
            closeAllPanels(null);
            submitForm();
        });
    });
    var customBtn = form.querySelector("[data-time-custom]");
    if (customBtn) {
        customBtn.addEventListener("click", function () {
            var f = document.getElementById("time-from").value;
            var t = document.getElementById("time-to").value;
            if (!f && !t) return;
            timeHidden.value = "custom:" + (f || "") + "," + (t || "");
            closeAllPanels(null);
            submitForm();
        });
    }

    // Debounced search box (300ms) -> auto-apply.
    var qInput = document.getElementById("filter-q");
    if (qInput) {
        var qTimer = null;
        qInput.addEventListener("input", function () {
            if (qTimer) clearTimeout(qTimer);
            qTimer = setTimeout(submitForm, 300);
        });
    }

    // Close panels when clicking outside.
    document.addEventListener("click", function (e) {
        if (!e.target.closest(".chip-picker")) closeAllPanels(null);
    });

    // Active-pill removal + clear-all (delegated; #active-pills is OOB-swapped).
    document.addEventListener("click", function (e) {
        var rm = e.target.closest("[data-remove-filter]");
        if (rm) {
            var key = rm.dataset.removeFilter;
            if (key === "q") { if (qInput) qInput.value = ""; }
            else if (key === "time") { timeHidden.value = "all"; }
            else {
                form.querySelectorAll('.chip-cb[data-field="' + key + '"]').forEach(function (b) {
                    b.checked = false;
                });
                syncField(key);
            }
            submitForm();
            return;
        }
        if (e.target.closest("[data-clear-all]")) { window.location.href = BASE_PATH; }
    });

    // Legend: collapse/expand toggle.
    var legendToggle = document.getElementById("legend-toggle");
    var legendBody = document.getElementById("legend-body");
    if (legendToggle && legendBody) {
        legendToggle.addEventListener("click", function () {
            var open = legendBody.hidden;
            legendBody.hidden = !open;
            legendToggle.setAttribute("aria-expanded", open ? "true" : "false");
            legendToggle.textContent = legendBody.querySelectorAll(".legend-chip").length +
                " adapters · " + (open ? "Hide legend ▴" : "Show legend ▾");
        });
    }

    // Legend chip click -> toggle that adapter in the adapter chip-picker filter.
    document.addEventListener("click", function (e) {
        var chip = e.target.closest(".legend-chip");
        if (!chip) return;
        var name = chip.dataset.adapter;
        var cb = form.querySelector('.chip-cb[data-field="adapter"][value="' + name + '"]');
        if (cb) { cb.checked = !cb.checked; syncField("adapter"); submitForm(); }
    });

    // Per-page selector (rendered inside #events-rows) -> set hidden limit and
    // re-submit at page 1 (the form carries no offset, so it resets to 0).
    var limitHidden = document.getElementById("filter-limit");
    document.addEventListener("change", function (e) {
        if (e.target.id === "per-page-select" && limitHidden) {
            limitHidden.value = e.target.value;
            submitForm();
        }
    });

    // "Show removed" toggle: enable the hidden input only when checked (so it's
    // omitted from the URL by default), then re-query. The rows fragment's
    // HX-Push-Url preserves the choice in a shared link.
    var showRemovedToggle = document.getElementById("show-removed-toggle");
    var showRemovedHidden = document.getElementById("filter-show_removed");
    if (showRemovedToggle && showRemovedHidden) {
        showRemovedToggle.addEventListener("change", function () {
            showRemovedHidden.disabled = !showRemovedToggle.checked;
            submitForm();
        });
    }
})();
</script>

{% endblock %}