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

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

{% block extra_styles %}
<link rel="stylesheet" href="{% static 'nautobot_trax/leaflet/leaflet.css' %}">
<style>
    #trax-operational-map {
        height: 75vh;
        width: 100%;
        border: 1px solid #ddd;
    }
    .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;
    }
    .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 not tile_sets %}
        <div class="alert alert-warning">
            No basemap tiles loaded. 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>
    </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/leaflet/leaflet.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: "#2e7d32", planned: "#1565c0"};

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

    var activeTileSet = tileSets.length > 0 ? tileSets[0] : null;
    var map = L.map("trax-operational-map", {
        worldCopyJump: true,
        preferCanvas: true,
        minZoom: activeTileSet ? activeTileSet.min_zoom : 2,
        maxZoom: activeTileSet ? Math.min(22, activeTileSet.max_zoom + 2) : 18,
    });

    var markerBounds = [];
    mapPoints.forEach(function (point) {
        var color = statusColors[point.status] || "#757575";
        var marker = L.circleMarker([point.latitude, point.longitude], {
            radius: 8,
            color: "#000",
            weight: 1,
            fillColor: color,
            fillOpacity: 0.9,
        }).addTo(map);

        var popupHtml =
            "<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 || "—");
        marker.bindPopup(popupHtml);
        marker.bindTooltip(escapeHtml(point.mission_name), {
            permanent: true,
            direction: "right",
            offset: [10, 0],
            opacity: 1,
            className: "trax-mission-label",
        });

        markerBounds.push([point.latitude, point.longitude]);
    });

    function fitTileSet(tileSet) {
        var coverage = tileSet && tileSet.bounds ? L.latLngBounds(tileSet.bounds) : null;
        var visibleMissions = markerBounds.filter(function (position) {
            return !coverage || coverage.contains(position);
        });
        // 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) {
            map.fitBounds(visibleMissions, {
                padding: [24, 24],
                maxZoom: tileSet ? Math.min(tileSet.max_zoom, 10) : 10,
            });
        } else if (coverage) {
            map.fitBounds(coverage);
        } else {
            map.setView([0, 0], map.getMinZoom());
        }
    }

    // Choose the viewport before attaching imagery so the first requests are in coverage.
    fitTileSet(activeTileSet);

    var OfflineTileLayer = L.TileLayer.extend({
        // Leaflet 1.9.4 uses this hook to choose the native tile grid. For gaps,
        // reuse coarser tiles so zooming out cannot multiply finer-tile requests.
        _clampZoom: function (zoom) {
            var levels = this.options.availableZooms;
            if (!levels || levels.length === 0) {
                return L.TileLayer.prototype._clampZoom.call(this, zoom);
            }
            for (var index = levels.length - 1; index >= 0; index--) {
                if (levels[index] <= zoom) {
                    return levels[index];
                }
            }
            return levels[0];
        },
    });
    var baseLayers = Object.create(null);
    tileSets.forEach(function (tileSet) {
        baseLayers[escapeHtml(tileSet.name)] = new OfflineTileLayer(tileSet.tile_url, {
            // Underzooming native detail tiles multiplies requests by 4 per level.
            // Use actual overview tiles, and only stretch tiles when zooming in.
            minZoom: tileSet.min_zoom,
            minNativeZoom: tileSet.min_zoom,
            maxNativeZoom: tileSet.max_zoom,
            availableZooms: tileSet.zoom_levels,
            maxZoom: Math.min(22, tileSet.max_zoom + 2),
            bounds: tileSet.bounds || undefined,
            noWrap: true,
            updateWhenIdle: true,
            updateWhenZooming: false,
            attribution: escapeHtml(tileSet.attribution),
        });
    });

    function updateTileSet(tileSet) {
        map.setMinZoom(tileSet.min_zoom);
        map.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.";
    }

    if (activeTileSet) {
        updateTileSet(activeTileSet);
        baseLayers[escapeHtml(activeTileSet.name)].addTo(map);
    }
    if (tileSets.length > 1) {
        L.control.layers(baseLayers, null, {collapsed: false}).addTo(map);
        map.on("baselayerchange", function (event) {
            var tileSet = tileSets.find(function (item) { return escapeHtml(item.name) === event.name; });
            updateTileSet(tileSet);
            fitTileSet(tileSet);
        });
    }
})();
</script>
{% endblock javascript %}