{% extends "base.html" %}

{% block title %}Логи сервера (online) - Automation Workspace Manager{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/server-logs-terminal.css">
<script src="/static/js/server-logs-view.js"></script>
<style>
    .server-logs-live-page {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: calc(100vh - 100px);
        max-height: calc(100vh - 100px);
        min-height: 480px;
        box-sizing: border-box;
    }
    .server-logs-live-toolbar,
    .server-logs-live-filters {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        flex-shrink: 0;
    }
    .server-logs-live-toolbar label,
    .server-logs-live-filters label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-700);
        cursor: pointer;
        user-select: none;
    }
    .server-logs-live-toolbar .form-group {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .server-logs-live-toolbar .form-group label {
        cursor: default;
    }
    .server-logs-live-toolbar select.form-control {
        width: auto;
        min-width: 88px;
        padding: 6px 28px 6px 10px;
    }
    .server-logs-live-filters .form-group {
        margin: 0;
        min-width: min(100%, 280px);
        flex: 1 1 240px;
    }
    .server-logs-live-filters .form-group label {
        display: block;
        margin-bottom: 4px;
        cursor: default;
    }
    .server-logs-level-chips {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .server-logs-level-chips label {
        padding: 4px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-secondary);
        font-weight: 600;
        font-size: 12px;
    }
    .server-logs-level-chips label:has(input:checked) {
        border-color: var(--primary);
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    }
    .server-logs-live-meta {
        font-size: 12px;
        color: var(--gray-500);
        white-space: nowrap;
    }
    .server-logs-live-status {
        margin-left: auto;
        font-size: 12px;
        color: var(--gray-500);
    }
    .server-logs-live-status.is-live { color: var(--success); }
    .server-logs-live-status.is-error { color: var(--danger); }
    .server-log-wrap.server-logs-live-wrap {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* Контейнер с фиксированной высотой — иначе scrollTop не работает (контент растягивает страницу) */
    .server-logs-live-wrap .server-log-content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: 100%;
        overflow: auto;
    }
</style>
{% endblock %}

{% block content %}
<div class="server-logs-live-page">
    <div class="server-logs-live-toolbar">
        <strong id="live-log-title">Логи (online)</strong>
        <div class="form-group">
            <label for="live-log-lines">Строк</label>
            <select id="live-log-lines" class="form-control" title="Сколько последних строк держать на экране">
                <option value="100">100</option>
                <option value="200" selected>200</option>
                <option value="300">300</option>
                <option value="500">500</option>
                <option value="1000">1000</option>
            </select>
        </div>
        <label for="live-log-autoscroll">
            <input type="checkbox" id="live-log-autoscroll" checked>
            Автопрокрутка
        </label>
        <button type="button" class="btn btn-secondary btn-sm" id="live-log-pause-btn">Пауза</button>
        <button type="button" class="btn btn-secondary btn-sm" id="live-log-clear-btn">Очистить экран</button>
        <button type="button" class="btn btn-secondary btn-sm" id="live-log-reset-filters-btn">Сбросить фильтры</button>
        <a class="btn btn-secondary btn-sm" href="/admin#section-server-logs">К администрированию</a>
        <span class="server-logs-live-status" id="live-log-status">Подключение…</span>
    </div>
    <div class="server-logs-live-filters" role="search" aria-label="Фильтры журнала">
        <div class="form-group">
            <label for="live-log-search">Поиск</label>
            <input type="search" id="live-log-search" class="form-control" placeholder="Текст, логгер, уровень…" autocomplete="off" spellcheck="false">
        </div>
        <div>
            <div style="font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:4px;">Уровни</div>
            <div class="server-logs-level-chips" id="live-log-levels">
                <label title="Отладочные сообщения"><input type="checkbox" data-level="DBG" id="live-log-level-dbg"> DBG</label>
                <label><input type="checkbox" data-level="INF" checked> INF</label>
                <label><input type="checkbox" data-level="WRN" checked> WRN</label>
                <label><input type="checkbox" data-level="ERR" checked> ERR</label>
                <label title="Строки без уровня (StatReload и т.п.)"><input type="checkbox" data-level="RAW" checked> Прочее</label>
            </div>
        </div>
        <span class="server-logs-live-meta" id="live-log-count" aria-live="polite"></span>
    </div>
    <div class="server-log-wrap server-logs-live-wrap">
        <div id="live-log-content" class="server-log-content"><div class="server-log-empty">Ожидание данных…</div></div>
    </div>
</div>
<script>
(function () {
    const ALLOWED_LINES = [100, 200, 300, 500, 1000];
    const params = new URLSearchParams(window.location.search || '');
    const fileName = (params.get('name') || 'server.log').trim() || 'server.log';
    const autoEl = document.getElementById('live-log-autoscroll');
    const linesEl = document.getElementById('live-log-lines');
    const statusEl = document.getElementById('live-log-status');
    const contentEl = document.getElementById('live-log-content');
    const pauseBtn = document.getElementById('live-log-pause-btn');
    const clearBtn = document.getElementById('live-log-clear-btn');
    const resetBtn = document.getElementById('live-log-reset-filters-btn');
    const searchEl = document.getElementById('live-log-search');
    const countEl = document.getElementById('live-log-count');
    const titleEl = document.getElementById('live-log-title');
    const levelInputs = Array.from(document.querySelectorAll('#live-log-levels input[data-level]'));

    function parseLinesParam(raw) {
        const n = Number(raw);
        return ALLOWED_LINES.includes(n) ? n : 200;
    }
    if (linesEl) {
        linesEl.value = String(parseLinesParam(params.get('lines') || linesEl.value));
    }
    if (params.get('debug') === '1') {
        const dbg = document.getElementById('live-log-level-dbg');
        if (dbg) dbg.checked = true;
    }
    const qParam = (params.get('q') || '').trim();
    if (qParam && searchEl) searchEl.value = qParam;
    titleEl.textContent = `Логи online — ${fileName}`;

    let offset = 0;
    let paused = false;
    let timer = null;
    let inFlight = false;
    let knownEntries = [];
    let searchTimer = null;

    function lineLimit() {
        return parseLinesParam(linesEl?.value);
    }

    function trimBuffer() {
        const limit = lineLimit();
        if (knownEntries.length > limit) {
            knownEntries = knownEntries.slice(-limit);
        }
    }

    function setStatus(text, kind) {
        statusEl.textContent = text;
        statusEl.classList.remove('is-live', 'is-error');
        if (kind) statusEl.classList.add(kind);
    }

    function currentLevels() {
        const levels = {};
        levelInputs.forEach((el) => {
            levels[el.getAttribute('data-level')] = !!el.checked;
        });
        return levels;
    }

    function wantAutoscroll() {
        return !!autoEl?.checked;
    }

    function filterOptions(scroll) {
        return {
            levels: currentLevels(),
            query: (searchEl?.value || '').trim(),
            maxVisible: lineLimit(),
            scrollToBottom: !!scroll,
            emptyDebugHint: 'Нет строк по фильтрам. Включите DBG или измените поиск.',
        };
    }

    function updateCount() {
        if (!countEl || !window.AwmServerLogs) return;
        const limit = lineLimit();
        const visible = window.AwmServerLogs.filterEntries(knownEntries, filterOptions(false));
        const shown = Math.min(visible.length, limit);
        countEl.textContent = `Показано ${shown} (лимит ${limit}) · буфер ${knownEntries.length}`;
    }

    function renderAll(scroll) {
        if (!window.AwmServerLogs) return;
        trimBuffer();
        const shouldScroll = scroll === true || (scroll !== false && wantAutoscroll());
        window.AwmServerLogs.renderInto(contentEl, knownEntries, filterOptions(shouldScroll));
        updateCount();
    }

    async function pollOnce() {
        if (paused || inFlight) return;
        inFlight = true;
        try {
            const limit = lineLimit();
            const url = `/api/admin/server-logs/${encodeURIComponent(fileName)}/follow?offset=${offset}&initial_lines=${limit}`;
            const res = await fetch(url, { credentials: 'same-origin' });
            if (res.status === 401 || res.status === 403) {
                setStatus('Нет доступа — войдите снова', 'is-error');
                stop();
                return;
            }
            if (!res.ok) {
                const err = await res.json().catch(() => ({}));
                throw new Error(err.detail || `HTTP ${res.status}`);
            }
            const data = await res.json();
            if (data.reset) {
                knownEntries = [];
                offset = 0;
                setStatus('Журнал ротирован — перечитываем…', 'is-error');
                inFlight = false;
                return pollOnce();
            }
            const entries = Array.isArray(data.entries) ? data.entries : [];
            if (offset === 0) {
                knownEntries = entries.slice(-limit);
                renderAll(true);
            } else if (entries.length) {
                knownEntries = knownEntries.concat(entries);
                trimBuffer();
                renderAll(wantAutoscroll());
            }
            offset = Number(data.offset || offset);
            setStatus(`Online · ${fileName} · offset ${offset}`, 'is-live');
        } catch (e) {
            setStatus(`Ошибка: ${e.message || e}`, 'is-error');
        } finally {
            inFlight = false;
        }
    }

    function start() {
        stop();
        paused = false;
        pauseBtn.textContent = 'Пауза';
        pollOnce();
        timer = window.setInterval(pollOnce, 1500);
    }

    function stop() {
        if (timer) {
            window.clearInterval(timer);
            timer = null;
        }
    }

    function scheduleRender() {
        if (searchTimer) window.clearTimeout(searchTimer);
        searchTimer = window.setTimeout(() => renderAll(false), 180);
    }

    pauseBtn.addEventListener('click', () => {
        paused = !paused;
        pauseBtn.textContent = paused ? 'Продолжить' : 'Пауза';
        setStatus(paused ? 'Пауза' : `Online · ${fileName}`, paused ? '' : 'is-live');
        if (!paused) pollOnce();
    });
    clearBtn.addEventListener('click', () => {
        knownEntries = [];
        renderAll(true);
    });
    resetBtn.addEventListener('click', () => {
        if (searchEl) searchEl.value = '';
        levelInputs.forEach((el) => {
            const lvl = el.getAttribute('data-level');
            el.checked = lvl !== 'DBG';
        });
        renderAll(false);
    });
    linesEl?.addEventListener('change', () => {
        trimBuffer();
        // Перечитать хвост под новый лимит, если ещё нет полного буфера с offset=0
        offset = 0;
        knownEntries = [];
        renderAll(true);
        pollOnce();
    });
    autoEl?.addEventListener('change', () => {
        if (wantAutoscroll() && window.AwmServerLogs) {
            window.AwmServerLogs.scrollElementToBottom(contentEl);
        }
    });
    searchEl?.addEventListener('input', scheduleRender);
    levelInputs.forEach((el) => el.addEventListener('change', () => renderAll(false)));

    start();
    window.addEventListener('beforeunload', stop);
})();
</script>
{% endblock %}