{# templates/admin/rgpd/show.html.twig #}
{% extends 'account/base_account.html.twig' %}

{% block page_title %}Demande RGPD #{{ demande.id }}{% endblock %}

{% block content %}

<div class="page-header">
    <h1 class="page-title">
        🔒 Demande #{{ demande.id }}
        {% set statusColors = {'pending':'#ff9500','processing':'#667eea','processed':'#34c759','refused':'#86868b','failed':'#ff3b30'} %}
        <span style="display:inline-block;padding:4px 12px;border-radius:20px;font-size:14px;
                     font-weight:600;color:white;background:{{ statusColors[demande.status] ?? '#86868b' }};
                     vertical-align:middle;margin-left:8px;">
            {{ demande.statusLabel }}
        </span>
        {% if demande.isOverdue %}
            <span style="display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;
                         font-weight:600;color:white;background:#ff3b30;vertical-align:middle;margin-left:6px;">
                ⚠️ EN RETARD
            </span>
        {% endif %}
    </h1>
    <p class="page-subtitle">{{ demande.typeLabel }}</p>
</div>

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label == 'error' ? 'error' : (label == 'success' ? 'success' : 'warning') }}">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}

{# ── Layout 2 colonnes sur desktop, 1 colonne mobile ── #}
<div style="display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;">

    {# ── Colonne gauche ── #}
    <div>

        {# Infos demandeur #}
        <div class="card">
            <div class="card-title">👤 Demandeur</div>
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label">Nom</div>
                    <div class="detail-value">{{ demande.nomDemandeur ?? '—' }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Email</div>
                    <div class="detail-value">
                        <a href="mailto:{{ demande.emailDemandeur }}" style="color:#667eea;">
                            {{ demande.emailDemandeur ?? '—' }}
                        </a>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">IP</div>
                    <div class="detail-value" style="font-family:monospace;font-size:13px;">
                        {{ demande.requestIp ?? '—' }}
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Soumis le</div>
                    <div class="detail-value">{{ demande.requestedAt|date('d/m/Y à H:i') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Échéance légale</div>
                    <div class="detail-value" style="{{ demande.isOverdue ? 'color:#ff3b30;font-weight:700;' : (demande.isDeadlineClose ? 'color:#ff9500;font-weight:600;' : '') }}">
                        {% if demande.deadlineAt %}
                            {{ demande.deadlineAt|date('d/m/Y') }}
                        {% else %}—{% endif %}
                    </div>
                </div>
                {% if demande.processedAt %}
                <div class="detail-item">
                    <div class="detail-label">Traité le</div>
                    <div class="detail-value">{{ demande.processedAt|date('d/m/Y à H:i') }}</div>
                </div>
                {% endif %}
            </div>
        </div>

        {# Compte associé #}
        {% if user %}
        <div class="card">
            <div class="card-title">🧑‍💻 Compte associé</div>
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label">Email compte</div>
                    <div class="detail-value">{{ user.email }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Inscrit le</div>
                    <div class="detail-value">{{ user.createdAt ? user.createdAt|date('d/m/Y') : '—' }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Commandes</div>
                    <div class="detail-value">{{ commandes|length }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Total dépensé</div>
                    <div class="detail-value">{{ user.totalSpent|number_format(2, ',', ' ') }} € TTC</div>
                </div>
            </div>
            <div style="margin-top:12px;">
                <a href="{{ path('app_admin_user_show', {id: user.id}) }}"
                   class="btn btn-secondary" target="_blank">
                    Voir le profil complet →
                </a>
            </div>
        </div>

        {# Commandes #}
        {% if commandes|length > 0 %}
        <div class="card" style="{{ hasBlockingCommandes ? 'border:1px solid rgba(255,59,48,0.4);' : '' }}">
            <div class="card-title" style="{{ hasBlockingCommandes ? 'color:#ff3b30;' : '' }}">
                🛒 Commandes
                {% if hasBlockingCommandes %}
                    <span style="display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;
                                 font-weight:600;color:white;background:#ff3b30;margin-left:8px;">
                        ⚠️ Commande bloquante
                    </span>
                {% endif %}
            </div>
            {% for commande in commandes %}
            <div style="display:flex;justify-content:space-between;align-items:center;
                        padding:12px 0;border-bottom:1px solid #f5f5f7;flex-wrap:wrap;gap:8px;
                        {{ commande.status == 'pending' ? 'background:rgba(255,59,48,0.05);padding:12px;border-radius:8px;' : '' }}">
                <div>
                    <div style="font-weight:600;font-size:14px;font-family:monospace;">
                        {{ commande.reference }}
                    </div>
                    <div style="font-size:12px;color:#86868b;">{{ commande.packLabel }}</div>
                </div>
                <div style="display:flex;gap:12px;align-items:center;">
                    <span style="padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
                                 color:white;background:{{ commande.status == 'pending' ? '#ff3b30' : (commande.isPaid ? '#34c759' : '#86868b') }};">
                        {{ commande.statusLabel }}
                    </span>
                    <span style="font-size:13px;color:#1d1d1f;font-weight:600;">{{ commande.totalTTC }} €</span>
                </div>
            </div>
            {% endfor %}
            {% if hasBlockingCommandes %}
            <div class="alert alert-error" style="margin-top:12px;margin-bottom:0;">
                ⛔ Une commande est en statut <strong>pending</strong>.
                Annulez ou soldez cette commande avant d'exécuter la suppression.
            </div>
            {% endif %}
        </div>
        {% endif %}

        {% else %}
        <div class="card">
            <div class="alert alert-warning">
                Le compte associé a déjà été anonymisé ou est introuvable.
            </div>
        </div>
        {% endif %}

        {# Notes internes #}
        <div class="card">
            <div class="card-title">📝 Notes internes</div>
            {% if demande.notesAdmin %}
                <pre style="white-space:pre-wrap;font-size:13px;color:#1d1d1f;
                            background:#f5f5f7;padding:12px;border-radius:8px;margin-bottom:16px;
                            font-family:-apple-system,sans-serif;line-height:1.6;">{{ demande.notesAdmin }}</pre>
            {% else %}
                <p style="color:#86868b;font-size:14px;margin-bottom:16px;">Aucune note pour l'instant.</p>
            {% endif %}

            {% if demande.status not in ['processed', 'refused'] %}
            <form method="post" action="{{ path('app_admin_rgpd_note', {id: demande.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('rgpd_note_' ~ demande.id) }}">
                <div class="form-group">
                    <textarea name="note" rows="3"
                              style="width:100%;padding:12px;border:1.5px solid #d2d2d7;border-radius:10px;
                                     font-size:14px;resize:vertical;font-family:inherit;"
                              placeholder="Ajouter une note interne…"></textarea>
                </div>
                <button type="submit" class="btn btn-secondary">Ajouter la note</button>
            </form>
            {% endif %}
        </div>

    </div>

    {# ── Colonne droite : Actions ── #}
    <div style="position:sticky;top:20px;">
        <div class="card">
            <div class="card-title">⚡ Actions</div>

            {% if demande.status == 'pending' %}
            <form method="post" action="{{ path('app_admin_rgpd_status', {id: demande.id}) }}"
                  style="margin-bottom:12px;">
                <input type="hidden" name="_token" value="{{ csrf_token('rgpd_status_' ~ demande.id) }}">
                <input type="hidden" name="status" value="processing">
                <input type="hidden" name="note" value="Prise en charge de la demande.">
                <button type="submit" class="btn btn-primary" style="width:100%;">
                    🔄 Prendre en charge
                </button>
            </form>
            {% endif %}

            {% if demande.status in ['pending', 'processing'] and demande.type == 'suppression' %}
            <div style="background:#fff5f5;border:1px solid rgba(255,59,48,0.3);
                        border-radius:12px;padding:16px;margin-bottom:12px;">
                <p style="font-size:13px;color:#ff3b30;font-weight:600;margin-bottom:6px;">
                    ⚠️ Action irréversible
                </p>
                <p style="font-size:12px;color:#6e6e73;margin-bottom:12px;line-height:1.5;">
                    Anonymise le compte, supprime les cartes et envoie l'email de confirmation.
                    Les commandes et factures sont conservées.
                </p>
                {% if hasBlockingCommandes %}
                    <div class="alert alert-error" style="margin-bottom:0;font-size:12px;">
                        ⛔ Commande pending — solde d'abord.
                    </div>
                {% else %}
                    <form method="post" action="{{ path('app_admin_rgpd_anonymize', {id: demande.id}) }}"
                          onsubmit="return confirm('Confirmer l\'anonymisation du compte {{ demande.emailDemandeur }} ? Cette action est irréversible.')">
                        <input type="hidden" name="_token"
                               value="{{ csrf_token('rgpd_anonymize_' ~ demande.id) }}">
                        <button type="submit"
                                style="width:100%;padding:12px;background:#ff3b30;color:white;border:none;
                                       border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;">
                            🗑️ Exécuter l'anonymisation
                        </button>
                    </form>
                {% endif %}
            </div>
            {% endif %}

            {% if demande.status in ['pending', 'processing'] and demande.type != 'suppression' %}
            <div style="background:#D5F5E3;border:1px solid #A9DFBF;border-radius:12px;padding:16px;margin-bottom:12px;">
                <p style="font-size:12px;color:#1A7A4A;font-weight:600;margin-bottom:8px;">
                    ✅ Répondre au client et clôturer :
                </p>
                <form method="post" action="{{ path('app_admin_rgpd_repondre', {id: demande.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('rgpd_repondre_' ~ demande.id) }}">
                    <textarea name="reponse" rows="4" required
                              style="width:100%;padding:10px;border:1.5px solid #A9DFBF;border-radius:8px;
                                     font-size:13px;resize:vertical;font-family:inherit;margin-bottom:8px;"
                              placeholder="Votre réponse au client… (sera envoyée par email)"></textarea>
                    <button type="submit"
                            style="width:100%;padding:10px;background:#1A7A4A;color:white;border:none;
                                   border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;">
                        📧 Envoyer la réponse et clôturer
                    </button>
                </form>
            </div>
            {% endif %}

            {% if demande.status in ['pending', 'processing'] %}
            <div style="background:#f5f5f7;border-radius:12px;padding:16px;">
                <p style="font-size:12px;color:#6e6e73;margin-bottom:8px;">
                    Refuser la demande (motif obligatoire — sera envoyé au client) :
                </p>
                <form method="post" action="{{ path('app_admin_rgpd_status', {id: demande.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('rgpd_status_' ~ demande.id) }}">
                    <input type="hidden" name="status" value="refused">
                    <textarea name="note" rows="2" required
                              style="width:100%;padding:10px;border:1.5px solid #d2d2d7;border-radius:8px;
                                     font-size:13px;resize:none;font-family:inherit;margin-bottom:8px;"
                              placeholder="Motif du refus…"></textarea>
                    <button type="submit" class="btn btn-secondary" style="width:100%;font-size:13px;">
                        Refuser la demande
                    </button>
                </form>
            </div>
            {% endif %}

            {% if demande.status in ['processed', 'refused'] %}
            <div class="alert alert-success">
                ✅ Demande clôturée le {{ demande.processedAt|date('d/m/Y') }}
            </div>
            {% endif %}

        </div>

        <div style="margin-top:12px;">
            <a href="{{ path('app_admin_rgpd_index') }}" class="btn btn-secondary" style="width:100%;text-align:center;">
                ← Retour à la liste
            </a>
        </div>
    </div>

</div>

<style>
@media (max-width: 768px) {
    div[style*="grid-template-columns:1fr 320px"] {
        display: block !important;
    }
    div[style*="position:sticky"] {
        position: static !important;
        margin-top: 0 !important;
    }
}
</style>
{% endblock %}