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

{% block page_title %}Demandes RGPD{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .rgpd-tabs {
            display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
        }
        .rgpd-tab {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
            text-decoration: none; border: 1.5px solid #e5e5ea;
            background: white; color: #6e6e73; transition: all 0.15s;
        }
        .rgpd-tab:hover { border-color: #c0c0c8; color: #1d1d1f; }
        .rgpd-tab.active { background: #1A3C5E; color: white; border-color: #1A3C5E; }
        .rgpd-tab.active.urgent { background: #C0392B; border-color: #C0392B; }
        .rgpd-tab .count-badge {
            background: rgba(255,255,255,0.25); border-radius: 20px;
            padding: 1px 7px; font-size: 11px;
        }
        .rgpd-tab:not(.active) .count-badge { background: #f0f0f5; color: #6e6e73; }

        .demande-card {
            background: white; border: 1.5px solid #e5e5ea;
            border-radius: 14px; padding: 20px 24px; margin-bottom: 14px;
        }
        .demande-card.suppression { border-left: 4px solid #ff3b30; }
        .demande-card.opposition  { border-left: 4px solid #ff9500; }
        .demande-card.limitation  { border-left: 4px solid #0071e3; }
        .demande-card.urgent      { border-left: 4px solid #C0392B !important; }

        .demande-header {
            display: flex; justify-content: space-between;
            align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
        }
        .demande-ref {
            font-family: monospace; font-size: 12px;
            background: #f5f5f7; color: #1A3C5E; padding: 2px 8px; border-radius: 4px;
        }
        .type-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 3px 10px; border-radius: 20px;
        }
        .badge-suppression { background: #ffe8e8; color: #C0392B; }
        .badge-opposition  { background: #fff3cd; color: #b45309; }
        .badge-limitation  { background: #e8f0ff; color: #1A3C5E; }
        .badge-other       { background: #f5f5f7; color: #6e6e73; }

        .deadline-ok     { color: #1a7a42; font-weight: 600; }
        .deadline-warn   { color: #b45309; font-weight: 600; }
        .deadline-urgent { color: #C0392B; font-weight: 700; }

        .meta-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px; margin: 12px 0;
        }
        .meta-item .meta-label { font-size: 11px; color: #86868b; margin-bottom: 2px; }
        .meta-item .meta-value { font-size: 13px; font-weight: 600; color: #1d1d1f; word-break: break-all; }

        .notes-box {
            font-size: 12px; color: #6e6e73; background: #fffbeb;
            border-left: 3px solid #f59e0b; padding: 8px 12px;
            border-radius: 0 6px 6px 0; margin-top: 10px;
            white-space: pre-line; line-height: 1.6;
        }
        .demande-actions {
            display: flex; gap: 10px; flex-wrap: wrap;
            margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f5;
        }

        /* ── Modales ── */
            width: 100%; padding: 10px 12px;
            border: 1.5px solid #e5e5ea; border-radius: 8px;
            font-size: 13px; font-family: inherit;
            margin-bottom: 12px; resize: vertical;
        }

        .empty-state { text-align: center; padding: 60px 20px; color: #86868b; font-size: 14px; }
        .empty-state .icon { font-size: 40px; margin-bottom: 12px; }
    </style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">🔒 Demandes RGPD</h1>
    <p class="page-subtitle">Gestion des droits des personnes — Art. 12 RGPD — Délai légal : 30 jours</p>
</div>

{# ── Onglets ── #}
<div class="rgpd-tabs">
    <a href="{{ path('app_admin_rgpd_index', {statut: 'pending'}) }}"
       class="rgpd-tab {{ statut_actif == 'pending' ? 'active' ~ (counts.pending > 0 ? ' urgent' : '') : '' }}">
        ⏳ En attente <span class="count-badge">{{ counts.pending }}</span>
    </a>
    <a href="{{ path('app_admin_rgpd_index', {statut: 'processed'}) }}"
       class="rgpd-tab {{ statut_actif == 'processed' ? 'active' : '' }}">
        ✅ Traitées <span class="count-badge">{{ counts.processed }}</span>
    </a>
    <a href="{{ path('app_admin_rgpd_index', {statut: 'refused'}) }}"
       class="rgpd-tab {{ statut_actif == 'refused' ? 'active' : '' }}">
        ❌ Refusées <span class="count-badge">{{ counts.refused }}</span>
    </a>
</div>

{# ── Liste ── #}
{% if demandes is empty %}
    <div class="empty-state">
        <div class="icon">🎉</div>
        <p>Aucune demande
            {{ statut_actif == 'pending' ? 'en attente'
             : (statut_actif == 'processed' ? 'traitée' : 'refusée') }}.
        </p>
    </div>
{% else %}
    {% for demande in demandes %}
        {% set jours = (demande.deadlineAt and statut_actif == 'pending')
            ? (((demande.deadlineAt|date('U') - 'now'|date('U')) / 86400)|round(0, 'ceil'))
            : null %}
        {% set isUrgent = jours is not null and jours <= 7 %}
        {% set did = demande.id %}

        <div class="demande-card {{ demande.type }} {{ isUrgent ? 'urgent' : '' }}">

            {# En-tête #}
            <div class="demande-header">
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                    <span class="type-badge badge-{{ demande.type in ['suppression','opposition','limitation'] ? demande.type : 'other' }}">
                        {{ demande.typeLabel }}
                    </span>
                    <span class="demande-ref">#{{ did }}</span>
                    {% if demande.isOverdue %}
                        <span style="font-size:11px;background:#ffe8e8;color:#C0392B;padding:2px 8px;border-radius:20px;font-weight:700;">⛔ DÉPASSÉ</span>
                    {% endif %}
                </div>
                <div style="text-align:right;">
                    <div style="font-size:12px;color:#86868b;">{{ demande.requestedAt|date('d/m/Y à H:i') }}</div>
                    {% if jours is not null %}
                        <div class="{{ jours <= 0 ? 'deadline-urgent' : (jours <= 7 ? 'deadline-warn' : 'deadline-ok') }}" style="font-size:12px;">
                            {% if jours <= 0 %}⛔ DÉLAI DÉPASSÉ
                            {% elseif jours <= 3 %}🔴 J-{{ jours }} — URGENT
                            {% elseif jours <= 7 %}🟡 J-{{ jours }} jours
                            {% else %}🟢 Échéance {{ demande.deadlineAt|date('d/m/Y') }}
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>

            {# Métadonnées #}
            <div class="meta-grid">
                <div class="meta-item">
                    <div class="meta-label">Demandeur</div>
                    <div class="meta-value">{{ demande.nomDemandeur ?? '—' }}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Email</div>
                    <div class="meta-value">{{ demande.emailDemandeur ?? '—' }}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Statut</div>
                    <div class="meta-value">{{ demande.statusLabel }}</div>
                </div>
                {% if demande.user %}
                <div class="meta-item">
                    <div class="meta-label">Compte lié</div>
                    <div class="meta-value" style="color:#1a7a42;">
                        ✅ User#{{ demande.user.id ?? '?' }}
                        <a href="{{ path('app_admin_user_show', {id: demande.user.id ?? 0}) }}"
                           style="font-size:11px;color:#0071e3;margin-left:4px;">Voir →</a>
                    </div>
                </div>
                {% else %}
                <div class="meta-item">
                    <div class="meta-label">Compte lié</div>
                    <div class="meta-value" style="color:#86868b;">Aucun compte trouvé</div>
                </div>
                {% endif %}
                {% if demande.requestIp %}
                <div class="meta-item">
                    <div class="meta-label">IP</div>
                    <div class="meta-value" style="font-family:monospace;font-size:11px;">{{ demande.requestIp }}</div>
                </div>
                {% endif %}
            </div>

            {# Notes admin #}
            {% if demande.notesAdmin %}
                <div class="notes-box">
                    <strong style="font-size:11px;">Notes admin :</strong><br>{{ demande.notesAdmin }}
                </div>
            {% endif %}

            {# Actions #}
            {% if statut_actif == 'pending' %}
            <div class="demande-actions">
                {% if demande.type == 'suppression' %}
                    {% if demande.user %}
                        <form method="post"
                              action="{{ path('app_admin_rgpd_execute', {id: did}) }}"
                              onsubmit="return confirm('Confirmer la suppression définitive du compte de {{ demande.nomDemandeur }} ? Cette action est irréversible.');">
                            <input type="hidden" name="_token"
                                   value="{{ csrf_token('rgpd_execute_' ~ did) }}">
                            <button type="submit"
                                    class="btn btn-primary btn-sm"
                                    style="background:#C0392B;border-color:#C0392B;">
                                🗑️ Exécuter la suppression
                            </button>
                        </form>
                    {% else %}
                        <span style="font-size:12px;color:#86868b;padding:6px 0;">ℹ️ Aucun compte — traitement manuel</span>
                    {% endif %}
                {% endif %}
            </div>
            {% endif %}

        </div>

    {% endfor %}
{% endif %}
{% endblock %}