{# templates/mon_compte/rgpd/droits.html.twig #}
{% extends 'account/base_account.html.twig' %}

{% block title %}Mes droits RGPD — NUM-ECARD{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
/* =============================================
   PAGE RGPD — DROITS PERSONNELS
   ============================================= */

.rgpd-page {
    max-width: 900px;
    padding: 8px 0 60px;
}

/* --- En-tête --- */
.rgpd-header {
    margin-bottom: 32px;
}
.rgpd-header h1 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}
.rgpd-intro {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    max-width: 680px;
    margin: 0;
    padding: 14px 18px;
    background: #f0f4ff;
    border-left: 4px solid #667eea;
    border-radius: 0 8px 8px 0;
}

/* --- Flashs --- */
.rgpd-flash {
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 500;
}
.rgpd-flash--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.rgpd-flash--warning { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.rgpd-flash--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* --- Grille des droits --- */
.rgpd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}
@media (max-width: 640px) {
    .rgpd-grid { grid-template-columns: 1fr; }
}

/* --- Carte droit --- */
.rgpd-card {
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow .2s, transform .2s;
}
.rgpd-card:hover {
    box-shadow: 0 6px 20px rgba(102,126,234,0.12);
    transform: translateY(-2px);
}
.rgpd-card--danger {
    border-color: #fecaca;
    background: #fff9f9;
}
.rgpd-card--danger:hover {
    box-shadow: 0 6px 20px rgba(239,68,68,0.1);
}

.rgpd-card__icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 4px;
}
.rgpd-card h2 {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.rgpd-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* --- Boutons --- */
.rgpd-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: opacity .15s, transform .15s;
    margin-top: 4px;
    align-self: flex-start;
}
.rgpd-btn:hover { opacity: .85; transform: translateY(-1px); }
.rgpd-btn--primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}
.rgpd-btn--secondary {
    background: #f0f4ff;
    color: #667eea;
    border: 1px solid #c7d2fe;
}
.rgpd-btn--danger {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.rgpd-btn--disabled {
    background: #f5f5f7;
    color: #aaa;
    cursor: not-allowed;
    border: 1px dashed #ddd;
}

/* --- Section historique --- */
.rgpd-historique {
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rgpd-historique h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
}
.rgpd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rgpd-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f5f5f7;
    color: #555;
    font-weight: 600;
    border-bottom: 1px solid #e8e8ed;
}
.rgpd-table th:first-child { border-radius: 8px 0 0 8px; }
.rgpd-table th:last-child  { border-radius: 0 8px 8px 0; }
.rgpd-table td {
    padding: 12px 12px;
    border-bottom: 1px solid #f5f5f7;
    color: #333;
    vertical-align: middle;
}
.rgpd-table tr:last-child td { border-bottom: none; }

/* Scroll horizontal sur mobile */
.rgpd-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

/* --- Badges statuts --- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.badge--pending    { background: #fef9c3; color: #854d0e; }
.badge--processing { background: #dbeafe; color: #1e40af; }
.badge--processed  { background: #dcfce7; color: #166534; }
.badge--failed     { background: #fee2e2; color: #991b1b; }
.badge--expired    { background: #f5f5f7; color: #888;    }

/* --- Section contact --- */
.rgpd-contact {
    background: #f8f9ff;
    border: 1px solid #e0e7ff;
    border-radius: 16px;
    padding: 20px 24px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}
.rgpd-contact h2 {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.rgpd-contact p { margin: 0 0 6px; }
.rgpd-contact a { color: #667eea; text-decoration: none; font-weight: 600; }
.rgpd-contact strong { color: #333; }
/* --- Email block avec copie --- */
.rgpd-email-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.rgpd-email-address {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    word-break: break-all;
}
</style>
{% endblock %}

{% block content %}
<div class="rgpd-page">

    {# --- En-tête --- #}
    <div class="rgpd-header">
        <h1>🛡️ Vos droits sur vos données personnelles</h1>
        <p class="rgpd-intro">
            Conformément au RGPD, vous disposez de droits sur vos données personnelles
            détenues par NUM-ECARD / SAS SANAGENCY. Exercez-les directement depuis cette page.
        </p>
    </div>

    {# --- Flashs --- #}
    {% for message in app.flashes('success') %}
        <div class="rgpd-flash rgpd-flash--success">✅ {{ message }}</div>
    {% endfor %}
    {% for message in app.flashes('warning') %}
        <div class="rgpd-flash rgpd-flash--warning">⚠️ {{ message }}</div>
    {% endfor %}
    {% for message in app.flashes('error') %}
        <div class="rgpd-flash rgpd-flash--error">❌ {{ message }}</div>
    {% endfor %}

    {# --- Grille des droits --- #}
    <div class="rgpd-grid">

        {# Portabilité #}
        <div class="rgpd-card">
            <div class="rgpd-card__icon">📦</div>
            <h2>Droit à la portabilité</h2>
            <p>Téléchargez toutes vos données personnelles dans un format JSON lisible et réutilisable.</p>
            {% if pendingPorta %}
                <button class="rgpd-btn rgpd-btn--disabled" disabled>
                    ⏳ Export en cours…
                </button>
            {% else %}
                <a href="{{ path('rgpd_export_form') }}" class="rgpd-btn rgpd-btn--primary">
                    📥 Exporter mes données
                </a>
            {% endif %}
        </div>

        {# Accès #}
        <div class="rgpd-card">
            <div class="rgpd-card__icon">👁️</div>
            <h2>Droit d'accès</h2>
            <p>Demandez à consulter les données personnelles que nous détenons vous concernant.</p>
            <div class="rgpd-email-block">
                <span class="rgpd-email-address">rgpd@num-ecard.com</span>
                <button class="rgpd-btn rgpd-btn--secondary rgpd-copy-btn" data-email="rgpd@num-ecard.com" data-subject="Demande d'accès RGPD">
                    📋 Copier l'adresse
                </button>
            </div>
        </div>

        {# Rectification #}
        <div class="rgpd-card">
            <div class="rgpd-card__icon">✏️</div>
            <h2>Droit de rectification</h2>
            <p>Corrigez vos informations personnelles directement depuis votre profil.</p>
            <a href="{{ path('app_account_profil') }}" class="rgpd-btn rgpd-btn--secondary">
                👤 Modifier mon profil
            </a>
        </div>

        {# Suppression #}
        <div class="rgpd-card rgpd-card--danger">
            <div class="rgpd-card__icon">🗑️</div>
            <h2>Droit à l'effacement</h2>
            <p>Demandez la suppression définitive de votre compte et de toutes vos données.</p>
            <div class="rgpd-email-block">
                <span class="rgpd-email-address">rgpd@num-ecard.com</span>
                <button class="rgpd-btn rgpd-btn--danger rgpd-copy-btn" data-email="rgpd@num-ecard.com" data-subject="Demande de suppression RGPD">
                    📋 Copier l'adresse
                </button>
            </div>
        </div>

    </div>

    {# --- Historique des demandes --- #}
    {% if historique is not empty %}
    <section class="rgpd-historique">
        <h2>📋 Historique de vos demandes</h2>
        <div class="rgpd-table-wrap">
            <table class="rgpd-table">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Date de demande</th>
                        <th>Statut</th>
                        <th>Traité le</th>
                    </tr>
                </thead>
                <tbody>
                    {% for demande in historique %}
                    <tr>
                        <td>{{ demande.type | capitalize }}</td>
                        <td>{{ demande.requestedAt | date('d/m/Y à H:i') }}</td>
                        <td>
                            <span class="badge badge--{{ demande.status }}">
                                {% if demande.status == 'pending' %}En attente
                                {% elseif demande.status == 'processing' %}En cours
                                {% elseif demande.status == 'processed' %}Traité
                                {% elseif demande.status == 'failed' %}Échoué
                                {% elseif demande.status == 'expired' %}Expiré
                                {% endif %}
                            </span>
                        </td>
                        <td>{{ demande.processedAt ? demande.processedAt | date('d/m/Y à H:i') : '—' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    {% endif %}

    {# --- Contact DPO --- #}
    <section class="rgpd-contact">
        <h2>📬 Contact & délais</h2>
        <p>
            Pour toute demande, contactez notre responsable de traitement :
            <a href="mailto:rgpd@num-ecard.com">rgpd@num-ecard.com</a>
        </p>
        <p>
            Délai : <strong>accusé de réception sous 72h</strong> — <strong>traitement sous 30 jours</strong>.
        </p>
    </section>

</div>

<script>
document.querySelectorAll('.rgpd-copy-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var email = btn.dataset.email;
        navigator.clipboard.writeText(email).then(function() {
            var original = btn.innerHTML;
            btn.innerHTML = '✅ Adresse copiée !';
            btn.disabled = true;
            setTimeout(function() {
                btn.innerHTML = original;
                btn.disabled = false;
            }, 2500);
        });
    });
});
</script>

{% endblock %}