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

{% block title %}Mon profil - Administration - Association E-Cosplay{% endblock %}

{% block admin_content %}
<div class="page-container">
    <h1 class="text-2xl font-bold heading-page mb-8">Mon profil</h1>

    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="mb-6 p-4 glass font-medium text-sm {{ type == 'success' ? 'border-green-300 text-green-800' : 'border-red-300 text-red-800' }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}

    <div class="flex flex-col gap-8">

        {# Informations du profil (lecture seule) #}
        <section>
            <h2 class="text-xl font-bold uppercase mb-4">Informations</h2>
            <div class="glass p-6">
                <div class="flex items-center gap-4 mb-6">
                    {% if app.user.avatar %}
                        <img src="{{ ('uploads/avatars/' ~ app.user.avatar) | imagine_filter('avatar') }}" alt="Avatar" class="w-16 h-16 glass object-contain">
                    {% else %}
                        <div class="w-16 h-16 bg-[#fabf04] glass flex items-center justify-center font-bold text-xl text-gray-900">
                            {{ app.user.firstName|first }}{{ app.user.lastName|first }}
                        </div>
                    {% endif %}
                    <div>
                        <p class="font-bold text-lg">{{ app.user.fullName }}</p>
                        <p class="text-xs text-gray-500 font-mono">{{ app.user.email }}</p>
                        {% if is_granted('ROLE_ROOT') %}
                            <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[10px]mt-1 inline-block">Super Admin</span>
                        {% else %}
                            <span class="px-2 py-0.5 bg-indigo-500/20 text-indigo-700 font-bold uppercase text-[10px]mt-1 inline-block">Employe</span>
                        {% endif %}
                    </div>
                </div>

                <div class="border-2 border-gray-200 bg-gray-50 p-4">
                    <table class="w-full text-sm">
                        <tr class="border-b border-white/20">
                            <th scope="row" class="py-2 pr-4 font-bold uppercase text-xs text-gray-400 w-1/3 text-left">Prenom</th>
                            <td class="py-2 font-bold">{{ app.user.firstName }}</td>
                        </tr>
                        <tr class="border-b border-white/20">
                            <th scope="row" class="py-2 pr-4 font-bold uppercase text-xs text-gray-400 text-left">Nom</th>
                            <td class="py-2 font-bold">{{ app.user.lastName }}</td>
                        </tr>
                        <tr class="border-b border-white/20">
                            <th scope="row" class="py-2 pr-4 font-bold uppercase text-xs text-gray-400 text-left">Email</th>
                            <td class="py-2 font-bold font-mono text-xs">{{ app.user.email }}</td>
                        </tr>
                        <tr class="border-b border-white/20">
                            <th scope="row" class="py-2 pr-4 font-bold uppercase text-xs text-gray-400 text-left">Connexion</th>
                            <td class="py-2">
                                {% if app.user.keycloakId %}
                                    <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Keycloak</span>
                                {% else %}
                                    <span class="px-2 py-0.5 bg-gray-500/20 text-gray-600 font-bold uppercase text-[10px]">Local</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" class="py-2 pr-4 font-bold uppercase text-xs text-gray-400 text-left">Inscrit le</th>
                            <td class="py-2 text-xs text-gray-500">{{ app.user.createdAt|date('d/m/Y a H:i') }}</td>
                        </tr>
                    </table>
                </div>

                {% if not is_granted('ROLE_ROOT') %}
                    <p class="text-[10px] text-gray-400 mt-3">Le prenom, nom et email ne peuvent pas etre modifies. Contactez un administrateur pour toute modification.</p>
                {% endif %}
            </div>
        </section>

        {# Avatar #}
        <section>
            <h2 class="text-xl font-bold uppercase mb-4">Avatar</h2>
            <div class="glass p-6">
                <div class="flex items-center gap-6">
                    {% if app.user.avatar %}
                        <img src="{{ ('uploads/avatars/' ~ app.user.avatar) | imagine_filter('avatar') }}" alt="Avatar" class="w-20 h-20 glass object-contain">
                    {% else %}
                        <div class="w-20 h-20 bg-[#fabf04] glass flex items-center justify-center font-bold text-2xl text-gray-900">
                            {{ app.user.firstName|first }}{{ app.user.lastName|first }}
                        </div>
                    {% endif %}
                    <div class="flex flex-col gap-3">
                        <form method="post" action="{{ path('app_admin_profil_avatar') }}" enctype="multipart/form-data" class="flex items-end gap-3">
                            <div>
                                <label for="avatar" class="block text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Image (JPG, PNG, WebP — max 2Mo)</label>
                                <input type="file" id="avatar" name="avatar" accept="image/jpeg,image/png,image/webp" required
                                       class="text-xs file:mr-3 file:py-2 file:px-4 file:border-2 file:border-gray-900 file:bg-[#fabf04] file:text-gray-900 file:font-bold file:uppercase file:text-[10px] file:tracking-widest file:cursor-pointer">
                            </div>
                            <button type="submit" class="px-4 py-2 btn-gold font-bold uppercase text-[10px] tracking-wider">
                                Envoyer
                            </button>
                        </form>
                        {% if app.user.avatar %}
                            <form method="post" action="{{ path('app_admin_profil_avatar_delete') }}">
                                <button type="submit" class="px-3 py-1 btn-glass text-red-600 font-bold uppercase text-[10px] tracking-wider">
                                    Supprimer l'avatar
                                </button>
                            </form>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>

        {# Modifier les informations (ROLE_ROOT uniquement) #}
        {% if is_granted('ROLE_ROOT') %}
        <section>
            <h2 class="text-xl font-bold uppercase mb-4">Modifier mes informations</h2>
            <div class="glass p-6">
                <form method="post" action="{{ path('app_admin_profil_update') }}" class="flex flex-col gap-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="firstName" class="block text-xs font-bold uppercase tracking-wider mb-2">Prenom</label>
                            <input type="text" id="firstName" name="firstName" value="{{ app.user.firstName }}" required
                                   class="w-full px-4 py-3 input-glass text-sm font-medium">
                        </div>
                        <div>
                            <label for="lastName" class="block text-xs font-bold uppercase tracking-wider mb-2">Nom</label>
                            <input type="text" id="lastName" name="lastName" value="{{ app.user.lastName }}" required
                                   class="w-full px-4 py-3 input-glass text-sm font-medium">
                        </div>
                    </div>
                    <div>
                        <label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2">Email</label>
                        <input type="email" id="email" name="email" value="{{ app.user.email }}" required
                               class="w-full px-4 py-3 input-glass text-sm font-medium">
                    </div>
                    {% if app.user.keycloakId %}
                        <p class="text-xs text-gray-500">Les modifications seront egalement appliquees dans Keycloak.</p>
                    {% endif %}
                    <button type="submit"
                            class="self-start px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
                        Enregistrer
                    </button>
                </form>
            </div>
        </section>
        {% endif %}

        {# Changer le mot de passe #}
        <section>
            <h2 class="text-xl font-bold uppercase mb-4">Changer le mot de passe</h2>
            <div class="glass p-6">
                <form method="post" action="{{ path('app_admin_profil_password') }}" class="flex flex-col gap-4">
                    <div>
                        <label for="current_password" class="block text-xs font-bold uppercase tracking-wider mb-2">Mot de passe actuel</label>
                        <input type="password" id="current_password" name="current_password" required
                               class="w-full px-4 py-3 input-glass text-sm font-medium"
                               placeholder="Votre mot de passe actuel">
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="new_password" class="block text-xs font-bold uppercase tracking-wider mb-2">Nouveau mot de passe</label>
                            <input type="password" id="new_password" name="new_password" required minlength="8"
                                   class="w-full px-4 py-3 input-glass text-sm font-medium"
                                   placeholder="Minimum 8 caracteres">
                        </div>
                        <div>
                            <label for="confirm_password" class="block text-xs font-bold uppercase tracking-wider mb-2">Confirmer</label>
                            <input type="password" id="confirm_password" name="confirm_password" required minlength="8"
                                   class="w-full px-4 py-3 input-glass text-sm font-medium"
                                   placeholder="Retapez le mot de passe">
                        </div>
                    </div>
                    {% if app.user.keycloakId %}
                        <p class="text-xs text-gray-500">Le mot de passe sera egalement mis a jour dans Keycloak.</p>
                    {% endif %}
                    <button type="submit"
                            class="self-start px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
                        Modifier le mot de passe
                    </button>
                </form>
            </div>
        </section>

    </div>
</div>
{% endblock %}
