{% 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 g-3">
    {% for letter, group in grouped_devices.items() %}
    <h3>{{ letter }}</h3>
    <div class="row g-3">
        {% for d in group %}
        <div class="col-6 col-md-4 col-lg-3 col-xl-2">
            <div class="card text-center p-2"
                {% if last_seen.get(d[0]) %}
                    title="{{ last_seen[d[0]] }}"
                {% elif status[d[0]] == 'offline' %}
                    title="Noch nie online"
                {% endif %}>
                <div class="card-header">{{ d[1] }}</div>
                <div class="card-body">
                    <span class="fw-bold" style="color: 
                        {% if d[2] == 0 %}gray
                        {% elif status[d[0]] == 'online' %}green
                        {% else %}red
                        {% endif %};">
                        {% if d[2] == 0 %}
                            Deaktiviert
                        {% else %}
                            {% if status[d[0]] %}{{ status[d[0]]|capitalize }}{% else %}Unbekannt{% endif %}
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
        {% endfor %}
    </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 %}