{% extends "base.html" %}

{% block title %}Central — Monitoring Areas{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ==" crossorigin="anonymous">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous"></script>
{% endblock %}

{% block content %}
<h1>Monitoring Areas</h1>
<p class="muted">
    An event is archived (and published to subscribers) if its geometry intersects
    <strong>any</strong> area below — the areas form a set-union, so add as many
    non-contiguous regions as you need. Events with no geometry (space-weather
    alerts, removal tombstones) are always kept. With no areas configured, every
    event is kept. Changes apply within about a minute — no restart required.
</p>

{% if error %}<div class="flash flash-error">{{ error }}</div>{% endif %}
{% if not areas %}
<div class="flash flash-warn">No areas configured — archive will keep every event.</div>
{% endif %}

<div id="area-map" style="height: 440px; margin-bottom: 1rem; border: 1px solid var(--rule); border-radius: var(--radius);"></div>

<button type="button" id="add-area-btn" class="btn-contrast">Add area</button>

<form id="area-editor" method="post" action="/monitoring-area" style="display:none; margin-top: 1rem;">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="cols">
        <div>
            <label for="ed-name">Name</label>
            <input type="text" id="ed-name" name="name" required maxlength="64" autocomplete="off">
        </div>
        <div>
            <label for="ed-north">North</label>
            <input type="number" id="ed-north" name="north" step="0.0001" min="-90" max="90" readonly>
        </div>
        <div>
            <label for="ed-south">South</label>
            <input type="number" id="ed-south" name="south" step="0.0001" min="-90" max="90" readonly>
        </div>
        <div>
            <label for="ed-east">East</label>
            <input type="number" id="ed-east" name="east" step="0.0001" min="-180" max="180" readonly>
        </div>
        <div>
            <label for="ed-west">West</label>
            <input type="number" id="ed-west" name="west" step="0.0001" min="-180" max="180" readonly>
        </div>
    </div>
    <p class="muted" style="margin-top:.5rem;">Drag the rectangle's corners on the map to set the bounds.</p>
    <button type="submit" id="ed-save" class="btn-contrast">Create area</button>
    <button type="button" id="ed-cancel" class="btn-secondary">Cancel</button>
</form>

{% if areas %}
<div class="table-wrap" style="margin-top: 1.5rem;">
<table>
    <thead><tr><th></th><th>Name</th><th>Bounds (N, S, E, W)</th><th></th><th></th></tr></thead>
    <tbody>
    {% for a in areas %}
        <tr data-id="{{ a.id }}" data-name="{{ a.name }}">
            <td><span class="area-swatch" data-name="{{ a.name }}" style="display:inline-block;width:14px;height:14px;border-radius:3px;"></span></td>
            <td>{{ a.name }}</td>
            <td class="muted mono">{{ "%.3f"|format(a.north) }}, {{ "%.3f"|format(a.south) }}, {{ "%.3f"|format(a.east) }}, {{ "%.3f"|format(a.west) }}</td>
            <td><button type="button" class="btn-outline edit-btn" data-id="{{ a.id }}" style="height:30px;padding:0 12px;">Edit</button></td>
            <td>
                <form method="post" action="/monitoring-area/{{ a.id }}/delete" onsubmit="return confirm('Delete area &quot;{{ a.name }}&quot;?');" style="margin:0;">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <button type="submit" class="btn-danger" style="height:30px;padding:0 12px;">Delete</button>
                </form>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% endif %}

<script id="areas-data" type="application/json">{{ areas | tojson }}</script>
<script id="defaults-data" type="application/json">{{ default_bounds | tojson }}</script>
<script id="formvalues-data" type="application/json">{{ form_values | tojson }}</script>
<script id="editid-data" type="application/json">{{ edit_id | tojson }}</script>

<script>
(function () {
    const areas = JSON.parse(document.getElementById('areas-data').textContent || '[]');
    const defaults = JSON.parse(document.getElementById('defaults-data').textContent);
    const formValues = JSON.parse(document.getElementById('formvalues-data').textContent || 'null');
    const editId = JSON.parse(document.getElementById('editid-data').textContent || 'null');
    const tileUrl = {{ tile_url | tojson }};
    const tileAttr = {{ tile_attribution | tojson }};

    // Golden-angle hue per area name (same 137.508 step as events_list.html's
    // per-NORAD coloring) so areas render as well-spread, repeatable colors.
    function hueForName(name) {
        let h = 0;
        for (let i = 0; i < name.length; i++) { h = (h * 31 + name.charCodeAt(i)) >>> 0; }
        return (h * 137.508) % 360;
    }
    function colorForName(name) { return 'hsl(' + hueForName(name).toFixed(1) + ', 70%, 50%)'; }

    const map = L.map('area-map');
    L.tileLayer(tileUrl, { attribution: tileAttr, maxZoom: 18 }).addTo(map);
    setTimeout(function () { map.invalidateSize(); }, 100);

    // Draw every configured area as a colored, tooltipped rectangle.
    const rects = {};
    const group = L.featureGroup().addTo(map);
    areas.forEach(function (a) {
        const r = L.rectangle([[a.south, a.west], [a.north, a.east]],
            { color: colorForName(a.name), weight: 2, fillOpacity: 0.15 });
        r.bindTooltip(a.name, { permanent: false });
        r.addTo(group);
        rects[a.id] = r;
    });

    // Auto-fit to all areas + 10% padding; fall back to the default seed bounds.
    if (areas.length) {
        map.fitBounds(group.getBounds().pad(0.1));
    } else {
        map.setView([(defaults.north + defaults.south) / 2,
                     (defaults.east + defaults.west) / 2], 5);
    }

    document.querySelectorAll('.area-swatch').forEach(function (s) {
        s.style.background = colorForName(s.dataset.name);
    });

    const editor = document.getElementById('area-editor');
    const fName = document.getElementById('ed-name');
    const fN = document.getElementById('ed-north'), fS = document.getElementById('ed-south');
    const fE = document.getElementById('ed-east'), fW = document.getElementById('ed-west');
    const saveBtn = document.getElementById('ed-save');
    let editRect = null;

    function syncInputs() {
        const b = editRect.getBounds();
        fN.value = b.getNorth().toFixed(4); fS.value = b.getSouth().toFixed(4);
        fE.value = b.getEast().toFixed(4);  fW.value = b.getWest().toFixed(4);
    }
    function beginEdit(rect) {
        if (editRect && editRect.editing) { editRect.editing.disable(); }
        editRect = rect;
        rect.editing.enable();          // leaflet.draw corner handles (no new dep)
        rect.on('edit', syncInputs);
        syncInputs();
    }
    function openEditor(action, label) {
        editor.action = action; saveBtn.textContent = label; editor.style.display = 'block';
    }
    function closeEditor() {
        if (rects['__new__']) { group.removeLayer(rects['__new__']); delete rects['__new__']; }
        if (editRect && editRect.editing) { editRect.editing.disable(); }
        editor.style.display = 'none';
    }

    document.getElementById('add-area-btn').addEventListener('click', function () {
        if (rects['__new__']) { group.removeLayer(rects['__new__']); }
        const c = map.getCenter();
        const r = L.rectangle([[c.lat - 1, c.lng - 1], [c.lat + 1, c.lng + 1]],
            { color: '#3388ff', weight: 2, fillOpacity: 0.2 }).addTo(group);
        rects['__new__'] = r;
        fName.value = '';
        openEditor('/monitoring-area', 'Create area');
        beginEdit(r);
    });

    document.querySelectorAll('.edit-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const id = btn.dataset.id;
            const tr = btn.closest('tr');
            fName.value = tr.dataset.name;
            openEditor('/monitoring-area/' + id + '/update', 'Save changes');
            beginEdit(rects[id]);
            map.fitBounds(rects[id].getBounds().pad(0.3));
        });
    });

    document.getElementById('ed-cancel').addEventListener('click', closeEditor);

    // Re-open the editor pre-filled after a server-side validation error.
    if (formValues) {
        if (editId !== null && document.querySelector('.edit-btn[data-id="' + editId + '"]')) {
            document.querySelector('.edit-btn[data-id="' + editId + '"]').click();
        } else {
            document.getElementById('add-area-btn').click();
        }
        if (formValues.name) { fName.value = formValues.name; }
        if (formValues.north) { fN.value = formValues.north; }
        if (formValues.south) { fS.value = formValues.south; }
        if (formValues.east)  { fE.value = formValues.east; }
        if (formValues.west)  { fW.value = formValues.west; }
    }
})();
</script>
{% endblock %}