{% extends base_template|default:"base.html" %}
{% load i18n static %}

{% block title %}{% translate "Paramètres des notifications" %}{% endblock title %}

{% block content %}
<div class="container py-3" style="max-width: 760px;">

    <!-- Breadcrumb / Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <a href="{{ back_url }}" class="btn btn-sm btn-outline-secondary rounded-circle p-2 d-flex align-items-center justify-content-center" style="width:38px; height:38px;" title="{% translate 'Retour aux notifications' %}">
                <i class="bi bi-arrow-left fs-6"></i>
            </a>
            <div>
                <h1 class="h4 mb-0 fw-bold">
                    <i class="bi bi-gear-fill text-primary me-2"></i>{% translate "Paramètres des notifications" %}
                </h1>
                <p class="text-muted small mb-0">{% translate "Gérez vos alertes instantanées sur cet appareil et vos rappels par e-mail." %}</p>
            </div>
        </div>
    </div>

    <!-- 1. Web Push / Notifications OS Card -->
    <div class="card shadow-sm border-0 rounded-4 overflow-hidden mb-4">
        <div class="card-header bg-white py-3 px-4 border-bottom border-light d-flex align-items-center justify-content-between">
            <h5 class="card-title fw-bold mb-0 text-dark d-flex align-items-center">
                <i class="bi bi-app-indicator text-primary me-2"></i>{% translate "Notifications sur cet appareil (Alertes système / Push)" %}
            </h5>
            <span id="push-status-badge" class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2">
                <i class="bi bi-hourglass me-1"></i>{% translate "Vérification..." %}
            </span>
        </div>
        <div class="card-body p-3 p-md-4">
            <p class="text-muted small mb-3">
                {% translate "Recevez des alertes instantanées sur votre écran (ordinateur ou smartphone) dès qu'une tâche, intervention ou mention vous concerne, même si le site est en arrière-plan." %}
            </p>

            <!-- Unsupported warning -->
            <div id="push-unsupported-alert" class="alert alert-warning border-0 rounded-3 small d-none mb-3">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                {% translate "Votre navigateur ou appareil actuel ne prend pas en charge les notifications Web Push. (Sur iPhone/iPad, installez l'application via le menu Partager > 'Sur l'écran d'accueil')." %}
            </div>

            <!-- Denied warning -->
            <div id="push-denied-alert" class="alert alert-danger border-0 rounded-3 small d-none mb-3">
                <i class="bi bi-x-circle-fill me-2"></i>
                {% translate "Les notifications sont bloquées dans les paramètres de votre navigateur pour ce site. Veuillez modifier vos permissions de site pour les autoriser." %}
            </div>

            <!-- Action Controls -->
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 p-3 bg-light rounded-3 border mb-4">
                <div>
                    <div class="fw-bold text-dark mb-1" id="push-toggle-title">
                        {% translate "Activer les notifications sur cet appareil" %}
                    </div>
                    <div class="small text-muted" id="push-toggle-desc">
                        {% translate "Cliquez pour autoriser et enregistrer cet appareil." %}
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button id="btn-toggle-push" type="button" class="btn btn-primary rounded-pill px-4 btn-sm d-flex align-items-center gap-2">
                        <i class="bi bi-bell-fill"></i>
                        <span id="btn-toggle-push-text">{% translate "Activer sur cet appareil" %}</span>
                    </button>
                    <button id="btn-test-push" type="button" class="btn btn-outline-secondary rounded-pill px-3 btn-sm d-none d-flex align-items-center gap-1.5" title="{% translate 'Envoyer une notification test' %}">
                        <i class="bi bi-send-fill"></i>
                        <span>{% translate "Tester" %}</span>
                    </button>
                </div>
            </div>

            <!-- Registered Devices List -->
            <div>
                <h6 class="fw-bold text-dark mb-3 d-flex align-items-center">
                    <i class="bi bi-devices text-secondary me-2"></i>{% translate "Appareils enregistrés pour votre compte" %}
                    <span class="badge bg-secondary-subtle text-secondary ms-2 rounded-pill">{{ webpush_subscriptions.count }}</span>
                </h6>
                {% if webpush_subscriptions %}
                <div class="list-group list-group-flush rounded-3 border">
                    {% for sub in webpush_subscriptions %}
                    <div class="list-group-item d-flex align-items-center justify-content-between p-3">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-primary-subtle text-primary p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                {% if "Android" in sub.os_name or "iOS" in sub.os_name %}
                                <i class="bi bi-phone fs-5"></i>
                                {% else %}
                                <i class="bi bi-laptop fs-5"></i>
                                {% endif %}
                            </div>
                            <div>
                                <div class="fw-semibold text-dark mb-0">
                                    {{ sub.device_name|default:sub.browser_name|default:_("Appareil") }}
                                </div>
                                <div class="text-muted small">
                                    <i class="bi bi-calendar3 me-1"></i>{% translate "Enregistré le" %} {{ sub.created_at|date:"d/m/Y H:i" }}
                                </div>
                            </div>
                        </div>
                        <form method="post" action="{% url 'notifications:api_webpush_delete_device' sub.pk %}">
                            {% csrf_token %}
                            {% if is_mobile %}<input type="hidden" name="from" value="mobile">{% endif %}
                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle p-2 d-flex align-items-center justify-content-center" style="width:34px; height:34px;" title="{% translate 'Retirer cet appareil' %}" onclick="return confirm('{% filter escapejs %}{% translate "Voulez-vous retirer cet appareil des notifications push ?" %}{% endfilter %}');">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="p-3 text-center text-muted small bg-light rounded-3 border">
                    <i class="bi bi-info-circle me-1"></i>{% translate "Aucun appareil n'est actuellement enregistré pour recevoir des notifications push." %}
                </div>
                {% endif %}
            </div>

        </div>
    </div>

    <!-- 2. Email Reminders Preferences Form Card -->
    <div class="card shadow-sm border-0 rounded-4 overflow-hidden mb-4">
        <div class="card-header bg-white py-3 px-4 border-bottom border-light">
            <h5 class="card-title fw-bold mb-0 text-dark d-flex align-items-center">
                <i class="bi bi-envelope-at text-primary me-2"></i>{% translate "Rappels par e-mail" %}
            </h5>
        </div>
        <div class="card-body p-3 p-md-4">
            <form method="post" action="">
                {% csrf_token %}
                {% if is_mobile %}
                <input type="hidden" name="from" value="mobile">
                {% endif %}

                <!-- Preferred Language -->
                <div class="mb-4">
                    <label for="{{ form.preferred_language.id_for_label }}" class="form-label fw-semibold text-dark">
                        <i class="bi bi-translate me-1 text-primary"></i>{% translate "Langue préférée pour les e-mails et notifications" %}
                    </label>
                    <div style="max-width: 280px;">
                        {{ form.preferred_language }}
                    </div>
                    {% if form.preferred_language.errors %}
                        <div class="text-danger small mt-1">{{ form.preferred_language.errors|join:", " }}</div>
                    {% endif %}
                    <div class="form-text small text-muted">
                        {% translate "Les e-mails de rappel et les notifications automatiques vous seront envoyés dans cette langue." %}
                    </div>
                </div>

                <!-- Toggle Switch -->
                <div class="p-3 bg-light rounded-3 mb-4 border d-flex align-items-center justify-content-between">
                    <div>
                        <label for="{{ form.notification_reminder_enabled.id_for_label }}" class="form-check-label fw-bold text-dark mb-1">
                            {% translate "Activer les rappels par e-mail" %}
                        </label>
                        <div class="small text-muted">
                            {% translate "Recevoir un récapitulatif par e-mail si des notifications restent non lues au-delà du délai spécifié." %}
                        </div>
                    </div>
                    <div class="form-check form-switch fs-4 mb-0 ms-3">
                        {{ form.notification_reminder_enabled }}
                    </div>
                </div>

                <!-- Recipient Email(s) -->
                <div class="mb-4">
                    <label for="{{ form.notification_reminder_emails.id_for_label }}" class="form-label fw-semibold text-dark">
                        <i class="bi bi-mailbox me-1 text-primary"></i>{% translate "Adresse(s) e-mail de réception" %}
                    </label>
                    {{ form.notification_reminder_emails }}
                    {% if form.notification_reminder_emails.errors %}
                        <div class="text-danger small mt-1">{{ form.notification_reminder_emails.errors|join:", " }}</div>
                    {% endif %}
                    <div class="form-text small text-muted">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Laissez vide pour utiliser l'e-mail principal de votre compte" %} (<strong>{{ request.user.email|default:request.user.username }}</strong>).
                        {% translate "Pour plusieurs destinataires, séparez les adresses par des virgules." %}
                    </div>
                </div>

                <!-- Delay Hours -->
                <div class="mb-4">
                    <label for="{{ form.notification_reminder_delay_hours.id_for_label }}" class="form-label fw-semibold text-dark">
                        <i class="bi bi-hourglass-split me-1 text-primary"></i>{% translate "Délai avant l'envoi du rappel (en heures)" %}
                    </label>
                    <div class="input-group" style="max-width: 280px;">
                        {{ form.notification_reminder_delay_hours }}
                        <span class="input-group-text bg-light text-secondary">{% translate "heures" %}</span>
                    </div>
                    {% if form.notification_reminder_delay_hours.errors %}
                        <div class="text-danger small mt-1">{{ form.notification_reminder_delay_hours.errors|join:", " }}</div>
                    {% endif %}
                    <div class="form-text small text-muted">
                        {% translate "Exemple: 24h = un rappel sera envoyé si une notification n'a pas été lue au bout de 24 heures." %}
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-2 pt-2 border-top">
                    <a href="{{ back_url }}" class="btn btn-light rounded-pill px-4">
                        {% translate "Annuler" %}
                    </a>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-check-lg me-1.5"></i>{% translate "Enregistrer mes préférences" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

<!-- Web Push Management Script -->
<script src="{% static 'notifications/webpush.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', async function () {
    const _gettext = window.gettext || function(s) { return s; };
    const badge = document.getElementById('push-status-badge');
    const unsupportedAlert = document.getElementById('push-unsupported-alert');
    const deniedAlert = document.getElementById('push-denied-alert');
    const toggleBtn = document.getElementById('btn-toggle-push');
    const toggleBtnText = document.getElementById('btn-toggle-push-text');
    const testBtn = document.getElementById('btn-test-push');
    const toggleTitle = document.getElementById('push-toggle-title');
    const toggleDesc = document.getElementById('push-toggle-desc');

    if (!window.LokoWebPush || !window.LokoWebPush.isSupported()) {
        badge.className = 'badge rounded-pill bg-warning-subtle text-warning-emphasis px-3 py-2';
        badge.innerHTML = '<i class="bi bi-x-circle me-1"></i>' + _gettext('Non supporté');
        unsupportedAlert.classList.remove('d-none');
        toggleBtn.classList.add('disabled');
        return;
    }

    async function updateUiState() {
        const perm = window.LokoWebPush.getPermissionState();
        if (perm === 'denied') {
            badge.className = 'badge rounded-pill bg-danger-subtle text-danger px-3 py-2';
            badge.innerHTML = '<i class="bi bi-shield-lock-fill me-1"></i>' + _gettext('Bloqué par le navigateur');
            deniedAlert.classList.remove('d-none');
            toggleBtn.className = 'btn btn-secondary rounded-pill px-4 btn-sm disabled';
            toggleBtnText.textContent = _gettext('Permissions bloquées');
            testBtn.classList.add('d-none');
            return;
        }

        const sub = await window.LokoWebPush.getExistingSubscription();
        if (sub) {
            badge.className = 'badge rounded-pill bg-success-subtle text-success px-3 py-2';
            badge.innerHTML = '<i class="bi bi-check-circle-fill me-1"></i>' + _gettext('Actif sur cet appareil');
            toggleBtn.className = 'btn btn-outline-danger rounded-pill px-4 btn-sm d-flex align-items-center gap-2';
            toggleBtn.innerHTML = '<i class="bi bi-bell-slash"></i><span>' + _gettext('Désactiver sur cet appareil') + '</span>';
            toggleTitle.textContent = _gettext('Notifications actives sur cet appareil');
            toggleDesc.textContent = _gettext('Cet appareil reçoit les alertes système instantanées.');
            testBtn.classList.remove('d-none');
        } else {
            badge.className = 'badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2';
            badge.innerHTML = '<i class="bi bi-bell-slash me-1"></i>' + _gettext('Désactivé sur cet appareil');
            toggleBtn.className = 'btn btn-primary rounded-pill px-4 btn-sm d-flex align-items-center gap-2';
            toggleBtn.innerHTML = '<i class="bi bi-bell-fill"></i><span>' + _gettext('Activer sur cet appareil') + '</span>';
            toggleTitle.textContent = _gettext('Activer les notifications sur cet appareil');
            toggleDesc.textContent = _gettext('Cliquez pour autoriser et enregistrer cet appareil.');
            testBtn.classList.add('d-none');
        }
    }

    await updateUiState();

    toggleBtn.addEventListener('click', async function () {
        toggleBtn.disabled = true;
        try {
            const sub = await window.LokoWebPush.getExistingSubscription();
            if (sub) {
                await window.LokoWebPush.unsubscribe();
            } else {
                await window.LokoWebPush.subscribe();
            }
            window.location.reload();
        } catch (err) {
            alert(err.message || _gettext('Erreur lors de la modification des notifications.'));
            await updateUiState();
        } finally {
            toggleBtn.disabled = false;
        }
    });

    testBtn.addEventListener('click', async function () {
        testBtn.disabled = true;
        const originalHtml = testBtn.innerHTML;
        testBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>' + _gettext('Envoi...');
        try {
            const res = await window.LokoWebPush.sendTestNotification();
            // L'alerte native de l'OS va s'afficher via le service worker
        } catch (err) {
            alert(err.message || _gettext("Erreur lors de l'envoi du test."));
        } finally {
            testBtn.disabled = false;
            testBtn.innerHTML = originalHtml;
        }
    });
});
</script>
{% endblock content %}