{% extends "base.html" %}
{% block title %}Dashboard — IMAP Mail Filter{% endblock %}
{% block content %}
<h1>Dashboard</h1>

{% if accounts %}
<div class="grid">
    {% for acc in accounts %}
    <article>
        <header>
            <hgroup>
                <h3>{{ acc.name }}</h3>
                <p>{{ acc.username }}@{{ acc.imap_host }}</p>
            </hgroup>
        </header>
        <p>
            <strong>Status:</strong>
            {% if acc.enabled %}
            <ins>Aktiv</ins>
            {% else %}
            <del>Deaktiviert</del>
            {% endif %}
        </p>
        <p><strong>Polling:</strong> alle {{ acc.poll_interval_seconds }}s</p>
        <p><strong>Letzter Poll:</strong> {{ acc.last_poll_at or "Noch nie" }}</p>
        <p><strong>Filterregeln:</strong> {{ acc.filter_rule_count }}</p>
        <p><strong>Verarbeitet:</strong> <span id="processed-{{ acc.id }}">...</span> Mails</p>
        <footer>
            <div role="group">
                <button class="outline" onclick="pollNow({{ acc.id }})">Jetzt prüfen</button>
                <button class="outline" onclick="testConnection({{ acc.id }})">Verbindungstest</button>
                <button class="outline contrast" onclick="resetProcessed({{ acc.id }}, '{{ acc.name }}')">Zurücksetzen</button>
            </div>
        </footer>
    </article>
    {% endfor %}
</div>
{% else %}
<article>
    <p>Noch keine Konten eingerichtet. <a href="/accounts/new">Konto hinzufügen</a></p>
</article>
{% endif %}

<div id="status-message" style="display:none"></div>
{% endblock %}

{% block scripts %}
<script>
async function pollNow(accountId) {
    const msg = document.getElementById('status-message');
    msg.style.display = 'block';
    msg.textContent = 'Polling läuft...';
    msg.setAttribute('role', 'status');
    try {
        const resp = await fetch(`/api/accounts/${accountId}/poll-now`, {method: 'POST'});
        const data = await resp.json();
        msg.textContent = data.message;
        setTimeout(() => location.reload(), 1500);
    } catch(e) {
        msg.textContent = 'Fehler: ' + e.message;
    }
}

async function testConnection(accountId) {
    const msg = document.getElementById('status-message');
    msg.style.display = 'block';
    msg.textContent = 'Teste Verbindung...';
    try {
        const resp = await fetch(`/api/accounts/${accountId}/test`, {method: 'POST'});
        const data = await resp.json();
        msg.textContent = data.message;
    } catch(e) {
        msg.textContent = 'Fehler: ' + e.message;
    }
}

async function resetProcessed(accountId, name) {
    if (!confirm(`Verarbeitung für "${name}" zurücksetzen?\n\nAlle Mails werden beim nächsten Poll erneut gegen die Filterregeln geprüft.`)) return;
    const msg = document.getElementById('status-message');
    msg.style.display = 'block';
    try {
        const resp = await fetch(`/api/accounts/${accountId}/processed`, {method: 'DELETE'});
        const data = await resp.json();
        msg.textContent = data.message;
        loadProcessedCounts();
    } catch(e) {
        msg.textContent = 'Fehler: ' + e.message;
    }
}

async function loadProcessedCounts() {
    {% for acc in accounts %}
    fetch(`/api/accounts/{{ acc.id }}/processed`)
        .then(r => r.json())
        .then(d => {
            const el = document.getElementById('processed-{{ acc.id }}');
            if (el) el.textContent = d.processed_count;
        })
        .catch(() => {});
    {% endfor %}
}

loadProcessedCounts();
</script>
{% endblock %}