{% extends 'account/base_account.html.twig' %}

{% block page_title %}Mes consentements{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        #qrBtn   { display: none !important; }
        #qrPanel { display: none !important; }

        .consent-row {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 18px 0;
            border-bottom: 1px solid #f0f0f5;
        }
        .consent-row:last-child { border-bottom: none; padding-bottom: 0; }
        .consent-row:first-child { padding-top: 0; }

        .consent-toggle-wrap {
            flex-shrink: 0; padding-top: 2px;
        }
        .consent-toggle {
            width: 42px; height: 24px;
            appearance: none; -webkit-appearance: none;
            background: #e5e5ea; border-radius: 12px;
            cursor: pointer; transition: background 0.2s;
            position: relative; display: block;
        }
        .consent-toggle::after {
            content: '';
            position: absolute; top: 3px; left: 3px;
            width: 18px; height: 18px;
            background: white; border-radius: 50%;
            transition: transform 0.2s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .consent-toggle:checked {
            background: #34c759;
        }
        .consent-toggle:checked::after {
            transform: translateX(18px);
        }

        .consent-info { flex: 1; }
        .consent-title {
            font-size: 14px; font-weight: 600;
            color: #1d1d1f; margin-bottom: 4px;
        }
        .consent-desc {
            font-size: 12px; color: #6e6e73; line-height: 1.6;
        }
        .consent-meta {
            font-size: 11px; color: #86868b; margin-top: 4px;
        }
        .consent-status {
            font-size: 11px; font-weight: 600;
            padding: 2px 8px; border-radius: 20px;
            display: inline-block; margin-top: 4px;
        }
        .status-on  { background: #d1f5eb; color: #0f6e56; }
        .status-off { background: #f5f5f7; color: #86868b; }

        .consent-immutable {
            display: flex; align-items: flex-start; gap: 16px;
            padding: 18px 0; border-bottom: 1px solid #f0f0f5;
        }
        .lock-icon {
            width: 42px; height: 24px;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; flex-shrink: 0; padding-top: 2px;
            color: #86868b;
        }
    </style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">🔔 Mes consentements</h1>
    <p class="page-subtitle">Gérez vos préférences de communication — Art. 7 RGPD</p>
</div>

{# Flash message après sauvegarde #}
{% if app.request.query.get('optin_updated') %}
    <div class="alert alert-success" style="margin-bottom: 20px;">
        ✅ Vos préférences ont été mises à jour.
    </div>
{% endif %}

{# ══════════════════════════════════════════════════════════════════
   CONSENTEMENTS MODIFIABLES
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">
    <div class="card-title">📧 Communications par email</div>

    <form method="POST" action="{{ path('app_account_marketing_preferences') }}" style="margin: 0;">
        <input type="hidden" name="_token" value="{{ csrf_token('marketing_preferences') }}">

        <div class="consent-row">
            <div class="consent-toggle-wrap">
                <input
                    type="checkbox"
                    name="optin_marketing"
                    id="optin_marketing"
                    value="1"
                    class="consent-toggle"
                    {% if hasActiveConsent %}checked{% endif %}
                >
            </div>
            <div class="consent-info">
                <label for="optin_marketing" class="consent-title" style="cursor:pointer;">
                    Actualités et offres NUM-ECARD
                </label>
                <div class="consent-desc">
                    Conseils, nouveautés produit et offres exclusives. Fréquence : 1 à 2 emails par mois maximum.
                </div>
                <div class="consent-meta">
                    Base légale : Consentement (Art. 6.1.a RGPD) — Révocable à tout moment.
                </div>
                <span class="consent-status {% if hasActiveConsent %}status-on{% else %}status-off{% endif %}" id="consentStatusLabel">
                    {% if hasActiveConsent %}✅ Actif{% else %}⭕ Inactif{% endif %}
                </span>
            </div>
        </div>

        <div style="padding-top: 16px;">
            <button type="submit" class="btn btn-primary btn-sm">
                💾 Enregistrer mes préférences
            </button>
        </div>
    </form>
</div>

{# ══════════════════════════════════════════════════════════════════
   CONSENTEMENTS NON MODIFIABLES (informatif)
   ══════════════════════════════════════════════════════════════════ #}
<div class="card" style="margin-top: 20px;">
    <div class="card-title">⚙️ Traitements nécessaires au service</div>
    <p style="font-size: 13px; color: #6e6e73; margin-bottom: 18px; line-height: 1.6;">
        Ces traitements sont indispensables au fonctionnement du service NUM-ECARD.
        Ils ne sont pas basés sur votre consentement mais sur d'autres bases légales du RGPD — ils ne peuvent pas être désactivés individuellement.
    </p>

    <div class="consent-immutable">
        <div class="lock-icon">🔒</div>
        <div class="consent-info">
            <div class="consent-title">Gestion de votre compte et commandes</div>
            <div class="consent-desc">Création de compte, traitement des commandes, facturation, accès à votre carte NUM-ECARD.</div>
            <div class="consent-meta">Base légale : Exécution du contrat (Art. 6.1.b RGPD) — Conservation : durée du contrat + 10 ans (factures)</div>
        </div>
    </div>

    <div class="consent-immutable">
        <div class="lock-icon">🔒</div>
        <div class="consent-info">
            <div class="consent-title">Sécurité et journalisation</div>
            <div class="consent-desc">Logs de connexion, protection contre la fraude, détection d'anomalies.</div>
            <div class="consent-meta">Base légale : Intérêt légitime (Art. 6.1.f RGPD) — Conservation : 12 mois</div>
        </div>
    </div>

    <div class="consent-immutable" style="border-bottom:none;">
        <div class="lock-icon">🔒</div>
        <div class="consent-info">
            <div class="consent-title">Analytics anonymisés (si acceptés via le bandeau cookies)</div>
            <div class="consent-desc">Mesure d'audience anonymisée via GA4 — IP masquée, aucun profil publicitaire.</div>
            <div class="consent-meta">Base légale : Consentement (Art. 6.1.a RGPD) — géré via le bandeau cookies du site.</div>
        </div>
    </div>
</div>

{# ══════════════════════════════════════════════════════════════════
   RETRAIT DE CONSENTEMENT SUR AUTRES TRAITEMENTS — LIEN N2
   ══════════════════════════════════════════════════════════════════ #}
<div class="card" style="margin-top: 20px; border-left: 3px solid #e5e5ea;">
    <div class="card-title" style="color: #86868b;">Autre demande relative à vos consentements</div>
    <p style="font-size: 13px; color: #6e6e73; margin-bottom: 16px; line-height: 1.6;">
        Pour toute demande de retrait de consentement sur un traitement non listé ici, ou pour une opposition formelle à un traitement basé sur l'intérêt légitime, utilisez le formulaire de demande RGPD.
    </p>
    <a href="{{ path('rgpd_formulaire') }}?droit=opposition" class="btn btn-secondary btn-sm">
        📋 Faire une demande formelle
    </a>
</div>

{# ── Lien retour #}
<div style="margin-top: 16px;">
    <a href="{{ path('app_account_mes_donnees') }}" style="font-size: 13px; color: #86868b; text-decoration: none;">
        ← Retour à mes données personnelles
    </a>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    (function() {
        const toggle = document.getElementById('optin_marketing');
        const label  = document.getElementById('consentStatusLabel');
        if (!toggle || !label) return;

        toggle.addEventListener('change', function() {
            if (this.checked) {
                label.textContent = '✅ Actif';
                label.className = 'consent-status status-on';
            } else {
                label.textContent = '⭕ Inactif';
                label.className = 'consent-status status-off';
            }
        });
    })();
    </script>
{% endblock %}