{% extends 'na_admin/layout.html.twig' %}

{% block page_title %}{{ user.displayName }}{% endblock %}

{% block content %}

{% for msg in app.flashes('success') %}
    <div class="na-alert na-alert-success">{{ msg }}</div>
{% endfor %}

<div style="margin-bottom:1rem;">
    <a href="{{ path('na_admin_users') }}" style="font-size:0.85rem; color:#6b7a99; text-decoration:none;">
        <i class="fa fa-arrow-left"></i> Retour à la liste
    </a>
</div>

{# Header membre #}
<div class="na-card" style="margin-bottom:1.5rem;">
    <div class="na-card-body" style="display:flex; align-items:center; gap:1.5rem;">
        {% if user.avatarPath %}
            <img src="/uploads/avatars/{{ user.avatarPath }}" alt="Avatar"
                 style="width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid #e5e9f0; flex-shrink:0;">
        {% else %}
            <div style="width:72px; height:72px; border-radius:50%; background:#1e2a3a; color:#f5c400; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:bold; flex-shrink:0;">
                {{ user.firstName|first|upper }}{{ user.lastName|first|upper }}
            </div>
        {% endif %}
        <div>
            <h2 style="margin:0; font-size:1.3rem; color:#1e2a3a;">{{ user.firstName }} {{ user.lastName }}</h2>
            <div style="color:#6b7a99; font-size:0.85rem; margin-top:0.2rem;">{{ user.email }}</div>
            <div style="margin-top:0.5rem; display:flex; gap:0.4rem; flex-wrap:wrap;">
                {% if user.isBlocked %}
                    <span class="na-badge na-badge-danger">Bloqué</span>
                {% elseif user.isApproved == true %}
                    <span class="na-badge na-badge-success">Validé</span>
                {% elseif user.isApproved == false %}
                    <span class="na-badge na-badge-danger">Refusé</span>
                {% elseif user.profileCompleted %}
                    <span class="na-badge na-badge-warning">En attente</span>
                {% else %}
                    <span class="na-badge na-badge-secondary">Incomplet</span>
                {% endif %}
                {% if user.isAdmin %}<span class="na-badge na-badge-info">Admin</span>{% endif %}
                {% if user.isVerified %}<span class="na-badge na-badge-success">Email vérifié</span>{% endif %}
            </div>
        </div>
        <div style="margin-left:auto; display:flex; gap:0.5rem; flex-wrap:wrap;">
            {% if user.profileCompleted and user.isApproved != true and not user.isBlocked %}
                <a href="{{ path('na_admin_user_approve', {'id': user.id}) }}" class="na-btn na-btn-success"><i class="fa fa-check"></i> Approuver</a>
                <a href="{{ path('na_admin_user_reject', {'id': user.id}) }}" class="na-btn na-btn-danger"><i class="fa fa-times"></i> Refuser</a>
            {% endif %}
            {% if not user.isBlocked %}
                <form method="post" action="{{ path('na_admin_user_block', {'id': user.id}) }}" style="margin:0;" onsubmit="return confirm('Bloquer {{ user.displayName }} ?')">
                    <button type="submit" class="na-btn na-btn-warning"><i class="fa fa-ban"></i> Bloquer</button>
                </form>
            {% else %}
                <form method="post" action="{{ path('na_admin_user_unblock', {'id': user.id}) }}" style="margin:0;">
                    <button type="submit" class="na-btn na-btn-secondary"><i class="fa fa-unlock"></i> Débloquer</button>
                </form>
            {% endif %}
        </div>
    </div>
</div>

{# Informations #}
<div class="na-card" style="margin-bottom:1.5rem;">
    <div class="na-card-header"><h2>Identité</h2></div>
    <div class="na-card-body">
        <div class="na-detail-row">
            <div class="na-detail-cell"><strong>Prénom</strong>{{ user.firstName }}</div>
            <div class="na-detail-cell"><strong>Nom</strong>{{ user.lastName }}</div>
            <div class="na-detail-cell"><strong>Email</strong><a href="mailto:{{ user.email }}">{{ user.email }}</a></div>
        </div>
        <div class="na-detail-row">
            <div class="na-detail-cell"><strong>Pseudo</strong>{{ user.pseudo ?? '—' }}</div>
            <div class="na-detail-cell">
                <strong>Anonyme</strong>
                <span class="na-badge {% if user.isAnonymous %}na-badge-info{% else %}na-badge-secondary{% endif %}">{{ user.isAnonymous ? 'OUI' : 'NON' }}</span>
            </div>
            <div class="na-detail-cell">
                <strong>Genre</strong>
                {% if user.gender == 'homme' %}Masculin
                {% elseif user.gender == 'femme' %}Féminin
                {% elseif user.gender == 'non-binaire' %}Non-binaire
                {% elseif user.gender == 'autre' %}Autre
                {% else %}—{% endif %}
            </div>
        </div>
        <div class="na-detail-row">
            <div class="na-detail-cell">
                <strong>Date de naissance</strong>
                {{ user.birthDate ? user.birthDate|date('d/m/Y') : '—' }}
            </div>
            <div class="na-detail-cell">
                <strong>Âge</strong>
                {% if user.birthDate %}
                    {% set age = 'now'|date('Y') - user.birthDate|date('Y') %}
                    {% if 'now'|date('md') < user.birthDate|date('md') %}{% set age = age - 1 %}{% endif %}
                    {{ age }} ans
                {% else %}—{% endif %}
            </div>
            <div class="na-detail-cell"><strong>Membre depuis</strong>{{ user.createdAt|date('d/m/Y') }}</div>
        </div>
    </div>
</div>

<div class="na-card" style="margin-bottom:1.5rem;">
    <div class="na-card-header"><h2>Coordonnées</h2></div>
    <div class="na-card-body">
        <div class="na-detail-row">
            <div class="na-detail-cell"><strong>Téléphone</strong>{{ user.phone ?? '—' }}</div>
            <div class="na-detail-cell" style="flex:2;">
                <strong>Adresse</strong>
                {% if user.addressLine1 %}
                    {{ user.addressLine1 }}{% if user.addressLine2 %}, {{ user.addressLine2 }}{% endif %} — {{ user.postalCode }} {{ user.city }}, {{ user.country }}
                {% else %}—{% endif %}
            </div>
        </div>
    </div>
</div>

<div class="na-card" style="margin-bottom:1.5rem;">
    <div class="na-card-header"><h2>Vérification identité</h2></div>
    <div class="na-card-body">
        <div class="na-detail-row">
            <div class="na-detail-cell">
                <strong>Carte d'identité</strong>
                {% if user.idCardPath and user.isApproved != true %}
                    <a href="{{ path('na_admin_user_id_card', {'id': user.id}) }}" target="_blank" class="na-btn na-btn-primary na-btn-sm">
                        <i class="fa fa-file"></i> Voir la carte
                    </a>
                {% elseif user.isApproved == true %}
                    <span style="color:#6b7a99;">Supprimée après validation</span>
                {% else %}
                    <span style="color:#6b7a99;">Aucune</span>
                {% endif %}
            </div>
            <div class="na-detail-cell">
                <strong>Carte vérifiée</strong>
                <span class="na-badge {% if user.idVerified %}na-badge-success{% else %}na-badge-secondary{% endif %}">{{ user.idVerified ? 'OUI' : 'NON' }}</span>
            </div>
            <div class="na-detail-cell">
                <strong>Date de validation</strong>
                {{ user.approvalDate ? user.approvalDate|date('d/m/Y') : '—' }}
            </div>
        </div>
        {% if user.rejectedReason %}
        <div style="background:#fff3cd; border-radius:6px; padding:0.75rem 1rem; margin-top:0.5rem;">
            <strong style="font-size:0.78rem; text-transform:uppercase; letter-spacing:0.5px; color:#856404;">Motif de refus</strong>
            <div style="margin-top:0.3rem; font-size:0.875rem;">{{ user.rejectedReason|nl2br }}</div>
        </div>
        {% endif %}
    </div>
</div>

<div class="na-card">
    <div class="na-card-header"><h2>Divers</h2></div>
    <div class="na-card-body">
        <div class="na-detail-row">
            <div class="na-detail-cell">
                <strong>Diagnostic</strong>{{ user.diagnosis ?? '—' }}
            </div>
            <div class="na-detail-cell">
                <strong>Veut modérer</strong>
                <span class="na-badge {% if user.wantsToModerate %}na-badge-success{% else %}na-badge-secondary{% endif %}">{{ user.wantsToModerate ? 'OUI' : 'NON' }}</span>
            </div>
            <div class="na-detail-cell">
                <strong>Accepte géolocalisation</strong>
                <span class="na-badge {% if user.acceptsGeolocation %}na-badge-success{% else %}na-badge-secondary{% endif %}">{{ user.acceptsGeolocation ? 'OUI' : 'NON' }}</span>
            </div>
        </div>
    </div>
</div>

{% endblock %}