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

{% block page_title %}Mes données personnelles{% endblock %}

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

        /* ── Grille N1 ── */
        .rgpd-n1-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-bottom: 0;
        }
        @media (max-width: 680px) {
            .rgpd-n1-grid { grid-template-columns: 1fr; }
        }
        @media (min-width: 481px) and (max-width: 680px) {
            .rgpd-n1-grid { grid-template-columns: repeat(2, 1fr); }
        }

        .rgpd-n1-card {
            border: 1.5px solid #e5e5ea;
            border-radius: 14px;
            padding: 18px 18px 16px;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-decoration: none;
            transition: border-color 0.18s, box-shadow 0.18s;
        }
        .rgpd-n1-card:hover {
            border-color: #667eea;
            box-shadow: 0 2px 12px rgba(102,126,234,0.12);
        }
        .rgpd-n1-card .n1-icon {
            width: 38px; height: 38px;
            border-radius: 10px;
            background: #f0f2ff;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .rgpd-n1-card .n1-title {
            font-size: 14px; font-weight: 600;
            color: #1d1d1f; margin-bottom: 2px;
        }
        .rgpd-n1-card .n1-sub {
            font-size: 12px; color: #6e6e73; line-height: 1.5;
        }
        .rgpd-n1-card .n1-link {
            font-size: 12px; color: #667eea; font-weight: 600;
            margin-top: auto;
        }

        /* ── Section label ── */
        .rgpd-section-label {
            font-size: 11px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.8px;
            color: #86868b; margin-bottom: 12px;
            display: flex; align-items: center; gap: 8px;
        }
        .rgpd-level-tag {
            font-size: 10px; font-weight: 600;
            padding: 2px 8px; border-radius: 20px;
            letter-spacing: 0;
            text-transform: none;
        }
        .tag-n1 { background: #d1f5eb; color: #0f6e56; }
        .tag-n2 { background: #fff3cd; color: #92400e; }

        /* ── Grille N2 ── */
        .rgpd-n2-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        @media (max-width: 560px) {
            .rgpd-n2-grid { grid-template-columns: 1fr; }
        }

        .rgpd-n2-item {
            border: 1.5px solid #e5e5ea;
            border-radius: 12px;
            padding: 14px 16px;
            background: #ffffff;
            display: flex; align-items: flex-start; gap: 12px;
            text-decoration: none;
            transition: border-color 0.18s;
            cursor: pointer;
        }
        .rgpd-n2-item:hover { border-color: #c0c0c8; }
        .rgpd-n2-item.exists { border-color: #ffc9c9; background: #fff8f8; }
        .rgpd-n2-item.exists:hover { border-color: #ff6b6b; }

        .n2-dot {
            width: 9px; height: 9px; border-radius: 50%;
            flex-shrink: 0; margin-top: 4px;
        }
        .dot-red    { background: #ff3b30; }
        .dot-amber  { background: #ff9500; }
        .dot-blue   { background: #0071e3; }
        .dot-grey   { background: #8e8e93; }

        .n2-label { font-size: 13px; font-weight: 600; color: #1d1d1f; margin-bottom: 2px; }
        .n2-sub   { font-size: 11px; color: #6e6e73; line-height: 1.5; }
        .n2-badge {
            display: inline-block; margin-top: 6px;
            font-size: 10px; font-weight: 600;
            padding: 2px 8px; border-radius: 20px;
        }
        .badge-exists { background: #ffe8e8; color: #c0392b; }
        .badge-form   { background: #fff3cd; color: #92400e; }

        /* ── Bandeau info N2 ── */
        .rgpd-n2-info {
            background: #fffbeb;
            border-left: 3px solid #f59e0b;
            border-radius: 0 8px 8px 0;
            padding: 12px 16px;
            font-size: 13px; color: #78350f;
            line-height: 1.6;
            margin-bottom: 14px;
        }

        /* ── Export status ── */
        .export-throttle {
            font-size: 12px; color: #86868b;
            margin-top: 6px; font-style: italic;
        }
    </style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">🛡️ Mes données personnelles</h1>
    <p class="page-subtitle">Gérez vos données et exercez vos droits RGPD (UE) 2016/679</p>
</div>

{# ══════════════════════════════════════════════════════════════════
   NIVEAU 1 — LIBRE-SERVICE
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">
    <div class="rgpd-section-label">
        Libre-service — traitement immédiat
        <span class="rgpd-level-tag tag-n1">⚡ Niveau 1</span>
    </div>

    <div class="rgpd-n1-grid">

        {# Export données #}
        <a href="{{ path('app_account_data_export') }}" class="rgpd-n1-card">
            <div class="n1-icon">📦</div>
            <div>
                <div class="n1-title">Exporter mes données</div>
                <div class="n1-sub">Téléchargez vos données personnelles au format JSON — Art. 20 RGPD</div>
                {% if lastExportAt is defined and lastExportAt %}
                    <div class="export-throttle">Dernier export : {{ lastExportAt|date('d/m/Y') }}</div>
                {% endif %}
            </div>
            <div class="n1-link">Télécharger →</div>
        </a>

        {# Rectification — pointe sur profil existant #}
        <a href="{{ path('app_account_profil') }}" class="rgpd-n1-card">
            <div class="n1-icon">✏️</div>
            <div>
                <div class="n1-title">Rectifier mon profil</div>
                <div class="n1-sub">Modifiez directement vos informations personnelles — Art. 16 RGPD</div>
            </div>
            <div class="n1-link">Modifier →</div>
        </a>

        {# Consentements #}
        <a href="{{ path('app_account_preferences_page') }}" class="rgpd-n1-card">
            <div class="n1-icon">🔔</div>
            <div>
                <div class="n1-title">Gérer mes consentements</div>
                <div class="n1-sub">Activez ou révoquez vos consentements marketing — Art. 7 RGPD</div>
                <div style="margin-top:6px;">
                    {% if hasActiveConsent is defined %}
                        {% if hasActiveConsent %}
                            <span class="badge badge-paid" style="font-size:11px;">✅ Actif</span>
                        {% else %}
                            <span class="badge badge-cancelled" style="font-size:11px;">⭕ Inactif</span>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            <div class="n1-link">Gérer →</div>
        </a>

    </div>
</div>

{# ══════════════════════════════════════════════════════════════════
   NIVEAU 2 — DEMANDES FORMELLES
   ══════════════════════════════════════════════════════════════════ #}
<div class="card" style="margin-top: 20px;">
    <div class="rgpd-section-label">
        Demandes formelles — délai 30 jours maximum
        <span class="rgpd-level-tag tag-n2">📋 Niveau 2</span>
    </div>

    <div class="rgpd-n2-info">
        <strong>Ces demandes nécessitent une vérification manuelle.</strong>
        Vous recevrez un accusé de réception par email et une réponse sous 30 jours (Art. 12 RGPD).
        Contact : <strong>rgpd@num-ecard.com</strong>
    </div>

    <div class="rgpd-n2-grid">

        {# Effacement — route déjà existante #}
        <a href="{{ path('account_delete_request') }}" class="rgpd-n2-item exists">
            <div class="n2-dot dot-red"></div>
            <div>
                <div class="n2-label">🗑️ Droit à l'effacement</div>
                <div class="n2-sub">Suppression définitive de votre compte et de vos données — Art. 17 RGPD</div>
                <span class="n2-badge badge-exists">Disponible</span>
            </div>
        </a>

        {# Opposition — formulaire v2 #}
        <a href="{{ path('rgpd_formulaire') }}?droit=opposition" class="rgpd-n2-item">
            <div class="n2-dot dot-amber"></div>
            <div>
                <div class="n2-label">🚫 Droit d'opposition</div>
                <div class="n2-sub">Refuser un traitement basé sur l'intérêt légitime — Art. 21 RGPD</div>
                <span class="n2-badge badge-form">Formulaire</span>
            </div>
        </a>

        {# Limitation — formulaire v2 #}
        <a href="{{ path('rgpd_formulaire') }}?droit=limitation" class="rgpd-n2-item">
            <div class="n2-dot dot-blue"></div>
            <div>
                <div class="n2-label">⏸️ Droit à la limitation</div>
                <div class="n2-sub">Geler temporairement le traitement de vos données — Art. 18 RGPD</div>
                <span class="n2-badge badge-form">Formulaire</span>
            </div>
        </a>

        {# Réclamation — formulaire v2 #}
        <a href="{{ path('rgpd_formulaire') }}?droit=reclamation" class="rgpd-n2-item">
            <div class="n2-dot dot-grey"></div>
            <div>
                <div class="n2-label">📋 Information / Réclamation</div>
                <div class="n2-sub">Question générale ou réclamation CNIL — Art. 77 RGPD</div>
                <span class="n2-badge badge-form">Formulaire</span>
            </div>
        </a>

    </div>
</div>

{# ══════════════════════════════════════════════════════════════════
   NOTE DE BAS DE PAGE RGPD
   ══════════════════════════════════════════════════════════════════ #}
<div style="margin-top: 20px; padding: 16px 20px; background: #f5f5f7; border-radius: 12px; font-size: 12px; color: #6e6e73; line-height: 1.7;">
    <strong style="color: #3a3a3c;">Responsable du traitement :</strong> SAS SANAGENCY — 8 place Roger Salengro, 31000 Toulouse — SIREN 932 944 242<br>
    <strong style="color: #3a3a3c;">Référent RGPD :</strong> Patrice (Décision n° 2026-RGPD-001) — <a href="mailto:rgpd@num-ecard.com" style="color: #0071e3;">rgpd@num-ecard.com</a><br>
    Vous pouvez déposer une réclamation auprès de la <a href="https://www.cnil.fr" target="_blank" rel="noopener" style="color: #0071e3;">CNIL (cnil.fr)</a> si vous estimez que vos droits ne sont pas respectés.
</div>
{% endblock %}