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

<h2 class="d-flex justify-content-between align-items-center">
    Dashboard
    <span id="dashboard-timer" class="badge bg-success">
        Nächste Prüfung in -- Sekunden
    </span>
</h2>
<div class="row row-cols-1 row-cols-md-6 g-3">
    {% for d in devices %}
    <div class="col">
        <div class="card text-center p-2">
            <div class="card-header">{{ d[1] }}</div> <!-- Name -->
            <div class="card-body">
                <span class="fw-bold" style="color: 
                    {% if d[2] == 0 %}gray
                    {% elif status[d[0]] == 'online' %}green
                    {% elif status[d[0]] == 'offline' %}red
                    {% else %}black
                    {% endif %};">
                    {% if d[2] == 0 %}
                        Deaktiviert
                    {% else %}
                        {% if status[d[0]] == 'online' %}
                            Online
                        {% elif status[d[0]] == 'offline' %}
                            Offline<br>
                            {% if last_seen[d[0]] %}
                                {{ last_seen[d[0]][0] }}<br>
                                {{ last_seen[d[0]][1] }}
                            {% endif %}
                        {% else %}
                            Unbekannt
                        {% endif %}
                    {% endif %}
                </span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

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

    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();
    }

    function updateTimer() {
        const now = Date.now();
        const elapsed = now - lastUpdateTime;
        const remainingMs = intervalMilliseconds - (elapsed % intervalMilliseconds);
        const remainingSec = Math.ceil(remainingMs / 1000);
        document.getElementById("dashboard-timer").innerText =
            `Nächste Prüfung in ${remainingSec} Sekunden`;

        if (remainingSec <= 1) {
            // Timer abgelaufen → Reload starten
            window.location.reload();
        }
    }

    function fetchLastLog() {
        fetch("{{ url_for('get_log') }}")
            .then(response => response.text())
            .then(data => {
                const lines = data.split("\n");
                let lastSepIndex = -1;
                for (let i = lines.length - 1; i >= 0; i--) {
                    if (lines[i].startsWith("--------------------------------------------------------------------")) {
                        lastSepIndex = i;
                        break;
                    }
                }
                if (lastSepIndex >= 0 && lastSepIndex + 1 < lines.length) {
                    const firstLine = lines[lastSepIndex + 1];
                    const match = firstLine.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
                    if (match) lastUpdateTime = parseLogTimestamp(match[1]);
                }
            })
            .catch(err => console.error("Fehler beim Laden der Logs:", err));
    }

    // Timer alle 1 Sekunde aktualisieren
    setInterval(updateTimer, 1000);

    // einmal beim Laden die letzte Log-Zeit setzen
    fetchLastLog();
});
</script>

{% endblock %}