{% extends "base.html" %}
{% block content %}

<h2>Live Log</h2>

<button id="refresh-btn" class="btn btn-success mb-3">
    <span style="font-size: 1.2rem; color: white;">⟳</span> Logs aktualisieren
</button>

Nächstes Update in <span id="timer"></span> Sekunden

<div id="log-container">
    <div id="refresh-timer">
        Nächstes Update in <span id="timer"></span> Sekunden
    </div>
</div>

<script>
function parseLogTimestamp(ts) {
    const parts = ts.match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
    if (!parts) return Date.now();
    const [, year, month, day, hour, minute, second] = parts.map(Number);
    return new Date(year, month - 1, day, hour, minute, second).getTime();
}

document.addEventListener("DOMContentLoaded", () => {
    const intervalMinutes = {{ interval | int }};
    const intervalMilliseconds = intervalMinutes * 60 * 1000;
    let lastUpdateTime = Date.now();

    function fetchLog() {
        fetch("{{ url_for('get_log') }}")
            .then(res => res.text())
            .then(data => {
                const box = document.getElementById("log-box");
                const filteredLines = data
                    .split("\n");
                box.innerText = filteredLines.join("\n");
                box.scrollTop = box.scrollHeight;

                // letzte Separator-Linie
                let lastSep = -1;
                for (let i = filteredLines.length - 1; i >= 0; i--) {
                    if (filteredLines[i].startsWith("--------------------------------------------------------------------")) {
                        lastSep = i;
                        break;
                    }
                }

                if (lastSep >= 0 && lastSep + 1 < filteredLines.length) {
                    const firstLine = filteredLines[lastSep + 1];
                    const match = firstLine.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
                    if (match) {
                        lastUpdateTime = parseLogTimestamp(match[1]);
                    } else {
                        lastUpdateTime = Date.now();
                    }
                } else {
                    lastUpdateTime = Date.now();
                }
            })
            .catch(err => console.error(err));
    }

    function updateTimer() {
        const now = Date.now();
        const elapsed = now - lastUpdateTime;
        const remainingMs = intervalMilliseconds - (elapsed % intervalMilliseconds);
        const remainingSec = Math.ceil(remainingMs / 1000);
        document.getElementById("timer").innerText = remainingSec;
    }

    document.getElementById("refresh-btn").addEventListener("click", fetchLog);

    fetchLog();
    setInterval(fetchLog, intervalMilliseconds);
    setInterval(updateTimer, 1000);
});
</script>
{% endblock %}