{% extends "base.html" %}
{% set active_page = "log" %}
{% set main_class = "main-wide" %}
{% set message = None %}

{% block content %}
<div class="card card-table">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);">
        <h2 style="margin:0;border:none;padding:0;">Verarbeitungslog</h2>
        {% if logs %}
        <button type="button" class="btn btn-secondary btn-small" onclick="clearLog()">Log leeren</button>
        {% endif %}
    </div>
    {% if logs %}
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Zeitpunkt</th>
                <th>Art</th>
                <th>Betreff</th>
                <th>Absender</th>
                <th>Anhänge</th>
                <th>Gesendet an</th>
                <th>Status</th>
                <th>Fehlermeldung</th>
                <th>SMTP</th>
            </tr>
        </thead>
        <tbody>
            {% for log in logs %}
            <tr class="{% if log.status == 'error' %}row-error{% endif %}">
                <td>{{ log.id }}</td>
                <td>{{ log.timestamp }}</td>
                <td>
                    {% if log.get('beleg_type', 'eingang') == 'ausgang' %}
                        <span class="badge badge-warning">Ausgang</span>
                    {% else %}
                        <span class="badge badge-info">Eingang</span>
                    {% endif %}
                </td>
                <td>{{ log.email_subject or '-' }}</td>
                <td>{{ log.email_from or '-' }}</td>
                <td>{{ log.attachments_count }}</td>
                <td>{{ log.sent_to or '-' }}</td>
                <td>
                    {% if log.status == 'success' %}
                        <span class="badge badge-success">OK</span>
                    {% else %}
                        <span class="badge badge-error">Fehler</span>
                    {% endif %}
                </td>
                <td>{{ log.error_message or '-' }}</td>
                <td>
                    {% if log.smtp_log %}
                    <button type="button" class="btn btn-small btn-secondary" onclick="showSmtpLog({{ log.id }})">Anzeigen</button>
                    <script>window._smtpLogs = window._smtpLogs || {}; window._smtpLogs[{{ log.id }}] = {{ log.smtp_log | tojson }};</script>
                    {% else %}-{% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="text-muted">Noch keine Einträge vorhanden.</p>
    {% endif %}
</div>

<!-- SMTP Log Modal -->
<div id="smtpModal" class="modal-overlay" style="display:none;" onclick="if(event.target===this)closeSmtpModal()">
    <div class="modal" style="max-width:700px;">
        <div class="modal-header">
            <h3>SMTP-Protokoll</h3>
            <button type="button" class="modal-close" onclick="closeSmtpModal()">&times;</button>
        </div>
        <div class="modal-body" style="padding:1.25rem;background:var(--bg,#f5f5f5);">
            <pre id="smtpModalBody" style="margin:0;font-size:0.8rem;white-space:pre-wrap;word-break:break-all;"></pre>
        </div>
    </div>
</div>

<style>
.btn-small {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}
</style>

<script>
function showSmtpLog(logId) {
    const log = window._smtpLogs && window._smtpLogs[logId];
    if (!log) return;
    document.getElementById('smtpModalBody').textContent = log;
    document.getElementById('smtpModal').style.display = 'flex';
}

function closeSmtpModal() {
    document.getElementById('smtpModal').style.display = 'none';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeSmtpModal();
});

async function clearLog() {
    if (!confirm('Verarbeitungslog wirklich leeren?')) return;
    try {
        const resp = await fetch('/api/clear-log', {method: 'POST'});
        const data = await resp.json();
        if (data.success) {
            location.reload();
        }
    } catch (e) {
        alert('Fehler: ' + e.message);
    }
}
</script>
{% endblock %}