{% extends "portal/base.html" %}
{% block title %}Your locations{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}
{% block content %}
<h1 class="text-2xl font-semibold mb-1">Your monitoring locations</h1>
<p class="text-gray-400 text-sm mb-6">Live sound levels for your active locations. Read-only.</p>

{% if locations %}
<!-- Status rollup (filled live from the per-location /live fetches) -->
<div id="rollup" class="hidden mb-5 flex flex-wrap items-center gap-2 text-sm">
    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
        <span class="text-gray-400">Locations</span><b id="r-total" class="text-gray-100">&ndash;</b>
    </span>
    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
        <span class="w-2 h-2 rounded-full bg-green-500"></span><b id="r-live">&ndash;</b><span class="text-gray-400">live</span>
    </span>
    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
        <span class="w-2 h-2 rounded-full bg-slate-500"></span><b id="r-off">&ndash;</b><span class="text-gray-400">offline</span>
    </span>
    <span id="r-peak-wrap" class="hidden inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800/60 border border-slate-700">
        <span class="text-gray-400">Loudest now</span><b id="r-peak" class="text-seismo-orange">&ndash;</b><span class="text-gray-400">dB Leq &middot;</span><span id="r-peak-loc" class="text-gray-300"></span>
    </span>
</div>

<div id="loc-map" class="h-64 rounded-xl overflow-hidden mb-6 hidden border border-slate-700"></div>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for loc in locations %}
    <a href="/portal/location/{{ loc.id }}" data-loc="{{ loc.id }}"
       class="loc-tile block rounded-xl border border-slate-700 bg-slate-800/50 p-4 hover:border-seismo-orange transition-colors">
        <div class="flex items-start justify-between gap-2">
            <div class="font-semibold">{{ loc.name }}</div>
            <span class="loc-badge hidden shrink-0 px-2 py-0.5 text-xs rounded-full"></span>
        </div>
        <div class="text-xs text-gray-400 mt-0.5 truncate">{{ loc.address or loc.project_name or '' }}</div>
        <div class="mt-3 flex items-baseline gap-1">
            <span class="loc-leq text-3xl font-bold text-seismo-orange">--</span>
            <span class="text-sm text-gray-400">dB Leq</span>
        </div>
        <div class="loc-fresh text-xs text-gray-500 mt-1">&nbsp;</div>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="rounded-xl border border-slate-700 bg-slate-800/50 p-8 text-center text-gray-400">
    No active monitoring locations yet.
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const LOCATIONS = {{ locations|tojson }};
const liveState = {};          // loc.id -> {status, leq(num|null), leqStr}
const markersById = {};        // loc.id -> circleMarker (for live recolor)

// Dot/level color. Bands are placeholders until per-location alert thresholds
// exist (M2 alerts will color by threshold breach instead).
const LEVEL_AMBER = 55, LEVEL_RED = 70;
const COLOR_IDLE = '#64748b';  // slate-500 — not producing a live level
function levelColor(st) {
    if (!st || st.status !== 'measuring' || st.leq == null) return COLOR_IDLE;
    if (st.leq >= LEVEL_RED) return '#ef4444';    // red-500
    if (st.leq >= LEVEL_AMBER) return '#f59e0b';  // amber-500
    return '#22c55e';                              // green-500
}
function num(v) { const f = parseFloat(v); return isNaN(f) ? null : f; }

function fmtAgo(iso) {
    if (!iso) return '';
    const t = new Date(iso.endsWith('Z') ? iso : iso + 'Z');
    const s = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000));
    if (s < 60) return 'updated just now';
    if (s < 3600) return 'updated ' + Math.round(s / 60) + 'm ago';
    return 'updated ' + Math.round(s / 3600) + 'h ago';
}

function updateMarker(loc) {
    const m = markersById[loc.id]; if (!m) return;
    const st = liveState[loc.id];
    m.setStyle({ fillColor: levelColor(st) });
    let label = loc.name;
    if (st) {
        if (st.status === 'measuring') label += ` &middot; ${st.leqStr} dB Leq`;
        else if (st.status === 'stopped') label += ' &middot; stopped';
        else if (st.status === 'nodevice') label += ' &middot; no device';
        else label += ' &middot; offline';
    }
    m.setTooltipContent(label);
}

async function loadTile(loc) {
    const el = document.querySelector(`.loc-tile[data-loc="${loc.id}"]`);
    const leqEl = el && el.querySelector('.loc-leq'),
          badge = el && el.querySelector('.loc-badge'),
          fresh = el && el.querySelector('.loc-fresh');
    try {
        const j = await (await fetch(`/portal/api/location/${encodeURIComponent(loc.id)}/live`)).json();
        const d = j.data;
        if (!d) {
            liveState[loc.id] = { status: j.reason === 'no_device' ? 'nodevice' : 'offline', leq: null };
            if (badge) {
                badge.classList.remove('hidden');
                badge.textContent = j.reason === 'no_device' ? 'No device' : 'Offline';
                badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full bg-slate-700 text-gray-300';
            }
            if (leqEl) leqEl.textContent = '--';
            if (fresh) fresh.innerHTML = '&nbsp;';
        } else {
            const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
            const leqStr = (d.leq == null || d.leq === '') ? '--' : d.leq;
            liveState[loc.id] = { status: measuring ? 'measuring' : 'stopped', leq: num(d.leq), leqStr };
            if (leqEl) leqEl.textContent = leqStr;
            if (badge) {
                badge.classList.remove('hidden');
                badge.textContent = measuring ? '● Live' : 'Stopped';
                badge.className = 'loc-badge shrink-0 px-2 py-0.5 text-xs rounded-full ' +
                    (measuring ? 'bg-green-900/40 text-green-300' : 'bg-slate-700 text-gray-300');
            }
            if (fresh) fresh.textContent = fmtAgo(d.last_seen);
        }
    } catch (e) { /* leave placeholders */ }
    updateMarker(loc);
}

function updateRollup() {
    const total = LOCATIONS.length;
    let live = 0, off = 0, peak = null, peakStr = null, peakLoc = null;
    for (const l of LOCATIONS) {
        const s = liveState[l.id]; if (!s) continue;
        if (s.status === 'measuring') {
            live++;
            if (s.leq != null && (peak == null || s.leq > peak)) { peak = s.leq; peakStr = s.leqStr; peakLoc = l.name; }
        } else if (s.status === 'offline' || s.status === 'nodevice') off++;
    }
    document.getElementById('r-total').textContent = total;
    document.getElementById('r-live').textContent = live;
    document.getElementById('r-off').textContent = off;
    const pw = document.getElementById('r-peak-wrap');
    if (peak != null) {
        pw.classList.remove('hidden');
        document.getElementById('r-peak').textContent = peakStr;
        document.getElementById('r-peak-loc').textContent = peakLoc;
    } else pw.classList.add('hidden');
    document.getElementById('rollup').classList.remove('hidden');
}

async function refreshAll() {
    await Promise.all(LOCATIONS.map(loadTile));
    updateRollup();
}
refreshAll();
setInterval(refreshAll, 15000);

// Map of locations that have coordinates — dots recolor live via updateMarker().
const withCoords = LOCATIONS.filter(l => l.coordinates);
if (withCoords.length) {
    const mapEl = document.getElementById('loc-map');
    mapEl.classList.remove('hidden');
    const map = L.map('loc-map', { scrollWheelZoom: false });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
    const pts = [];
    withCoords.forEach(l => {
        const [la, lo] = (l.coordinates || '').split(',').map(Number);
        if (!isNaN(la) && !isNaN(lo)) {
            // Same dot style as the internal project map (circleMarker, not a pin),
            // but recolored live by current level.
            markersById[l.id] = L.circleMarker([la, lo], {
                radius: 8, fillColor: levelColor(liveState[l.id]), color: '#fff',
                weight: 2, opacity: 1, fillOpacity: 0.9,
            }).addTo(map).bindTooltip(l.name, { direction: 'top', offset: [0, -6] });
            pts.push([la, lo]);
        }
    });
    if (pts.length) map.fitBounds(pts, { padding: [30, 30], maxZoom: 15 });
    else mapEl.classList.add('hidden');
    // Paint dots with whatever live data has already arrived.
    LOCATIONS.forEach(updateMarker);
}
</script>
{% endblock %}