{% extends 'base.html' %}

{% block title %}{{ title }} - Stiftung{% endblock %}

{% block breadcrumb %}
<a href="{% url 'stiftung:home' %}">Stiftungsverwaltung</a>
<span class="mx-1">/</span>
<a href="{% url 'stiftung:administration' %}">Administration</a>
<span class="mx-1">/</span>
{{ title }}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">

            {% if test_result %}
            <div class="alert alert-{% if test_result.success %}success{% else %}danger{% endif %} alert-dismissible fade show">
                <i class="fas fa-{% if test_result.success %}check-circle{% else %}exclamation-triangle{% endif %} me-1"></i>
                {{ test_result.message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endif %}

            <!-- Test-E-Mail senden (prominent) -->
            <div class="card mb-4 border-primary">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-paper-plane me-1"></i>
                        Test-E-Mail senden
                    </h3>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        Sendet eine echte Test-E-Mail (HTML + Text) an die angegebene Adresse, um den vollständigen Versandweg zu prüfen.
                    </p>
                    <form method="post">
                        {% csrf_token %}
                        <div class="input-group">
                            <input type="email"
                                   class="form-control"
                                   id="test_email_top"
                                   name="test_email"
                                   placeholder="empfaenger@example.de"
                                   value="{{ request.POST.test_email|default:'' }}"
                                   required>
                            <button type="submit" name="action" value="test_smtp_send" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-1"></i> Senden
                            </button>
                            {% if request.user.email %}
                            <button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('test_email_top').value='{{ request.user.email }}'" title="Eigene E-Mail-Adresse einfügen">
                                <i class="fas fa-user me-1"></i> An mich
                            </button>
                            {% endif %}
                        </div>
                        {% if request.user.email %}
                        <div class="form-text">Ihre Adresse: <code>{{ request.user.email }}</code></div>
                        {% else %}
                        <div class="form-text text-warning"><i class="fas fa-exclamation-triangle me-1"></i>Kein E-Mail in Ihrem Benutzerprofil hinterlegt. Bitte Adresse manuell eingeben.</div>
                        {% endif %}
                    </form>
                </div>
            </div>

            <!-- IMAP Section -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-inbox"></i>
                        E-Mail Eingang (IMAP)
                    </h3>
                    <a href="{% url 'stiftung:administration' %}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-arrow-left"></i> Zurück
                    </a>
                </div>

                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        {% for setting in imap_settings %}
                        <div class="mb-3">
                            <label for="setting_{{ setting.key }}" class="form-label">
                                <strong>{{ setting.display_name }}</strong>
                            </label>
                            {% if setting.description %}
                            <div class="form-text mb-1">{{ setting.description }}</div>
                            {% endif %}

                            {% if setting.setting_type == 'boolean' %}
                            <div class="form-check form-switch">
                                <input type="checkbox"
                                       class="form-check-input"
                                       id="setting_{{ setting.key }}"
                                       name="setting_{{ setting.key }}"
                                       value="True"
                                       {% if setting.get_typed_value %}checked{% endif %}>
                                <label class="form-check-label" for="setting_{{ setting.key }}">Aktiviert</label>
                            </div>

                            {% elif setting.setting_type == 'password' %}
                            <div class="input-group">
                                <input type="password"
                                       class="form-control"
                                       id="setting_{{ setting.key }}"
                                       name="setting_{{ setting.key }}"
                                       value="{{ setting.value }}"
                                       placeholder="{% if setting.value %}••••••••{% else %}Passwort eingeben{% endif %}">
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePassword(this)" title="Passwort anzeigen">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>

                            {% elif setting.setting_type == 'number' %}
                            <input type="number"
                                   class="form-control"
                                   id="setting_{{ setting.key }}"
                                   name="setting_{{ setting.key }}"
                                   value="{{ setting.value }}">

                            {% else %}
                            <input type="text"
                                   class="form-control"
                                   id="setting_{{ setting.key }}"
                                   name="setting_{{ setting.key }}"
                                   value="{{ setting.value }}">
                            {% endif %}
                        </div>
                        {% endfor %}

                        <hr>
                        <div class="d-flex gap-2">
                            <button type="submit" name="action" value="save" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Speichern
                            </button>
                            <button type="submit" name="action" value="test" class="btn btn-outline-primary">
                                <i class="fas fa-plug me-1"></i> IMAP testen
                            </button>
                            <a href="{% url 'stiftung:email_eingang_list' %}" class="btn btn-outline-secondary ms-auto">
                                <i class="fas fa-inbox me-1"></i> Zum Posteingang
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- SMTP Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-paper-plane"></i>
                        E-Mail Ausgang (SMTP)
                    </h3>
                </div>

                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        {% for setting in smtp_settings %}
                        <div class="mb-3">
                            <label for="setting_{{ setting.key }}" class="form-label">
                                <strong>{{ setting.display_name }}</strong>
                            </label>
                            {% if setting.description %}
                            <div class="form-text mb-1">{{ setting.description }}</div>
                            {% endif %}

                            {% if setting.setting_type == 'boolean' %}
                            <div class="form-check form-switch">
                                <input type="checkbox"
                                       class="form-check-input"
                                       id="setting_{{ setting.key }}"
                                       name="setting_{{ setting.key }}"
                                       value="True"
                                       {% if setting.get_typed_value %}checked{% endif %}>
                                <label class="form-check-label" for="setting_{{ setting.key }}">Aktiviert</label>
                            </div>

                            {% elif setting.setting_type == 'password' %}
                            <div class="input-group">
                                <input type="password"
                                       class="form-control"
                                       id="setting_{{ setting.key }}"
                                       name="setting_{{ setting.key }}"
                                       value="{{ setting.value }}"
                                       placeholder="{% if setting.value %}••••••••{% else %}Passwort eingeben{% endif %}">
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePassword(this)" title="Passwort anzeigen">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>

                            {% elif setting.setting_type == 'number' %}
                            <input type="number"
                                   class="form-control"
                                   id="setting_{{ setting.key }}"
                                   name="setting_{{ setting.key }}"
                                   value="{{ setting.value }}">

                            {% else %}
                            <input type="text"
                                   class="form-control"
                                   id="setting_{{ setting.key }}"
                                   name="setting_{{ setting.key }}"
                                   value="{{ setting.value }}">
                            {% endif %}
                        </div>
                        {% endfor %}

                        <hr>
                        <div class="d-flex gap-2">
                            <button type="submit" name="action" value="save" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Speichern
                            </button>
                            <button type="submit" name="action" value="test_smtp" class="btn btn-outline-primary">
                                <i class="fas fa-plug me-1"></i> Verbindung testen
                            </button>
                        </div>

                    </form>
                </div>
            </div>

            <!-- Notification Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-bell"></i>
                        Benachrichtigungen
                    </h3>
                </div>

                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        {% for setting in notification_settings %}
                        <div class="mb-3">
                            <label for="setting_{{ setting.key }}" class="form-label">
                                <strong>{{ setting.display_name }}</strong>
                            </label>
                            {% if setting.description %}
                            <div class="form-text mb-1">{{ setting.description }}</div>
                            {% endif %}

                            <input type="text"
                                   class="form-control"
                                   id="setting_{{ setting.key }}"
                                   name="setting_{{ setting.key }}"
                                   value="{{ setting.value }}"
                                   placeholder="z.B. vorstand@vhtv-stiftung.de">
                        </div>
                        {% endfor %}

                        <hr>
                        <div class="d-flex gap-2">
                            <button type="submit" name="action" value="save" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Speichern
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>

        <!-- Info sidebar -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-info-circle"></i> IMAP-Hinweise
                </div>
                <div class="card-body" style="font-size: 0.85rem;">
                    <p>Konfigurieren Sie hier die IMAP-Verbindung zum E-Mail-Server. Eingehende E-Mails werden automatisch alle <strong>15 Minuten</strong> abgerufen und den Destinatären zugeordnet.</p>
                    <hr>
                    <p class="mb-1"><strong>Typische Einstellungen:</strong></p>
                    <ul class="mb-0" style="font-size: 0.8rem;">
                        <li>SSL/TLS: Port <code>993</code></li>
                        <li>Unverschlüsselt: Port <code>143</code></li>
                    </ul>
                    <hr>
                    <p class="mb-0"><i class="fas fa-shield-alt text-success me-1"></i> Das Passwort wird in der Datenbank gespeichert. Umgebungsvariablen (<code>IMAP_HOST</code>, etc.) werden als Fallback verwendet, wenn hier keine Werte gesetzt sind.</p>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-info-circle"></i> SMTP-Hinweise
                </div>
                <div class="card-body" style="font-size: 0.85rem;">
                    <p>SMTP wird für den <strong>ausgehenden</strong> E-Mail-Versand verwendet (Nachweis-Aufforderungen, Erinnerungen, Onboarding-Einladungen).</p>
                    <hr>
                    <p class="mb-1"><strong>IONOS-Einstellungen:</strong></p>
                    <ul class="mb-0" style="font-size: 0.8rem;">
                        <li>Server: <code>smtp.ionos.de</code></li>
                        <li>SSL/TLS: Port <code>465</code></li>
                        <li>STARTTLS: Port <code>587</code></li>
                    </ul>
                    <hr>
                    <p class="mb-0"><i class="fas fa-envelope text-primary me-1"></i> Die Absenderadresse <code>buero@vhtv-stiftung.de</code> muss mit dem SMTP-Benutzernamen übereinstimmen.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function togglePassword(btn) {
    const input = btn.parentElement.querySelector('input');
    const icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}
</script>
{% endblock %}