{% extends "base.html" %}
{% block title %}{{ "Konto bearbeiten" if account else "Neues Konto" }} — IMAP Mail Filter{% endblock %}
{% block content %}
<h1>{{ "Konto bearbeiten" if account else "Neues Konto" }}</h1>

<form id="account-form">
    <fieldset>
        <legend>IMAP-Einstellungen</legend>
        <label>
            Name
            <input type="text" name="name" value="{{ account.name if account else '' }}" required placeholder="z.B. Arbeit, Privat">
        </label>
        <div class="grid">
            <label>
                IMAP-Server
                <input type="text" name="imap_host" value="{{ account.imap_host if account else '' }}" required placeholder="imap.example.com">
            </label>
            <label>
                Port
                <input type="number" name="imap_port" value="{{ account.imap_port if account else 993 }}" required>
            </label>
        </div>
        <div class="grid">
            <label>
                Benutzername
                <input type="text" name="username" value="{{ account.username if account else '' }}" required>
            </label>
            <label>
                Passwort
                <input type="password" name="password" value="" placeholder="{{ '(unverändert)' if account else '' }}">
            </label>
        </div>
        <label>
            <input type="checkbox" name="use_ssl" {{ 'checked' if (not account or account.use_ssl) else '' }}>
            SSL verwenden
        </label>
        <button type="button" class="outline" onclick="testConnection()" id="test-btn">Verbindung testen</button>
        <div id="test-result" style="display:none; margin-bottom:1rem; padding:0.75rem; border-radius:4px;"></div>
        <label>
            Polling-Intervall (Sekunden)
            <input type="number" name="poll_interval_seconds" value="{{ account.poll_interval_seconds if account else 120 }}" min="30">
        </label>
        <label>
            <input type="checkbox" name="enabled" {{ 'checked' if (not account or account.enabled) else '' }}>
            Konto aktiv
        </label>
    </fieldset>

    <fieldset>
        <legend>SMTP-Einstellungen (optional, für Weiterleitung)</legend>
        <div class="grid">
            <label>
                SMTP-Server
                <input type="text" name="smtp_host" value="{{ account.smtp_host if account else '' }}" placeholder="smtp.example.com">
            </label>
            <label>
                SMTP-Port
                <input type="number" name="smtp_port" value="{{ account.smtp_port if account else 465 }}">
            </label>
        </div>
        <div class="grid">
            <label>
                SMTP-Benutzer
                <input type="text" name="smtp_username" value="{{ account.smtp_username if account else '' }}">
            </label>
            <label>
                SMTP-Passwort
                <input type="password" name="smtp_password" value="" placeholder="{{ '(unverändert)' if account else '' }}">
            </label>
        </div>
    </fieldset>

    <div role="group">
        <button type="submit">{{ "Speichern" if account else "Erstellen" }}</button>
        <a href="/accounts" role="button" class="outline">Abbrechen</a>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
async function testConnection() {
    const form = document.getElementById('account-form');
    const host = form.imap_host.value;
    const port = parseInt(form.imap_port.value);
    const username = form.username.value;
    const password = form.password.value;
    const use_ssl = form.use_ssl.checked;
    const resultDiv = document.getElementById('test-result');
    const btn = document.getElementById('test-btn');

    if (!host || !username) {
        resultDiv.style.display = 'block';
        resultDiv.style.background = '#fff3cd';
        resultDiv.style.color = '#856404';
        resultDiv.textContent = 'Bitte Server und Benutzername ausfüllen.';
        return;
    }

    {% if account %}
    // Bestehendes Konto: wenn kein neues Passwort eingegeben, über Account-ID testen
    if (!password) {
        btn.setAttribute('aria-busy', 'true');
        btn.textContent = 'Teste...';
        resultDiv.style.display = 'none';
        try {
            const resp = await fetch('/api/accounts/{{ account.id }}/test', {method: 'POST'});
            const data = await resp.json();
            resultDiv.style.display = 'block';
            resultDiv.style.background = data.success ? '#d4edda' : '#f8d7da';
            resultDiv.style.color = data.success ? '#155724' : '#721c24';
            resultDiv.textContent = data.success ? 'Verbindung erfolgreich!' : 'Verbindung fehlgeschlagen.';
        } catch(e) {
            resultDiv.style.display = 'block';
            resultDiv.style.background = '#f8d7da';
            resultDiv.style.color = '#721c24';
            resultDiv.textContent = 'Fehler: ' + e.message;
        }
        btn.removeAttribute('aria-busy');
        btn.textContent = 'Verbindung testen';
        return;
    }
    {% else %}
    if (!password) {
        resultDiv.style.display = 'block';
        resultDiv.style.background = '#fff3cd';
        resultDiv.style.color = '#856404';
        resultDiv.textContent = 'Bitte Passwort eingeben.';
        return;
    }
    {% endif %}

    btn.setAttribute('aria-busy', 'true');
    btn.textContent = 'Teste...';
    resultDiv.style.display = 'none';
    try {
        const resp = await fetch('/api/accounts/test-connection', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({imap_host: host, imap_port: port, username, password, use_ssl}),
        });
        const data = await resp.json();
        resultDiv.style.display = 'block';
        resultDiv.style.background = data.success ? '#d4edda' : '#f8d7da';
        resultDiv.style.color = data.success ? '#155724' : '#721c24';
        resultDiv.textContent = data.success ? 'Verbindung erfolgreich!' : 'Verbindung fehlgeschlagen.';
    } catch(e) {
        resultDiv.style.display = 'block';
        resultDiv.style.background = '#f8d7da';
        resultDiv.style.color = '#721c24';
        resultDiv.textContent = 'Fehler: ' + e.message;
    }
    btn.removeAttribute('aria-busy');
    btn.textContent = 'Verbindung testen';
}

document.getElementById('account-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = {
        name: form.name.value,
        imap_host: form.imap_host.value,
        imap_port: parseInt(form.imap_port.value),
        use_ssl: form.use_ssl.checked,
        username: form.username.value,
        poll_interval_seconds: parseInt(form.poll_interval_seconds.value),
        enabled: form.enabled.checked,
    };
    if (form.password.value) data.password = form.password.value;
    if (form.smtp_host.value) {
        data.smtp_host = form.smtp_host.value;
        data.smtp_port = parseInt(form.smtp_port.value);
        data.smtp_username = form.smtp_username.value;
        if (form.smtp_password.value) data.smtp_password = form.smtp_password.value;
    }

    {% if account %}
    const resp = await fetch('/api/accounts/{{ account.id }}', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data),
    });
    {% else %}
    if (!data.password) { alert('Passwort ist erforderlich'); return; }
    const resp = await fetch('/api/accounts/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data),
    });
    {% endif %}

    if (resp.ok) {
        window.location.href = '/accounts';
    } else {
        const err = await resp.json();
        alert('Fehler: ' + JSON.stringify(err));
    }
});
</script>
{% endblock %}