{% extends 'admin_base.html.twig' %}

{% block title %}Elternbriefe – Fit wie ein Fisch{% endblock %}
{% block header_title %}<i class="fas fa-envelope me-2"></i>Elternbriefe{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/fisch-admin.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Elternbriefe & Infomails',
    icon: 'envelope',
    subtitle: 'Saison ' ~ seasonYear ~ ' — E-Mail nur Deutsch, Übersetzungen per Flaggen-Link auf der Webseite'
} %}

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show">{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}
{% endfor %}

<form method="post" action="{{ path('admin_fisch_parent_mail_send') }}" id="fischParentMailForm" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{ csrf_token('fisch_parent_mail_send') }}">

    <div class="fisch-card mb-4">
        <div class="card-header"><i class="fas fa-filter"></i> Empfänger</div>
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-6">
                    <label class="form-label fw-semibold" for="poolFilter">Schwimmbad</label>
                    <select class="form-select" name="pool_id" id="poolFilter">
                        <option value="all">Alle Schwimmbäder ({{ recipientCountAll }} Anmeldungen)</option>
                        {% for pool in pools %}
                            <option value="{{ pool.id }}" data-preset="{{ pool.id }}">{{ pool.name }}</option>
                        {% endfor %}
                    </select>
                    <div class="form-text" id="recipientHint">Es werden nur bestätigte Anmeldungen mit E-Mail-Adresse berücksichtigt.</div>
                </div>
                <div class="col-md-6">
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" name="translation_links" value="1" id="translationLinks" checked>
                        <label class="form-check-label" for="translationLinks">
                            Am Ende der E-Mail Flaggen-Links zur Übersetzung auf der Webseite (ohne fremdsprachigen Text in der Mail)
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="fisch-card mb-4">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
            <span><i class="fas fa-envelope"></i> E-Mail-Text (nur Deutsch)</span>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="loadPoolPresetBtn">
                <i class="fas fa-file-import me-1"></i> Vorlage fürs Schwimmbad laden
            </button>
        </div>
        <div class="card-body">
            <p class="small text-muted">In der E-Mail erscheint ausschließlich dieser deutsche Text (mit Platzhaltern pro Familie). Andere Sprachen nur über Flaggen auf der Webseite.</p>
            <div class="mb-3">
                <label class="form-label fw-semibold" for="subject_de">Betreff</label>
                <input type="text" class="form-control js-parent-subject" id="subject_de"
                       name="subject_i18n[de]" data-locale="de" required>
            </div>
            <div class="mb-4">
                <label class="form-label fw-semibold" for="body_de">Nachricht (HTML)</label>
                <textarea class="form-control font-monospace js-parent-body" id="body_de"
                          name="body_i18n[de]" rows="8" data-locale="de" required></textarea>
                <div class="form-text">Platzhalter z. B. {eltern_name}, {kind_name}, {schwimmbad}, {uhrzeit}, {bad_infos}</div>
            </div>

            <div class="border rounded p-3 mb-4">
                <h6 class="fw-semibold mb-2"><i class="fas fa-paperclip me-1"></i> PDF-Anhänge (alle Empfänger)</h6>
                <input type="file" class="form-control" name="attachments[]" accept="application/pdf,.pdf" multiple>
                <div class="form-text">Max. 10 MB pro Datei, nur PDF. Werden an jede Mail des Filters angehängt.</div>
            </div>

            <details class="border rounded p-3" id="poolOverridesPanel">
                <summary class="fw-semibold cursor-pointer">Abweichender deutscher Text pro Schwimmbad (optional, nur bei „Alle Schwimmbäder“)</summary>
                <p class="small text-muted mt-2">Wenn leer, erhalten alle Empfänger den deutschen Standardtext oben. Flaggen in der Mail verlinken auf die Web-Übersetzungen unten.</p>
                {% for pool in pools %}
                    <div class="border-top pt-3 mt-3">
                        <h6 class="fw-semibold">{{ pool.name }}</h6>
                        <div class="mb-2">
                            <label class="form-label small">Betreff (optional)</label>
                            <input type="text" class="form-control form-control-sm" name="pool_override[{{ pool.id }}][subject]">
                        </div>
                        <div class="mb-2">
                            <label class="form-label small">Nachricht HTML (optional)</label>
                            <textarea class="form-control form-control-sm font-monospace" rows="4"
                                      name="pool_override[{{ pool.id }}][body]"></textarea>
                        </div>
                        <div>
                            <label class="form-label small">PDF nur für dieses Schwimmbad (optional)</label>
                            <input type="file" class="form-control form-control-sm"
                                   name="pool_attachment[{{ pool.id }}][]" accept="application/pdf,.pdf" multiple>
                        </div>
                    </div>
                {% endfor %}
            </details>
        </div>
    </div>

    <div class="fisch-card mb-4">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
            <span><i class="fas fa-globe"></i> Übersetzungen für die Webseite (nicht in der E-Mail)</span>
            <button type="button" class="btn btn-sm btn-fisch-outline" id="fischParentTranslateBtn"
                    {% if not deeplConfigured %}disabled title="DEEPL_AUTH_KEY fehlt"{% endif %}>
                <i class="fas fa-language me-1"></i> Aus Deutsch übersetzen
            </button>
        </div>
        <div class="card-body">
            {% if not deeplConfigured %}
                <div class="alert alert-warning small">DeepL nicht konfiguriert — Übersetzungen manuell pflegen oder Key setzen.</div>
            {% endif %}
            <div id="fischParentTranslateStatus" class="small text-muted mb-2 d-none"></div>
            <p class="small text-muted">Diese Texte erscheinen auf <code>/booking/fisch/elterninfo/…</code>, wenn Eltern auf eine Flagge in der E-Mail klicken. Deutsch auf der Webseite = E-Mail-Text oben.</p>

            <ul class="nav nav-tabs mb-3" role="tablist">
                {% for code in locales %}
                    {% if code != 'de' %}
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link {% if code == 'en' %}active{% endif %}"
                                data-bs-toggle="tab" data-bs-target="#parentLang{{ code }}" role="tab">
                            <img src="{{ asset('images/fisch/flags/' ~ localeMeta[code].flag ~ '.svg') }}" alt="" width="18" height="14" class="me-1">
                            {{ localeMeta[code].label }}
                        </button>
                    </li>
                    {% endif %}
                {% endfor %}
            </ul>

            <div class="tab-content">
                {% for code in locales %}
                    {% if code != 'de' %}
                    <div class="tab-pane fade {% if code == 'en' %}show active{% endif %}" id="parentLang{{ code }}" role="tabpanel">
                        <div class="mb-3">
                            <label class="form-label fw-semibold" for="subject_{{ code }}">Betreff — {{ localeMeta[code].label }}</label>
                            <input type="text" class="form-control js-parent-subject" id="subject_{{ code }}"
                                   name="subject_i18n[{{ code }}]" data-locale="{{ code }}">
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-semibold" for="body_{{ code }}">Nachricht (HTML) — {{ localeMeta[code].label }}</label>
                            <textarea class="form-control font-monospace js-parent-body" id="body_{{ code }}"
                                      name="body_i18n[{{ code }}]" rows="6" data-locale="{{ code }}"></textarea>
                        </div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="d-flex flex-wrap gap-2">
        <button type="submit" class="btn btn-fisch-primary" id="sendParentMailBtn">
            <i class="fas fa-paper-plane me-1"></i> Versenden
        </button>
        <span class="align-self-center text-muted small" id="sendConfirmHint"></span>
    </div>
</form>

<div class="fisch-card mt-4">
    <div class="card-header"><i class="fas fa-vial"></i> Testversand</div>
    <div class="card-body">
        <form method="post" action="{{ path('admin_fisch_parent_mail_test') }}" enctype="multipart/form-data"
              class="row g-3 align-items-end" id="fischParentMailTestForm">
            <input type="hidden" name="_token" value="{{ csrf_token('fisch_parent_mail_test') }}">
            <input type="hidden" name="translation_links" id="testTranslationLinks" value="1">
            <div id="testI18nFields"></div>
            <div class="col-md-4">
                <label class="form-label fw-semibold" for="testEmail">E-Mail</label>
                <input type="email" class="form-control" name="test_email" id="testEmail" required
                       value="pohl@dpohl-engineering.de">
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold" for="testAttachment">PDF-Anhang</label>
                <input type="file" class="form-control" name="test_attachment" id="testAttachment" accept="application/pdf,.pdf">
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-outline-secondary w-100">
                    <i class="fas fa-envelope me-1"></i> Testmail senden
                </button>
            </div>
            <div class="col-12">
                <div class="form-text">Übernimmt Betreff/Text und Web-Übersetzungen aus dem Formular oben. Fehlende Übersetzungen werden bei DeepL automatisch ergänzt. Flaggen-Links speichern eine Test-Kampagne in der DB.</div>
            </div>
        </form>
    </div>
</div>

<script type="application/json" id="poolPresetsJson">{{ poolPresets|json_encode|raw }}</script>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
<script>
(function () {
    const poolFilter = document.getElementById('poolFilter');
    const recipientHint = document.getElementById('recipientHint');
    const presets = JSON.parse(document.getElementById('poolPresetsJson').textContent || '{}');
    const recipientsUrl = '{{ path('admin_fisch_parent_mail_recipients') }}';

    function setStatus(el, text, isError) {
        if (!el) return;
        el.textContent = text;
        el.classList.toggle('text-danger', !!isError);
        el.classList.remove('d-none');
    }

    async function refreshCount() {
        if (!poolFilter || !recipientHint) return;
        const poolId = poolFilter.value;
        try {
            const res = await fetch(recipientsUrl + '?pool_id=' + encodeURIComponent(poolId));
            const data = await res.json();
            recipientHint.textContent = (data.count ?? 0) + ' Empfänger für diesen Filter.';
        } catch (e) {
            recipientHint.textContent = 'Empfängerzahl konnte nicht geladen werden.';
        }
    }

    if (poolFilter) {
        poolFilter.addEventListener('change', refreshCount);
        refreshCount();
    }

    document.getElementById('loadPoolPresetBtn')?.addEventListener('click', function () {
        const poolId = poolFilter ? poolFilter.value : 'all';
        if (poolId === 'all') {
            alert('Bitte ein Schwimmbad wählen oder „Alle“ mit den Standardfeldern nutzen.');
            return;
        }
        const preset = presets[poolId];
        if (!preset) return;
        const subj = document.querySelector('.js-parent-subject[data-locale="de"]');
        const body = document.querySelector('.js-parent-body[data-locale="de"]');
        if (subj) subj.value = preset.subject || '';
        if (body) body.value = preset.body || '';
    });

    const translateBtn = document.getElementById('fischParentTranslateBtn');
    const translateStatus = document.getElementById('fischParentTranslateStatus');
    translateBtn?.addEventListener('click', async function () {
        const subjectDe = (document.querySelector('.js-parent-subject[data-locale="de"]')?.value || '').trim();
        const bodyDe = (document.querySelector('.js-parent-body[data-locale="de"]')?.value || '').trim();
        if (!subjectDe && !bodyDe) {
            setStatus(translateStatus, 'Bitte zuerst deutschen Betreff oder Text ausfüllen.', true);
            return;
        }
        translateBtn.disabled = true;
        setStatus(translateStatus, 'Übersetze …', false);
        try {
            const res = await fetch('{{ path('admin_fisch_parent_mail_translate') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token('fisch_parent_mail_translate') }}'
                },
                body: JSON.stringify({ subject: subjectDe, body: bodyDe })
            });
            const data = await res.json();
            if (!data.success) {
                setStatus(translateStatus, data.error || 'Übersetzung fehlgeschlagen.', true);
                return;
            }
            Object.keys(data.subject || {}).forEach(function (locale) {
                const el = document.querySelector('.js-parent-subject[data-locale="' + locale + '"]');
                if (el && !(el.value || '').trim()) el.value = data.subject[locale];
            });
            Object.keys(data.body || {}).forEach(function (locale) {
                const el = document.querySelector('.js-parent-body[data-locale="' + locale + '"]');
                if (el && !(el.value || '').trim()) el.value = data.body[locale];
            });
            setStatus(translateStatus, 'Übersetzungen eingefügt (leere Felder). Bitte prüfen.', false);
        } catch (e) {
            setStatus(translateStatus, 'Netzwerkfehler.', true);
        } finally {
            translateBtn.disabled = {{ deeplConfigured ? 'false' : 'true' }};
        }
    });

    document.getElementById('fischParentMailForm')?.addEventListener('submit', function (e) {
        const hint = document.getElementById('sendConfirmHint');
        const countText = recipientHint ? recipientHint.textContent : '';
        if (!confirm('Elternbrief jetzt versenden? ' + countText)) {
            e.preventDefault();
        }
    });

    document.getElementById('fischParentMailTestForm')?.addEventListener('submit', function () {
        const box = document.getElementById('testI18nFields');
        const links = document.getElementById('translationLinks');
        const linksHidden = document.getElementById('testTranslationLinks');
        if (linksHidden) {
            linksHidden.value = links && links.checked ? '1' : '0';
        }
        if (!box) return;
        box.innerHTML = '';
        document.querySelectorAll('.js-parent-subject, .js-parent-body').forEach(function (el) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = el.name;
            input.value = el.value || '';
            box.appendChild(input);
        });
    });
})();
</script>
{% endblock %}