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

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

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

{% block content %}
{% set actions %}
    <a href="{{ path('fisch_booking_landing') }}" target="_blank" rel="noopener" class="btn btn-fisch-outline btn-sm">
        <i class="fas fa-external-link-alt me-1"></i> Vorschau
    </a>
{% endset %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Startseite bearbeiten',
    icon: 'file-alt',
    subtitle: 'Saison ' ~ seasonYear ~ ' — Texte je Sprache, Sponsoren und Kennzahlen',
    actions_html: actions
} %}

{% 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_landing_index') }}" id="fischLandingForm">
    <input type="hidden" name="_token" value="{{ csrf_token('fisch_landing') }}">

    <div class="fisch-card">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
            <span><i class="fas fa-align-left"></i> Texte (mehrsprachig)</span>
            <div class="d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-sm btn-fisch-outline" id="fischTranslateBtn"
                        {% if not deeplConfigured %}disabled title="DEEPL_AUTH_KEY fehlt"{% endif %}>
                    <i class="fas fa-language me-1"></i> Aus Deutsch übersetzen
                </button>
                <div class="form-check form-check-inline mb-0 align-self-center">
                    <input class="form-check-input" type="checkbox" id="fischTranslateOverwrite">
                    <label class="form-check-label small" for="fischTranslateOverwrite">bestehende überschreiben</label>
                </div>
            </div>
        </div>
        <div class="card-body">
            {% if not deeplConfigured %}
                <div class="alert alert-warning small mb-3">
                    DeepL-Key wird von der App noch nicht gelesen. Bitte prüfen:
                    <ul class="mb-0 mt-1">
                        <li>Eintrag in Magallanes-<code>shared/.env</code> oder <code>shared/.env.local</code>
                            (nicht nur in einem Release-Ordner): <code>DEEPL_AUTH_KEY=…</code></li>
                        <li>Danach im aktuellen Release: <code>php bin/console cache:clear</code></li>
                        <li>Falls <code>.env.local.php</code> existiert: <code>composer dump-env prod</code>
                            erneut ausführen (oder die Datei löschen) und Cache leeren</li>
                    </ul>
                    Manuell übersetzen bleibt möglich.
                </div>
            {% else %}
                <div class="alert alert-success small mb-3 py-2">
                    DeepL ist konfiguriert — leere Sprachen können aus dem deutschen Text befüllt werden.
                </div>
            {% endif %}
            <div id="fischTranslateStatus" class="small text-muted mb-2 d-none"></div>

            <ul class="nav nav-tabs mb-3" role="tablist">
                {% for code in locales %}
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link {% if code == 'de' %}active{% endif %}"
                                data-bs-toggle="tab" data-bs-target="#fischLang{{ code }}"
                                role="tab">
                            {{ localeMeta[code].label }}
                            {% if code == 'de' %}<span class="badge bg-secondary ms-1">Quelle</span>{% endif %}
                        </button>
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                {% for code in locales %}
                    <div class="tab-pane fade {% if code == 'de' %}show active{% endif %}"
                         id="fischLang{{ code }}" role="tabpanel">
                        <div class="mb-3">
                            <label class="form-label fw-semibold" for="landing_intro_{{ code }}">
                                Willkommenstext (Intro) — {{ localeMeta[code].label }}
                            </label>
                            <textarea class="form-control js-fisch-intro" id="landing_intro_{{ code }}"
                                      name="landing_intro[{{ code }}]" rows="4"
                                      data-locale="{{ code }}"
                                      placeholder="{{ defaultIntros[code] }}">{{ introI18n[code]|default('') }}</textarea>
                            <div class="form-text">Leer = Standardtext für {{ seasonYear }} in dieser Sprache.</div>
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-semibold" for="info_text_{{ code }}">
                                Zusatzblock (optional, HTML) — {{ localeMeta[code].label }}
                            </label>
                            <textarea class="form-control font-monospace js-fisch-info" id="info_text_{{ code }}"
                                      name="info_text[{{ code }}]" rows="6"
                                      data-locale="{{ code }}">{{ infoI18n[code]|default('') }}</textarea>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="fisch-card">
        <div class="card-header"><i class="fas fa-hashtag"></i> Kennzahl</div>
        <div class="card-body">
            <label class="form-label fw-semibold" for="landing_stat_spots">Kostenfreie Kursplätze (Anzeige)</label>
            <input type="number" class="form-control" style="max-width: 160px" id="landing_stat_spots"
                   name="landing_stat_spots" value="{{ config.landingStatSpots }}" min="1" max="9999">
            <div class="form-text">Highlight auf der Startseite. Altersgrenzen: Grundeinstellungen.</div>
        </div>
    </div>

    <div class="fisch-card">
        <div class="card-header"><i class="fas fa-handshake"></i> Sponsoren / Projektpartner</div>
        <div class="card-body">
            <p class="text-muted small">Logos unter <code>public/images/fisch/</code> — Auswahl der vorhandenen Dateien:</p>
            {% for i in 0..2 %}
                <div class="row g-2 mb-3 pb-3 {% if i < 2 %}border-bottom{% endif %}">
                    <div class="col-md-4">
                        <label class="form-label">Name {{ i + 1 }}</label>
                        <input type="text" class="form-control" name="sponsor_name_{{ i }}"
                               value="{{ sponsors[i].name|default('') }}" maxlength="120">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Link (URL)</label>
                        <input type="url" class="form-control" name="sponsor_url_{{ i }}"
                               value="{{ sponsors[i].url|default('') }}" placeholder="https://…">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Logo</label>
                        <select class="form-select" name="sponsor_image_{{ i }}">
                            {% for path, label in imageOptions %}
                                <option value="{{ path }}" {% if (sponsors[i].image|default('')) == path %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="alert border-0 shadow-sm" style="background: var(--fisch-admin-accent-soft);">
        <strong>Anmeldestatus &amp; Footer:</strong>
        Anmeldephase → <a href="{{ path('admin_fisch_settings_index') }}">Grundeinstellungen</a>.
        Footer-Links sind im Template hinterlegt.
    </div>

    <button type="submit" class="btn btn-fisch-primary">
        <i class="fas fa-save me-1"></i> Speichern
    </button>
</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const btn = document.getElementById('fischTranslateBtn');
    const statusEl = document.getElementById('fischTranslateStatus');
    const overwriteEl = document.getElementById('fischTranslateOverwrite');
    if (!btn) return;

    function setStatus(msg, isError) {
        if (!statusEl) return;
        statusEl.textContent = msg || '';
        statusEl.classList.toggle('d-none', !msg);
        statusEl.classList.toggle('text-danger', !!isError);
        statusEl.classList.toggle('text-muted', !isError);
    }

    btn.addEventListener('click', async function () {
        const introDe = document.querySelector('.js-fisch-intro[data-locale="de"]');
        const infoDe = document.querySelector('.js-fisch-info[data-locale="de"]');
        const intro = (introDe && introDe.value || '').trim();
        const info = (infoDe && infoDe.value || '').trim();
        if (!intro && !info) {
            setStatus('Bitte zuerst den deutschen Intro- oder Zusatztext ausfüllen.', true);
            return;
        }

        btn.disabled = true;
        setStatus('Übersetze …');

        try {
            const res = await fetch('{{ path('admin_fisch_landing_translate') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token('fisch_landing_translate') }}'
                },
                body: JSON.stringify({
                    intro: intro,
                    info: info,
                    overwrite: !!(overwriteEl && overwriteEl.checked)
                })
            });
            const data = await res.json();
            if (!data.success) {
                setStatus(data.error || 'Übersetzung fehlgeschlagen.', true);
                return;
            }

            const overwrite = !!data.overwrite;
            let filled = 0;
            Object.keys(data.intro || {}).forEach(function (locale) {
                const el = document.querySelector('.js-fisch-intro[data-locale="' + locale + '"]');
                if (!el) return;
                if (!overwrite && (el.value || '').trim() !== '') return;
                el.value = data.intro[locale];
                filled++;
            });
            Object.keys(data.info || {}).forEach(function (locale) {
                const el = document.querySelector('.js-fisch-info[data-locale="' + locale + '"]');
                if (!el) return;
                if (!overwrite && (el.value || '').trim() !== '') return;
                el.value = data.info[locale];
                filled++;
            });

            setStatus(filled
                ? ('Übersetzung eingefügt (' + filled + ' Felder). Bitte prüfen und speichern.')
                : 'Keine leeren Felder zum Befüllen — „bestehende überschreiben“ aktivieren oder Felder leeren.');
        } catch (e) {
            setStatus('Netzwerkfehler bei der Übersetzung.', true);
        } finally {
            btn.disabled = {{ deeplConfigured ? 'false' : 'true' }};
        }
    });
})();
</script>
{% endblock %}