{% extends 'admin/base_admin.html.twig' %}

{% block title %}{{ user.fullName ?: user.email }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">
        <div class="user-info">
            <div class="user-avatar user-avatar-lg">
                {{ user.initiales }}
            </div>
            <span>{{ user.fullName ?: user.email }}</span>
        </div>
    </h1>
    <p class="page-subtitle">
        Inscrit le {{ user.createdAt|date('d/m/Y') }}
        {% if 'ROLE_ADMIN' in user.roles %}
            <span class="admin-badge" style="margin-left: 12px;">Administrateur</span>
        {% endif %}
    </p>
</div>

<a href="{{ path('app_admin_users') }}" class="btn btn-secondary btn-sm mb-3">
    ← Retour aux utilisateurs
</a>

<div class="admin-grid-1-1">
    <!-- INFORMATIONS -->
    <div class="card">
        <div class="card-title">👤 Informations</div>
        
        <div class="detail-item">
            <div class="detail-label">Email</div>
            <div class="detail-value">
                <a href="mailto:{{ user.email }}" class="link">{{ user.email }}</a>
            </div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Nom complet</div>
            <div class="detail-value">{{ user.fullName ?: 'Non renseigné' }}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Téléphone</div>
            <div class="detail-value">{{ user.telephone ?: 'Non renseigné' }}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Entreprise</div>
            <div class="detail-value">{{ user.entreprise ?: 'Non renseigné' }}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Adresse</div>
            <div class="detail-value">{{ user.adresse ?: 'Non renseigné' }}</div>
        </div>

        {# ── Bouton SAV : modifier les infos personnelles du compte ── #}
        <div style="margin-top: 16px;">
            <a href="{{ path('app_admin_user_edit', {id: user.id}) }}"
               class="btn btn-primary btn-sm" style="width: 100%;">
                ✏️ Modifier les informations du compte
            </a>
        </div>
    </div>

    <!-- STATISTIQUES & ACTIONS -->
    <div>
        <div class="card">
            <div class="card-title">📊 Statistiques</div>
            
            <div class="detail-item">
                <div class="detail-label">Inscription</div>
                <div class="detail-value"><span class="local-datetime" data-utc="{{ user.createdAt|date('Y-m-d\\TH:i:s') }}Z">{{ user.createdAt|date('d/m/Y à H:i') }}</span></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Dernière connexion</div>
                <div class="detail-value">{{ user.lastLoginAt ? '<span class="local-datetime" data-utc="' ~ user.lastLoginAt|date('Y-m-d\\TH:i:s') ~ 'Z">' ~ user.lastLoginAt|date('d/m/Y à H:i') ~ '</span>' : 'Jamais' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Email vérifié</div>
                <div class="detail-value">
                    {% if user.isVerified %}
                        <span class="text-success">✅ Oui</span>
                    {% else %}
                        <span class="text-error">❌ Non</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Nombre de 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 text-primary" style="font-size: 20px;">
                    {% set totalSpent = 0 %}
                    {% for commande in commandes %}
                        {% if commande.isPaid %}
                            {% set totalSpent = totalSpent + commande.totalTTC %}
                        {% endif %}
                    {% endfor %}
                    {{ totalSpent|number_format(2, ',', ' ') }} €
                </div>
            </div>
        </div>

        <!-- ACTIONS -->
        <div class="card">
            <div class="card-title">⚙️ Actions</div>
            
            <a href="mailto:{{ user.email }}" class="btn btn-secondary mb-2" style="width: 100%;">
                ✉️ Envoyer un email
            </a>

            {% if user.id != app.user.id %}
                <form method="post" action="{{ path('app_admin_user_toggle_admin', {id: user.id}) }}" class="mt-2">
                    {% if 'ROLE_ADMIN' in user.roles %}
                        <button type="submit" class="btn btn-danger" style="width: 100%;" onclick="return confirm('Retirer les droits admin à cet utilisateur ?')">
                            🔓 Retirer les droits admin
                        </button>
                    {% else %}
                        <button type="submit" class="btn btn-primary" style="width: 100%;" onclick="return confirm('Accorder les droits admin à cet utilisateur ?')">
                            🔐 Promouvoir administrateur
                        </button>
                    {% endif %}
                </form>
            {% else %}
                <p class="text-muted mt-2" style="text-align: center;">
                    Vous ne pouvez pas modifier vos propres droits.
                </p>
            {% endif %}
        </div>
    </div>
</div>

<!-- COMMANDES DE L'UTILISATEUR -->
<div class="card mt-3">
    <div class="card-title">📦 Commandes de cet utilisateur</div>
    
    {% if commandes is empty %}
        <div class="empty-state">
            <div class="empty-state-icon">📭</div>
            <div class="empty-state-title">Aucune commande</div>
            <p>Cet utilisateur n'a pas encore passé de commande.</p>
        </div>
    {% else %}
        <div class="table-container">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Référence</th>
                        <th>Date</th>
                        <th>Pack</th>
                        <th class="text-center">Cartes</th>
                        <th class="text-right">Montant TTC</th>
                        <th>Statut</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for commande in commandes %}
                    <tr>
                        <td><strong>{{ commande.reference }}</strong></td>
                        <td class="text-muted"><span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s') }}Z">{{ commande.createdAt|date('d/m/Y H:i') }}</span></td>
                        <td>{{ commande.packLabel }}</td>
                        <td class="text-center">{{ commande.beneficiaires|length }}</td>
                        <td class="text-right"><strong>{{ commande.totalTTC|number_format(2, ',', ' ') }} €</strong></td>
                        <td>
                            <span class="status-badge status-{{ commande.status }}">{{ commande.statusLabel }}</span>
                        </td>
                        <td class="text-right">
                            <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}" class="btn btn-secondary btn-sm">
                                Gérer
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════════
   SAV — CARTES DES BÉNÉFICIAIRES (modification admin gratuite)
══════════════════════════════════════════════════════════════════════ #}
{% set hasBeneficiaires = false %}
{% for commande in commandes %}
    {% if commande.beneficiaires|length > 0 %}
        {% set hasBeneficiaires = true %}
    {% endif %}
{% endfor %}

{% if hasBeneficiaires %}
<div class="card mt-3">
    <div class="card-title">
        🃏 Cartes numériques
        <span style="font-size: 12px; font-weight: 400; color: #86868b; margin-left: 8px;">
            SAV — modification gratuite admin, sans impacter le quota du client
        </span>
    </div>

    {% for commande in commandes %}
        {% if commande.beneficiaires|length > 0 %}
        <div style="margin-bottom: 24px;">

            {# En-tête de la commande #}
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f5f5f7; border-radius: 10px; margin-bottom: 12px;">
                <div>
                    <strong>{{ commande.reference }}</strong>
                    <span style="margin-left: 10px; font-size: 13px; color: #86868b;">{{ commande.packLabel }}</span>
                </div>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <span class="status-badge status-{{ commande.status }}">{{ commande.statusLabel }}</span>
                    <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}"
                       style="font-size: 12px; color: #1971c2; text-decoration: none;">
                        Voir la commande →
                    </a>
                </div>
            </div>

            {# Liste des bénéficiaires avec bouton modifier #}
            <div class="table-container">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Bénéficiaire</th>
                            <th>Fonction</th>
                            <th>Email carte</th>
                            <th class="text-center">Modifications</th>
                            <th class="text-center">Statut carte</th>
                            <th class="text-center">SAV</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for benef in commande.beneficiaires %}
                        <tr>
                            <td>
                                <strong>{{ benef.fullName }}</strong>
                                {% if benef.entreprise %}
                                    <div style="font-size: 12px; color: #86868b;">{{ benef.entreprise }}</div>
                                {% endif %}
                            </td>
                            <td class="text-muted">{{ benef.fonction ?: '—' }}</td>
                            <td class="text-muted">{{ benef.email ?: '—' }}</td>
                            <td class="text-center">
                                {% if benef.modificationCount == 0 %}
                                    <span style="color: #2f9e44; font-size: 13px; font-weight: 600;">
                                        1 gratuite disponible
                                    </span>
                                {% else %}
                                    <span style="color: #e67700; font-size: 13px;">
                                        {{ benef.modificationCount }} effectuée(s)
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if benef.isNeedsRegeneration %}
                                    <span style="color: #e67700; font-size: 12px; font-weight: 600;">⏳ À générer</span>
                                {% else %}
                                    <span style="color: #2f9e44; font-size: 12px;">✅ À jour</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <a href="{{ path('app_card_edit', {id: benef.id}) }}"
                                   class="btn btn-primary btn-sm"
                                   title="Modifier la carte de {{ benef.fullName }} (SAV - gratuit, sans impacter le quota)">
                                    ✏️ Modifier
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
    {% endfor %}
</div>
{% endif %}

{% endblock %}