{% extends "base.html" %}

{% block title %}{{ unit_id }} - Sound Level Meter{% endblock %}

{% block content %}
<div class="mb-6">
    {% if from_project and project %}
        <nav class="flex items-center space-x-2 text-sm">
            <a href="/projects" class="text-gray-500 hover:text-seismo-orange">Projects</a>
            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <a href="/projects/{{ from_project }}" class="text-seismo-orange hover:text-seismo-orange-dark flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                {{ project.name }}
            </a>
        </nav>
    {% else %}
        <a href="#" onclick="goBack(event)" class="text-seismo-orange hover:text-seismo-orange-dark flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            <span id="back-link-text">Back to Sound Level Meters</span>
        </a>
    {% endif %}

    <script>
    function goBack(event) {
        event.preventDefault();

        // Check if there's a previous page in history
        // and it's from the same site (not external)
        if (window.history.length > 1 && document.referrer) {
            const referrer = new URL(document.referrer);
            const current = new URL(window.location.href);

            // If referrer is from the same origin, go back
            if (referrer.origin === current.origin) {
                window.history.back();
                return;
            }
        }

        // Otherwise, go to SLM dashboard
        window.location.href = '/sound-level-meters';
    }

    // Update the back link text based on referrer
    document.addEventListener('DOMContentLoaded', function() {
        const backText = document.getElementById('back-link-text');
        if (backText && document.referrer) {
            try {
                const referrer = new URL(document.referrer);
                const current = new URL(window.location.href);

                // Only update if from same origin
                if (referrer.origin === current.origin) {
                    if (referrer.pathname.includes('/sound-level-meters')) {
                        backText.textContent = 'Back to Sound Level Meters';
                    } else if (referrer.pathname.includes('/roster')) {
                        backText.textContent = 'Back to Roster';
                    } else if (referrer.pathname.includes('/projects')) {
                        backText.textContent = 'Back to Projects';
                    } else if (referrer.pathname === '/') {
                        backText.textContent = 'Back to Dashboard';
                    }
                }
            } catch (e) {
                // Invalid referrer, keep default text
            }
        }
    });
    </script>
</div>

<div class="mb-8">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center">
                <svg class="w-8 h-8 mr-3 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3">
                    </path>
                </svg>
                {{ unit_id }}
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">
                {{ unit.slm_model or 'NL-43' }} Sound Level Meter
            </p>
        </div>
        <div class="flex gap-2">
            <span class="px-3 py-1 rounded-full text-sm font-medium
                         {% if unit.deployed %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                         {% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200{% endif %}">
                {% if unit.deployed %}Deployed{% else %}Benched{% endif %}
            </span>
        </div>
    </div>
</div>

<!-- Command Center -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
    <div id="slm-command-center"
         hx-get="/api/slm-dashboard/live-view/{{ unit_id }}"
         hx-trigger="load"
         hx-swap="innerHTML">
        <div class="text-center py-8 text-gray-500">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-seismo-orange mx-auto mb-4"></div>
            <p>Loading command center...</p>
        </div>
    </div>
</div>

<!-- Alerts -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mt-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white flex items-center gap-2">Alerts
                <span id="alert-state-badge" class="hidden text-xs px-2 py-0.5 rounded-full"></span>
            </h2>
            <p class="text-xs text-gray-500 dark:text-gray-400">Threshold rules evaluated on this device's live feed. An enabled alert keeps the device monitored 24/7.</p>
        </div>
        <button onclick="openAlertForm()" type="button"
                class="px-3 py-1.5 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">+ Add alert</button>
    </div>

    <div id="alert-rules-list" class="space-y-2"></div>

    <!-- create / edit form -->
    <div id="alert-form" class="hidden mt-4 p-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900/40">
        <input type="hidden" id="ar-id">
        <div class="grid sm:grid-cols-2 gap-3 mb-3">
            <div>
                <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Name</label>
                <input id="ar-name" type="text" placeholder="e.g. Night noise limit"
                       class="w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-gray-800 dark:text-gray-200">
            </div>
            <label class="flex items-end gap-2 text-sm text-gray-700 dark:text-gray-300 pb-1">
                <input type="checkbox" id="ar-enabled" checked class="rounded"> Enabled
            </label>
        </div>

        <div class="flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
            <span>Alert when</span>
            <select id="ar-metric" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
                <option value="leq">Leq</option><option value="lp">Lp</option>
                <option value="lmax">Lmax</option><option value="lpeak">Lpeak</option>
                <option value="ln1">L1</option><option value="ln2">L10</option>
            </select>
            <span>is</span>
            <select id="ar-comparison" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
                <option value="above">above</option><option value="below">below</option>
            </select>
            <input id="ar-threshold" type="number" step="0.1" placeholder="65"
                   class="w-20 px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"> <span>dB</span>
            <span>for</span>
            <input id="ar-duration" type="number" min="0" value="0"
                   class="w-20 px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"> <span>seconds</span>
        </div>

        <div class="mt-3">
            <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                <input type="checkbox" id="ar-sched-on" onchange="toggleSchedule()" class="rounded"> Only during certain hours
            </label>
            <div id="ar-sched" class="hidden mt-2 flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                <span>from</span><input id="ar-start" type="time" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
                <span>to</span><input id="ar-end" type="time" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
                <span class="ml-2">on</span>
                <span id="ar-days" class="flex gap-1"></span>
            </div>
        </div>

        <details class="mt-3 text-sm text-gray-600 dark:text-gray-400">
            <summary class="cursor-pointer select-none">Advanced</summary>
            <div class="mt-2 flex flex-wrap items-center gap-3">
                <span>Clear margin</span><input id="ar-margin" type="number" step="0.1" value="2"
                    class="w-16 px-2 py-1 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"><span>dB (hysteresis)</span>
                <span>Cooldown</span><input id="ar-cooldown" type="number" min="0" value="300"
                    class="w-20 px-2 py-1 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"><span>s</span>
            </div>
        </details>

        <div class="mt-4 flex gap-2">
            <button onclick="saveAlertRule()" type="button" class="px-3 py-1.5 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">Save</button>
            <button onclick="closeAlertForm()" type="button" class="px-3 py-1.5 text-sm rounded-lg border border-slate-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700">Cancel</button>
        </div>
    </div>

    <!-- Alert history -->
    <div class="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">History</h3>
            <button onclick="loadAlertEvents()" type="button" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">Refresh</button>
        </div>
        <div id="alert-events" class="space-y-2"></div>
    </div>
</div>

<script>
const ALERT_UNIT = "{{ unit_id }}";
const METRIC_LABELS = { leq: 'Leq', lp: 'Lp', lmax: 'Lmax', lpeak: 'Lpeak', ln1: 'L1', ln2: 'L10' };
const DAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];  // Mon=0 .. Sun=6

// Render the day checkboxes once.
(function () {
    const wrap = document.getElementById('ar-days');
    DAY_LABELS.forEach((lbl, i) => {
        const l = document.createElement('label');
        l.className = 'inline-flex items-center gap-0.5';
        l.innerHTML = `<input type="checkbox" id="ar-day-${i}" class="rounded"><span class="ml-0.5">${lbl}</span>`;
        wrap.appendChild(l);
    });
})();

function condText(r) {
    const m = METRIC_LABELS[r.metric] || r.metric;
    let s = `${m} ${r.comparison} ${r.threshold_db} dB`;
    if (r.duration_s) s += ` for ${r.duration_s}s`;
    if (r.schedule_start && r.schedule_end) s += ` · ${r.schedule_start}–${r.schedule_end}`;
    return s;
}

function renderRule(r) {
    const row = document.createElement('div');
    row.className = 'flex items-center justify-between gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700';
    row.innerHTML = `<div class="min-w-0">
        <div class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">${r.name}${r.enabled ? '' : ' <span class="text-xs text-gray-400">(disabled)</span>'}</div>
        <div class="text-xs text-gray-500">${condText(r)}</div></div>
        <div class="shrink-0 flex items-center gap-3 text-xs">
            <button data-act="edit" class="text-seismo-orange hover:underline">Edit</button>
            <button data-act="del" class="text-red-600 hover:underline">Delete</button>
        </div>`;
    row.querySelector('[data-act="edit"]').onclick = () => openAlertForm(r);
    row.querySelector('[data-act="del"]').onclick = () => deleteAlertRule(r.id);
    return row;
}

async function loadAlertRules() {
    const list = document.getElementById('alert-rules-list');
    try {
        const j = await (await fetch(`/api/slmm/${ALERT_UNIT}/alerts/rules`)).json();
        const rules = j.rules || [];
        if (!rules.length) { list.innerHTML = '<div class="text-sm text-gray-400">No alerts configured.</div>'; return; }
        list.innerHTML = '';
        rules.forEach(r => list.appendChild(renderRule(r)));
    } catch (e) { list.innerHTML = '<div class="text-sm text-red-500">Failed to load alerts.</div>'; }
}

function toggleSchedule() {
    document.getElementById('ar-sched').classList.toggle('hidden', !document.getElementById('ar-sched-on').checked);
}

function openAlertForm(r) {
    document.getElementById('alert-form').classList.remove('hidden');
    document.getElementById('ar-id').value = r ? r.id : '';
    document.getElementById('ar-name').value = r ? r.name : '';
    document.getElementById('ar-metric').value = r ? r.metric : 'leq';
    document.getElementById('ar-comparison').value = r ? r.comparison : 'above';
    document.getElementById('ar-threshold').value = (r && r.threshold_db != null) ? r.threshold_db : '';
    document.getElementById('ar-duration').value = r ? r.duration_s : 0;
    document.getElementById('ar-enabled').checked = r ? r.enabled : true;
    document.getElementById('ar-margin').value = r ? r.clear_margin_db : 2;
    document.getElementById('ar-cooldown').value = r ? r.cooldown_s : 300;
    const hasSched = !!(r && r.schedule_start && r.schedule_end);
    document.getElementById('ar-sched-on').checked = hasSched;
    document.getElementById('ar-start').value = hasSched ? r.schedule_start : '';
    document.getElementById('ar-end').value = hasSched ? r.schedule_end : '';
    const days = (r && r.schedule_days) ? r.schedule_days.split(',') : [];
    DAY_LABELS.forEach((_, i) => { document.getElementById('ar-day-' + i).checked = days.includes(String(i)); });
    toggleSchedule();
}
function closeAlertForm() { document.getElementById('alert-form').classList.add('hidden'); }

async function saveAlertRule() {
    const id = document.getElementById('ar-id').value;
    const threshold = parseFloat(document.getElementById('ar-threshold').value);
    if (isNaN(threshold)) { if (window.showToast) showToast('Enter a threshold', 'error'); return; }
    const schedOn = document.getElementById('ar-sched-on').checked;
    const days = DAY_LABELS.map((_, i) => document.getElementById('ar-day-' + i).checked ? i : null).filter(v => v !== null);
    const payload = {
        name: document.getElementById('ar-name').value || 'Alert',
        metric: document.getElementById('ar-metric').value,
        comparison: document.getElementById('ar-comparison').value,
        threshold_db: threshold,
        duration_s: parseInt(document.getElementById('ar-duration').value) || 0,
        clear_margin_db: parseFloat(document.getElementById('ar-margin').value) || 2,
        cooldown_s: parseInt(document.getElementById('ar-cooldown').value) || 300,
        schedule_start: schedOn ? (document.getElementById('ar-start').value || null) : null,
        schedule_end: schedOn ? (document.getElementById('ar-end').value || null) : null,
        schedule_days: (schedOn && days.length) ? days.join(',') : null,
        enabled: document.getElementById('ar-enabled').checked,
    };
    const url = id ? `/api/slmm/${ALERT_UNIT}/alerts/rules/${id}` : `/api/slmm/${ALERT_UNIT}/alerts/rules`;
    try {
        const r = await fetch(url, { method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
        if (!r.ok) throw new Error('save failed');
        closeAlertForm(); loadAlertRules();
        if (window.showToast) showToast('Alert saved', 'success');
    } catch (e) { if (window.showToast) showToast('Failed to save alert', 'error'); }
}

async function deleteAlertRule(id) {
    if (!confirm('Delete this alert rule?')) return;
    try { await fetch(`/api/slmm/${ALERT_UNIT}/alerts/rules/${id}`, { method: 'DELETE' }); loadAlertRules(); }
    catch (e) { if (window.showToast) showToast('Failed to delete', 'error'); }
}

// ---- alert history (events) ----------------------------------------------

function fmtAlertTime(iso) {
    if (!iso) return '';
    return new Date(iso.endsWith('Z') ? iso : iso + 'Z').toLocaleString();
}

function updateAlertState(events) {
    const badge = document.getElementById('alert-state-badge');
    badge.classList.remove('hidden');
    const active = events.filter(e => e.status === 'active').length;
    if (active) {
        badge.textContent = `● ${active} active`;
        badge.className = 'text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300';
    } else {
        badge.textContent = '✓ All clear';
        badge.className = 'text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
    }
}

function renderEvent(e) {
    const m = METRIC_LABELS[e.metric] || e.metric;
    const active = e.status === 'active';
    const row = document.createElement('div');
    row.className = 'flex items-center justify-between gap-2 px-3 py-2 rounded-lg border ' +
        (active ? 'border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900/20'
                : 'border-slate-200 dark:border-slate-700');
    const when = active ? `since ${fmtAlertTime(e.onset_at)}`
                        : `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`;
    const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : '';
    const ack = e.acknowledged_at ? ` · ack'd${e.acknowledged_by ? ' by ' + e.acknowledged_by : ''}` : '';
    row.innerHTML = `<div class="min-w-0">
        <div class="text-sm truncate">
            <span class="${active ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-800 dark:text-gray-200'}">${e.rule_name || 'Alert'}</span>
            <span class="text-xs text-gray-500"> · ${m} ${e.threshold_db} dB</span>
        </div>
        <div class="text-xs text-gray-500">${when}${peak}${ack}</div></div>`;
    if (!e.acknowledged_at) {
        const btn = document.createElement('button');
        btn.className = 'shrink-0 text-xs text-seismo-orange hover:underline';
        btn.textContent = 'Ack';
        btn.onclick = () => ackEvent(e.id);
        row.appendChild(btn);
    }
    return row;
}

async function loadAlertEvents() {
    const list = document.getElementById('alert-events');
    try {
        const j = await (await fetch(`/api/slmm/${ALERT_UNIT}/alerts/events?limit=50`)).json();
        const events = j.events || [];
        updateAlertState(events);
        if (!events.length) { list.innerHTML = '<div class="text-sm text-gray-400">No alerts have fired.</div>'; return; }
        list.innerHTML = '';
        events.forEach(e => list.appendChild(renderEvent(e)));
    } catch (e) { list.innerHTML = '<div class="text-sm text-red-500">Failed to load history.</div>'; }
}

async function ackEvent(id) {
    try { await fetch(`/api/slmm/${ALERT_UNIT}/alerts/events/${id}/ack`, { method: 'POST' }); loadAlertEvents(); }
    catch (e) { if (window.showToast) showToast('Failed to acknowledge', 'error'); }
}

loadAlertRules();
loadAlertEvents();
setInterval(loadAlertEvents, 20000);   // surface new breaches / clears
</script>
{% endblock %}