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

<div class="grid">
    <article>
        <header><h3>Export</h3></header>
        <p>Aktuelle Konfiguration als YAML-Datei herunterladen.</p>
        <button onclick="exportYaml()">YAML exportieren</button>
        <pre id="yaml-preview" style="max-height: 400px; overflow-y: auto; display: none;"></pre>
    </article>

    <article>
        <header><h3>Import</h3></header>
        <p>YAML-Datei hochladen um Konten und Filterregeln zu importieren.</p>
        <form id="import-form">
            <input type="file" name="file" accept=".yaml,.yml" required>
            <button type="submit">Importieren</button>
        </form>
        <div id="import-result" style="display:none"></div>
    </article>
</div>
{% endblock %}

{% block scripts %}
<script>
async function exportYaml() {
    const resp = await fetch('/api/yaml/export');
    const text = await resp.text();
    const pre = document.getElementById('yaml-preview');
    pre.textContent = text;
    pre.style.display = 'block';

    // Also trigger download
    const blob = new Blob([text], {type: 'text/yaml'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'filters.yaml';
    a.click();
    URL.revokeObjectURL(url);
}

document.getElementById('import-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const resp = await fetch('/api/yaml/import', {method: 'POST', body: formData});
    const result = await resp.json();
    const div = document.getElementById('import-result');
    div.style.display = 'block';
    if (result.error) {
        div.innerHTML = `<article role="alert">Fehler: ${result.error}</article>`;
    } else {
        div.innerHTML = `<article>
            Import erfolgreich!<br>
            Konten erstellt: ${result.accounts_created}<br>
            Konten aktualisiert: ${result.accounts_updated}<br>
            Regeln erstellt: ${result.rules_created}
        </article>`;
    }
});
</script>
{% endblock %}