{% extends "base.html" %}
{% block page_title %}{{ t('logs.title') }}{% endblock %}
{% block content %}
<div class="card">
    <div class="logs-toolbar">
        <h2 class="logs-h2">{{ t('logs.journal') }}</h2>

        <div class="logs-chips" role="tablist" aria-label="{{ t('logs.level_filter') }}">
            <button class="logs-chip active" data-level="all">{{ t('logs.all') }}</button>
            <button class="logs-chip" data-level="info">INFO</button>
            <button class="logs-chip" data-level="warn">WARN</button>
            <button class="logs-chip" data-level="error">ERROR</button>
            <button class="logs-chip" data-level="debug">DEBUG</button>
        </div>

        <input type="search" class="input logs-search" id="logs-search" placeholder="{{ t('logs.search') }}">

        <label class="check-inline">
            <input type="checkbox" id="logs-autoscroll" checked>
            <span>{{ t('logs.autoscroll') }}</span>
        </label>
        <button class="btn ghost btn-sm" data-logs-copy>{{ t('logs.copy') }}</button>
        <button class="btn ghost btn-sm" data-logs-clear>{{ t('logs.clear') }}</button>
    </div>

    <pre id="log-stream" class="log-stream log-stream-tall">{{ t('logs.ready', version=VERSION) }}</pre>
</div>
{% endblock %}
{% block scripts %}
<script>
(function () {
    const stream = document.getElementById('log-stream');
    const search = document.getElementById('logs-search');
    const auto   = document.getElementById('logs-autoscroll');
    let activeLevel = 'all';
    let pollTimer = null;

    document.querySelectorAll('.logs-chip').forEach((c) => {
        c.addEventListener('click', () => {
            document.querySelectorAll('.logs-chip').forEach((x) => x.classList.remove('active'));
            c.classList.add('active');
            activeLevel = c.dataset.level;
            applyFilter();
        });
    });
    if (search) search.addEventListener('input', applyFilter);

    function applyFilter() {
        const q = (search.value || '').toLowerCase();
        const lines = stream.dataset.raw ? JSON.parse(stream.dataset.raw) : [];
        if (!lines.length) {
            stream.textContent = '— пока пусто —';
            return;
        }
        const out = [];
        for (const line of lines) {
            const lower = line.toLowerCase();
            // loguru renders the level word ("INFO", "WARNING", "ERROR", "DEBUG")
            // in the line, NOT in [brackets]. Match either form so user-supplied
            // lines (like our toast handlers) work the same way as runtime logs.
            if (activeLevel !== 'all') {
                const tok = activeLevel === 'warn' ? 'warning' : activeLevel;
                if (!lower.includes(tok)) continue;
            }
            if (q && !lower.includes(q)) continue;
            out.push(line);
        }
        stream.textContent = out.join('\n');
        if (auto.checked) stream.scrollTop = stream.scrollHeight;
    }

    // Poll the loguru-rotated log file every 2 seconds. Cheap — backend
    // serves last ~200 lines, full file read only when small. We cap at
    // ~2000 lines client-side so DOM doesn't bloat.
    function poll() {
        fetch('/api/logs/tail?n=200')
            .then(r => r.json())
            .then(d => {
                if (!d || !d.ok) return;
                const lines = d.lines || [];
                stream.dataset.raw = JSON.stringify(lines);
                applyFilter();
            })
            .catch(() => {});
    }
    poll();
    pollTimer = setInterval(poll, 2000);

    document.querySelector('[data-logs-copy]').addEventListener('click', () => {
        navigator.clipboard.writeText(stream.textContent || '');
        if (window.EmberToast) window.EmberToast('Лог скопирован', 'ok');
    });
    document.querySelector('[data-logs-clear]').addEventListener('click', () => {
        stream.dataset.raw = '[]';
        stream.textContent = '— очищено —';
    });

    // SPA navigation only fires `beforeunload` on a hard reload, so the
    // poller would survive routing to Dashboard/Warmup and keep hammering
    // `/api/logs/tail` every 2s forever. `window.__emberPagePollers` is
    // drained by `onPageMount` in app.js right BEFORE mounting the next
    // page, so each entry must be a no-arg cancel function.
    window.__emberPagePollers = window.__emberPagePollers || [];
    window.__emberPagePollers.push(() => clearInterval(pollTimer));
    window.addEventListener('beforeunload', () => clearInterval(pollTimer));
})();
</script>
{% endblock %}