{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}System Log{% endblock %}
{% block content %}
    {{ page_header('System Log') }}
    <div x-data='logViewer({{ rows|tojson }})' x-init="startTail()">
        <div class="flex flex-wrap gap-2 mb-4 items-center">
            <select x-model="level" @change="reload()"
                    class="rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">
                <option value="all">All levels</option>
                <option value="info">Info</option>
                <option value="warn">Warn</option>
                <option value="error">Error</option>
            </select>
            <select x-model="source" @change="reload()"
                    class="rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">
                {# The product's own services only. #}
                <option value="all">All sources</option>
                <option value="webui">Web UI</option>
                <option value="console">Console</option>
                <option value="gateway">SSH gateway</option>
                <option value="netwatch">Net watchdog</option>
                <option value="simfailover">SIM failover</option>
                <option value="simdetect">SIM detection</option>
                <option value="update">Updater</option>
            </select>
            <select x-model="since" @change="reload()"
                    class="rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">
                <option value="">All time</option>
                <option value="900">Last 15 min</option>
                <option value="3600">Last 1 hour</option>
                <option value="86400">Last 24 hours</option>
            </select>
            <input type="text" x-model.debounce.300ms="search" @input="reload()" placeholder="Search messages…"
                   class="flex-1 min-w-[200px] rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm">
            <button type="button" @click="paused = !paused"
                    class="px-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 text-sm"
                    :class="paused ? 'bg-amber-100 dark:bg-amber-900/30' : ''">
                <span x-text="paused ? 'Resume' : 'Pause tail'"></span>
            </button>
            <span x-show="tzLabel" x-cloak class="w-full text-xs text-slate-500 font-mono"
                  :title="tzName ? 'Your browser timezone — the device may differ' : ''"
                  x-text="'Times shown in ' + tzLabel"></span>
        </div>

        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 max-h-[70vh] overflow-y-auto">
            {# Column header carries the timezone once, so rows don't repeat it. #}
            <div class="sticky top-0 z-10 flex gap-3 px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
                <span class="label-tech shrink-0 w-20">Time</span>
                <span class="label-tech shrink-0 w-12">Age</span>
                <span class="label-tech shrink-0 w-12">Level</span>
                <span class="label-tech shrink-0 w-20">Source</span>
                <span class="label-tech flex-1">Message</span>
            </div>
            <template x-for="r in rows" :key="r.ts + r.message">
                <div class="border-b border-slate-100 dark:border-slate-800 px-4 py-2 flex gap-3 text-sm font-mono items-start"
                     :class="{
                         'border-l-4 border-l-sky-500':    r.level === 'info',
                         'border-l-4 border-l-amber-500': r.level === 'warn',
                         'border-l-4 border-l-red-500':   r.level === 'error',
                     }">
                    <span class="text-slate-500 shrink-0 w-20 tnum" :title="fullTime(r.ts)"
                          x-text="clockTime(r.ts)"></span>
                    <span class="text-slate-400 shrink-0 w-12 tnum" :title="fullTime(r.ts)"
                          x-text="ago(r.ts)"></span>
                    <span class="uppercase text-xs font-semibold shrink-0 w-12"
                          :class="{'text-sky-600': r.level==='info','text-amber-600': r.level==='warn','text-red-600': r.level==='error'}"
                          x-text="r.level"></span>
                    <span class="text-slate-400 shrink-0 w-20" x-text="r.source"></span>
                    <span class="flex-1 break-words" x-text="r.message"></span>
                </div>
            </template>
            <div x-show="rows.length === 0" class="px-4 py-10 text-center text-slate-400 text-sm">No log entries match.</div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
<script>
function logViewer(initial) {
    return {
        rows: initial, level: 'all', source: 'all', since: '', search: '', paused: false,
        // Timestamps are unix epoch, so the browser renders them in the
        // viewer's timezone — which may not be the device's. Name the zone
        // in the header, and tick `now` so ages stay honest while paused.
        tzLabel: '', tzName: '', now: Date.now(),

        init() {
            try {
                this.tzName = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
                this.tzLabel = new Intl.DateTimeFormat([], { timeZoneName: 'short' })
                    .formatToParts(new Date())
                    .find(p => p.type === 'timeZoneName')?.value || '';
            } catch (e) { /* older browser — header just reads "Time" */ }
            setInterval(() => { this.now = Date.now(); }, 5000);
        },

        clockTime(ts) {
            return new Date(ts * 1000).toLocaleTimeString([], {
                hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
            });
        },

        // Compact age — the "Age" header supplies the "ago".
        ago(ts) {
            const s = Math.max(0, Math.round(this.now / 1000 - ts));
            if (s < 5) return 'now';
            if (s < 60) return s + 's';
            if (s < 3600) return Math.floor(s / 60) + 'm';
            if (s < 86400) return Math.floor(s / 3600) + 'h';
            return Math.floor(s / 86400) + 'd';
        },

        // Hover detail: the full date the compact row can't show.
        fullTime(ts) {
            return new Date(ts * 1000).toLocaleString([], {
                weekday: 'short', day: 'numeric', month: 'short', year: 'numeric',
                hour: '2-digit', minute: '2-digit', second: '2-digit',
                timeZoneName: 'short',
            });
        },

        async reload() {
            const q = new URLSearchParams({ level: this.level, source: this.source, since: this.since, search: this.search });
            const r = await fetch('/api/log/tail?' + q.toString());
            if (r.ok) this.rows = (await r.json()).rows.slice().reverse();
        },
        startTail() {
            setInterval(() => { if (!this.paused) this.reload(); }, 5000);
        },
    };
}
</script>
{% endblock %}