{% extends "base.html" %}

{% block title %}SLMM Admin - Seismo Fleet Manager{% endblock %}

{% block content %}
<div class="mb-8 flex items-center justify-between">
    <div>
        <a href="/settings#developer" class="text-sm text-seismo-orange hover:text-seismo-burgundy">← Back to Developer Tools</a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mt-1">SLMM Admin</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Diagnostics for the Sound Level Meter Manager (SLMM) backend.</p>
    </div>
    <button onclick="loadSlmmOverview()"
            class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white text-sm font-medium rounded-lg">
        <span id="refresh-label">↻ Refresh</span>
    </button>
</div>

<!-- Health Banner -->
<div id="health-banner" class="rounded-xl p-4 mb-6 bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-gray-700">
    <p class="text-sm text-gray-500 dark:text-gray-400">Loading SLMM status…</p>
</div>

<!-- Connection Info -->
<div class="rounded-xl bg-white dark:bg-slate-800 shadow-lg p-4 mb-6">
    <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-2">Connection</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
        <div>
            <span class="text-gray-500 dark:text-gray-400">terra-view → SLMM URL</span>
            <div class="font-mono text-gray-900 dark:text-white mt-0.5">{{ slmm_base_url }}</div>
        </div>
        <div>
            <span class="text-gray-500 dark:text-gray-400">Last checked</span>
            <div class="font-mono text-gray-900 dark:text-white mt-0.5" id="checked-at">—</div>
        </div>
        <div>
            <span class="text-gray-500 dark:text-gray-400">Version</span>
            <div class="font-mono text-gray-900 dark:text-white mt-0.5" id="slmm-version">—</div>
        </div>
    </div>
    <div class="mt-3 text-xs text-gray-500 dark:text-gray-400">
        For per-device SLM control, see the <a href="/sound-level-meters" class="text-seismo-orange hover:text-seismo-burgundy underline">Sound Level Meters dashboard</a>.
    </div>
</div>

<!-- Live Monitoring (keepalive) -->
<div class="rounded-xl bg-white dark:bg-slate-800 shadow-lg p-4 mb-6">
    <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-1">Live Monitoring (keepalive)</h2>
    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
        Keepalive runs the 1&nbsp;Hz DOD feed 24/7 (even with no viewer), which powers the live-chart
        trail and continuous threshold alerts. Toggling persists and survives restarts.
    </p>
    <div id="monitor-list" class="text-sm">
        <p class="text-gray-500 dark:text-gray-400">Loading…</p>
    </div>
</div>

<!-- Raw API tester -->
<div class="rounded-xl bg-white dark:bg-slate-800 shadow-lg p-4 mb-6">
    <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-3">Raw API Tester</h2>
    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Send a GET request to any SLMM endpoint via the terra-view <code class="font-mono">/api/slmm/*</code> proxy.</p>
    <div class="flex gap-2 mb-3">
        <span class="px-3 py-2 text-sm bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 font-mono rounded-l-lg">/api/slmm/</span>
        <input id="raw-path" type="text" placeholder="health" value="health"
               class="flex-1 px-3 py-2 text-sm bg-white dark:bg-slate-900 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded font-mono"
               onkeydown="if(event.key==='Enter') sendRaw();">
        <button onclick="sendRaw()"
                class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white text-sm rounded-lg">
            GET
        </button>
    </div>
    <pre id="raw-response" class="bg-gray-900 dark:bg-black text-gray-200 font-mono text-xs p-3 rounded-lg max-h-96 overflow-auto whitespace-pre hidden"></pre>
</div>

<script>
function _esc(s) {
    if (s == null) return '';
    return String(s).replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;');
}

async function loadSlmmOverview() {
    const lbl = document.getElementById('refresh-label');
    lbl.textContent = '↻ Loading…';
    try {
        const r = await fetch('/api/admin/slmm/overview');
        if (!r.ok) throw new Error('HTTP ' + r.status);
        const d = await r.json();

        document.getElementById('checked-at').textContent = d.checked_at ? d.checked_at.slice(0, 19).replace('T', ' ') : '—';
        document.getElementById('slmm-version').textContent = d.health?.version || '—';

        const banner = document.getElementById('health-banner');
        if (d.reachable) {
            banner.className = 'rounded-xl p-4 mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800';
            banner.innerHTML = `
                <div class="flex items-center gap-3">
                    <span class="w-3 h-3 rounded-full bg-green-500"></span>
                    <div>
                        <div class="font-semibold text-green-800 dark:text-green-300">SLMM reachable</div>
                        <div class="text-xs text-green-700 dark:text-green-400">${_esc(d.health?.service || 'slmm')}</div>
                    </div>
                </div>`;
        } else {
            const errs = Object.entries(d.errors || {}).map(([k, v]) => `${k}: ${v}`).join('; ');
            banner.className = 'rounded-xl p-4 mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800';
            banner.innerHTML = `
                <div class="flex items-center gap-3">
                    <span class="w-3 h-3 rounded-full bg-red-500"></span>
                    <div>
                        <div class="font-semibold text-red-800 dark:text-red-300">SLMM unreachable</div>
                        <div class="text-xs text-red-700 dark:text-red-400">${_esc(errs || 'no details')}</div>
                    </div>
                </div>`;
        }
    } catch (e) {
        document.getElementById('health-banner').innerHTML = `
            <div class="text-red-600 dark:text-red-400 text-sm font-medium">
                Failed to load SLMM overview: ${_esc(e.message)}
            </div>`;
    } finally {
        lbl.textContent = '↻ Refresh';
    }
}

async function sendRaw() {
    const path = document.getElementById('raw-path').value.trim().replace(/^\//, '');
    if (!path) return;
    const pre = document.getElementById('raw-response');
    pre.classList.remove('hidden');
    pre.textContent = 'Loading…';
    try {
        const r = await fetch('/api/slmm/' + path);
        const text = await r.text();
        try {
            const j = JSON.parse(text);
            pre.textContent = `HTTP ${r.status}\n\n${JSON.stringify(j, null, 2)}`;
        } catch {
            pre.textContent = `HTTP ${r.status}\n\n${text.slice(0, 8000)}`;
        }
    } catch (e) {
        pre.textContent = 'Error: ' + e.message;
    }
}

async function loadMonitors() {
    const el = document.getElementById('monitor-list');
    try {
        const r = await fetch('/api/slmm/roster');
        if (!r.ok) throw new Error('HTTP ' + r.status);
        const d = await r.json();
        const devices = d.devices || [];
        if (!devices.length) {
            el.innerHTML = '<p class="text-gray-500 dark:text-gray-400">No devices configured.</p>';
            return;
        }
        el.innerHTML = devices.map(dev => {
            const on = !!dev.monitor_enabled;
            const reach = dev.status ? dev.status.is_reachable : null;
            const reachDot = reach === false
                ? '<span class="w-2 h-2 rounded-full bg-red-500 inline-block" title="unreachable"></span>'
                : '<span class="w-2 h-2 rounded-full bg-green-500 inline-block" title="reachable"></span>';
            return `
            <div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-700 py-2">
                <div class="flex items-center gap-2">
                    ${reachDot}
                    <span class="font-mono text-gray-900 dark:text-white">${_esc(dev.unit_id)}</span>
                    <span class="text-xs text-gray-500 dark:text-gray-400">${_esc(dev.host)}:${_esc(dev.tcp_port)}</span>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-xs font-medium px-2 py-0.5 rounded ${on
                        ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
                        : 'bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-gray-400'}">${on ? '24/7 ON' : 'OFF'}</span>
                    <button onclick="toggleMonitor('${_esc(dev.unit_id)}', ${!on})"
                            class="px-3 py-1 text-xs rounded text-white ${on
                                ? 'bg-red-600 hover:bg-red-700' : 'bg-seismo-orange hover:bg-orange-600'}">
                        ${on ? 'Disable' : 'Enable'}
                    </button>
                </div>
            </div>`;
        }).join('');
    } catch (e) {
        el.innerHTML = `<p class="text-red-600 dark:text-red-400">Failed to load devices: ${_esc(e.message)}</p>`;
    }
}

async function toggleMonitor(unitId, enable) {
    const action = enable ? 'start' : 'stop';
    try {
        const r = await fetch(`/api/slmm/${encodeURIComponent(unitId)}/monitor/${action}`, { method: 'POST' });
        if (!r.ok) throw new Error('HTTP ' + r.status);
        await loadMonitors();
    } catch (e) {
        alert('Toggle failed: ' + e.message);
    }
}

loadSlmmOverview();
loadMonitors();
setInterval(() => { loadSlmmOverview(); loadMonitors(); }, 30000);
</script>
{% endblock %}