{% extends "base.html" %}
{% load static %}

{% block title %}Operational Map{% endblock title %}

{% block extra_styles %}
    <link rel="stylesheet" href="{% static 'nautobot_trax/openlayers/ol.css' %}">
    <style>
        #trax-operational-map {
            height: 75vh;
            width: 100%;
            border: 1px solid #ddd;
            position: relative;
        }
        .trax-map-legend .trax-legend-swatch {
            display: inline-block;
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            margin-right: 0.25rem;
            vertical-align: middle;
        }
        .trax-mission-label {
            width: max-content;
            max-width: 240px;
            white-space: normal;
            overflow-wrap: break-word;
            font-size: 12px;
            font-weight: 600;
            color: #1e293b;
            background: rgba(255, 255, 255, 0.95);
            padding: 3px 6px;
            position: absolute;
        }
        .trax-mission-popup {
            max-width: 260px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 8px 10px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            font-size: 13px;
            position: absolute;
        }
        .trax-basemap-switcher {
            position: absolute;
            top: 0.5em;
            right: 0.5em;
            z-index: 10;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 4px;
            padding: 4px 6px;
            font-size: 12px;
        }
        .trax-operation-select {
            min-width: 0;
        }
        .trax-operation-select select,
        .trax-operation-select .select2-container {
            width: 100% !important;
        }
    </style>
{% endblock extra_styles %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <h1>Operational Map</h1>
            <p class="text-muted">
                Deployed kits plotted by MGRS/lat-long.
                {{ map_points|length }} Mission Plan{{ map_points|length|pluralize }} shown.
            </p>

            <form method="get" action="{% url 'plugins:nautobot_trax:operational_map' %}" class="mb-3">
                <label for="{{ operation_form.operations.id_for_label }}" class="form-label">Operations</label>
                <div class="row align-items-center g-2">
                    <div class="col-md-8 col-lg-6 trax-operation-select">
                        {{ operation_form.operations }}
                    </div>
                    <div class="col-auto d-flex gap-2">
                        <button type="submit" class="btn btn-primary">Apply</button>
                        <a href="{% url 'plugins:nautobot_trax:operational_map' %}" class="btn btn-outline-secondary">Show all</a>
                    </div>
                </div>
                {% for error in operation_form.operations.errors %}
                    <div class="text-danger" role="alert">{{ error }}</div>
                {% endfor %}
                <div id="id_operations_helptext" class="form-text">{{ operation_form.operations.help_text }}</div>
            </form>

            <p class="trax-map-legend">
                <span><span class="trax-legend-swatch" style="background-color: #2e7d32;"></span>Active</span>
                &nbsp;&nbsp;
                <span><span class="trax-legend-swatch" style="background-color: #1565c0;"></span>Planned</span>
            </p>

            {% if unavailable_tile_sets %}
                <div class="alert alert-warning" role="alert">
                    Map archive unavailable:
                    {% for tile_set in unavailable_tile_sets %}{{ tile_set.name }}{% if not forloop.last %}, {% endif %}{% endfor %}.
                    Restore the archive or upload a replacement in Map Tile Sets.
                </div>
            {% endif %}

            {% if operation_map_fallback and tile_sets %}
                <div class="alert alert-info">
                    No available basemap is associated with the selected operations. Showing other available basemaps.
                </div>
            {% endif %}

            {% if not tile_sets and not operation_form.errors %}
                <div class="alert alert-warning">
                    No basemap is available. Kit positions below are plotted on a blank grid — import a
                    <a href="{% url 'plugins:nautobot_trax:maptileset_add' %}">Map Tile Set</a> to show real map imagery.
                </div>
            {% endif %}

            {% if not map_points and not operation_form.errors %}
                <div class="alert alert-info">No Mission Plans with deployment coordinates match this view.</div>
            {% endif %}

            <div id="trax-operational-map"></div>
            <p id="trax-map-zoom-notice" class="text-muted" hidden></p>
            <p id="trax-map-coverage-notice" class="text-muted" role="status" hidden></p>
            <p id="trax-map-load-notice" class="text-warning" role="status" hidden></p>
        </div>
    </div>

    {{ map_points|json_script:"trax-map-points-data" }}
    {{ tile_sets|json_script:"trax-tile-sets-data" }}
{% endblock content %}

{% block javascript %}
    <script src="{% static 'nautobot_trax/openlayers/ol.js' %}"></script>
    <script>
        (function () {
            var mapPoints = JSON.parse(document.getElementById("trax-map-points-data").textContent);
            var tileSets = JSON.parse(document.getElementById("trax-tile-sets-data").textContent);
            var statusColors = {active: "rgba(46, 125, 50, 0.9)", planned: "rgba(21, 101, 192, 0.9)"};

            function escapeHtml(value) {
                if (value === null || value === undefined) {
                    return "";
                }
                return String(value).replace(/[&<>"']/g, function (char) {
                    return {"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"}[char];
                });
            }

    // [south, west, north, east] (server convention) -> OL's
    // [minX, minY, maxX, maxY] extent in map (EPSG:3857) coordinates.
            function toExtent(bounds) {
                var sw = ol.proj.fromLonLat([bounds[0][1], bounds[0][0]]);
                var ne = ol.proj.fromLonLat([bounds[1][1], bounds[1][0]]);
                return [sw[0], sw[1], ne[0], ne[1]];
            }

            function toCoordinate(point) {
                return ol.proj.fromLonLat([point.longitude, point.latitude]);
            }

    // Source grid indices enumerate exported resolutions, independently of view
    // zoom. Only z needs translating to native XYZ; x/y already use that level's
    // geographic grid. OpenLayers scales each tile over its full native extent.
            function buildTileUrlFunction(template, zoomLevels) {
                return function (tileCoord) {
                    return template
                        .replace("{z}", zoomLevels[tileCoord[0]])
                        .replace("{x}", tileCoord[1])
                        .replace("{y}", tileCoord[2]);
                };
            }

            var activeTileSet = tileSets.length > 0 ? tileSets[0] : null;

            var view = new ol.View({
                center: ol.proj.fromLonLat([0, 0]),
                zoom: activeTileSet ? activeTileSet.min_zoom : 2,
                minZoom: activeTileSet ? activeTileSet.min_zoom : 2,
                maxZoom: activeTileSet ? Math.min(22, activeTileSet.max_zoom + 2) : 18,
        // Wheel/pinch gestures remain fractional; buttons (the Zoom control)
        // keep OL's default whole-level step via their own zoomDelta.
                constrainResolution: false,
            });

            var map = new ol.Map({
                target: "trax-operational-map",
                view: view,
                layers: [],
                controls: ol.control.defaults.defaults(),
        // Swap the default MouseWheelZoom for one tuned for continuous
        // (not snapped to whole levels), pointer-anchored zoom -- confirmed
        // live this produces smooth, continuous zoom with no custom easing
        // code needed.
                interactions: ol.interaction.defaults.defaults({mouseWheelZoom: false}).extend([
                    new ol.interaction.MouseWheelZoom({
                        constrainResolution: false,
                        duration: 250,
                        timeout: 80,
                        useAnchor: true,
                    }),
                ]),
            });

    // Explicit zIndex so markers render above every tile layer -- a
    // documented guarantee rather than relying on OpenLayers' default
    // layer-order tie-breaking.
            var markerSource = new ol.source.Vector();
            var markerLayer = new ol.layer.Vector({source: markerSource, zIndex: 10});
            map.addLayer(markerLayer);

            var labelsContainer = document.getElementById("trax-operational-map");
            var markerCoordinates = [];
            var featuresByPoint = [];
            mapPoints.forEach(function (point) {
                var color = statusColors[point.status] || "rgba(117, 117, 117, 0.9)";
                var coordinate = toCoordinate(point);
                var feature = new ol.Feature({geometry: new ol.geom.Point(coordinate)});
                feature.setStyle(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 8,
                        fill: new ol.style.Fill({color: color}),
                        stroke: new ol.style.Stroke({color: "#000", width: 1}),
                    }),
                }));
                markerSource.addFeature(feature);
                markerCoordinates.push(coordinate);
                featuresByPoint.push({feature: feature, point: point, coordinate: coordinate});

                var labelElement = document.createElement("div");
                labelElement.className = "trax-mission-label";
                labelElement.textContent = point.mission_name;
                map.addOverlay(new ol.Overlay({
                    element: labelElement,
                    position: coordinate,
                    positioning: "center-left",
                    offset: [10, 0],
                    stopEvent: false,
                }));
            });

            var popupElement = document.createElement("div");
            popupElement.className = "trax-mission-popup";
            popupElement.hidden = true;
            var popupOverlay = new ol.Overlay({
                element: popupElement,
                positioning: "bottom-center",
                offset: [0, -12],
                stopEvent: true,
            });
            map.addOverlay(popupOverlay);

            map.on("singleclick", function (event) {
                var hit = null;
                map.forEachFeatureAtPixel(event.pixel, function (feature) {
                    hit = featuresByPoint.find(function (entry) { return entry.feature === feature; });
                    return true;
                });
                if (!hit) {
                    popupElement.hidden = true;
                    popupOverlay.setPosition(undefined);
                    return;
                }
                var point = hit.point;
                popupElement.innerHTML =
                    "<strong><a href=\"" + escapeHtml(point.url) + "\">" + escapeHtml(point.mission_name) + "</a></strong><br>" +
                "Kit: " + escapeHtml(point.kit || "—") + "<br>" +
                "Status: " + escapeHtml(point.status) + "<br>" +
                "MGRS: " + escapeHtml(point.mgrs || "—") + "<br>" +
                "Location: " + escapeHtml(point.location || "—");
                popupElement.hidden = false;
                popupOverlay.setPosition(hit.coordinate);
            });

    // View.fit() also respects OpenLayers' projection/viewport constraints, so
    // the effective zoom-out floor can exceed minZoom on a large viewport.
            function fitTileSet(tileSet) {
                var coverage = tileSet && tileSet.bounds ? toExtent(tileSet.bounds) : null;
                var visibleMissions = markerCoordinates.filter(function (coordinate) {
                    return !coverage || ol.extent.containsCoordinate(coverage, coordinate);
                });
        // Missions can be on different continents. At a detail-only zoom, fitting
        // all of them would center the map outside the offline atlas entirely.
                if (visibleMissions.length > 0) {
                    view.fit(ol.extent.boundingExtent(visibleMissions), {
                        padding: [24, 24, 24, 24],
                        maxZoom: tileSet ? Math.min(tileSet.max_zoom, 10) : 10,
                    });
                } else if (coverage) {
                    view.fit(coverage);
                } else {
                    view.setCenter(ol.proj.fromLonLat([0, 0]));
                    view.setZoom(view.getMinZoom());
                }
            }

    // Apply the active atlas's zoom limits before computing the initial fit.
            if (activeTileSet) {
                updateTileSet(activeTileSet);
            }
    // Choose the viewport before attaching imagery so the first requests are in coverage.
            fitTileSet(activeTileSet);

            var tileLayers = Object.create(null);
            tileSets.forEach(function (tileSet) {
                var name = escapeHtml(tileSet.name);
                var zoomLevels = tileSet.zoom_levels || [];
                if (!zoomLevels.length) {
            // Older records may only have min/max metadata.
                    for (var zoom = tileSet.min_zoom; zoom <= tileSet.max_zoom; zoom++) {
                        zoomLevels.push(zoom);
                    }
                }
                var xyzGrid = ol.tilegrid.createXYZ({maxZoom: tileSet.max_zoom});
                var tileGrid = new ol.tilegrid.TileGrid({
                    extent: ol.proj.get("EPSG:3857").getExtent(),
                    resolutions: zoomLevels.map(function (zoom) { return xyzGrid.getResolution(zoom); }),
                    tileSize: 256,
                });
                var source = new ol.source.XYZ({
                    tileGrid: tileGrid,
            // Prefer the coarser native resolution between exported levels to
            // avoid multiplying detail-tile requests for a regional overview.
                    zDirection: 1,
                    tileUrlFunction: buildTileUrlFunction(tileSet.tile_url, zoomLevels),
                    wrapX: false,
                    attributions: escapeHtml(tileSet.attribution),
                });
                source.on("tileloaderror", function () {
                    if (!tileLayers[name].getVisible()) {
                        return;
                    }
                    var notice = document.getElementById("trax-map-load-notice");
                    if (notice) {
                        notice.hidden = false;
                        notice.textContent = "Some map imagery could not be loaded. Coverage may be incomplete or the archive unavailable.";
                    }
                });
                var layer = new ol.layer.Tile({
                    source: source,
                    visible: false,
                    extent: tileSet.bounds ? toExtent(tileSet.bounds) : undefined,
                });
                tileLayers[name] = layer;
                map.addLayer(layer);
            });

            function updateTileSet(tileSet) {
                view.setMinZoom(tileSet.min_zoom);
                view.setMaxZoom(Math.min(22, tileSet.max_zoom + 2));
                var notice = document.getElementById("trax-map-zoom-notice");
                notice.hidden = tileSet.min_zoom <= 6;
                notice.textContent = "This basemap starts at zoom " + tileSet.min_zoom +
                ". Export lower zoom levels in MOBAC to enable regional overviews.";
                var coverageNotice = document.getElementById("trax-map-coverage-notice");
                if (coverageNotice) {
                    var coverage = tileSet.bounds ? toExtent(tileSet.bounds) : null;
                    var outside = coverage ? markerCoordinates.filter(function (coordinate) {
                        return !ol.extent.containsCoordinate(coverage, coordinate);
                    }).length : 0;
                    coverageNotice.hidden = outside === 0;
                    coverageNotice.textContent = outside + " mission(s) outside this basemap's recorded coverage. Their markers remain visible.";
                }
                var loadNotice = document.getElementById("trax-map-load-notice");
                if (loadNotice) {
                    loadNotice.hidden = true;
                }
            }

            function activateTileSet(tileSet) {
                Object.keys(tileLayers).forEach(function (name) {
                    tileLayers[name].setVisible(name === escapeHtml(tileSet.name));
                });
                updateTileSet(tileSet);
            }

            if (activeTileSet) {
                activateTileSet(activeTileSet);
            }
            if (tileSets.length > 1) {
                var switcher = document.createElement("select");
                switcher.className = "trax-basemap-switcher";
                tileSets.forEach(function (tileSet) {
                    var option = document.createElement("option");
                    option.value = tileSet.name;
                    option.textContent = tileSet.name;
                    switcher.appendChild(option);
                });
                switcher.value = activeTileSet.name;
                switcher.addEventListener("change", function () {
                    var tileSet = tileSets.find(function (item) { return item.name === switcher.value; });
                    activateTileSet(tileSet);
                    fitTileSet(tileSet);
                });
                labelsContainer.appendChild(switcher);
            }
        })();
    </script>
{% endblock javascript %}