{% extends 'base.html.twig' %}

{# @var userData \App\Entity\User #}
{# @var form \Symfony\Component\Form\FormView #}
{# @var isEditMode bool #}

{% block title %}Ma page de profil | {{ parent() }}{% endblock %}

{% block body %}
    <div class="min-h-screen bg-bg-primaire py-8 w-full font-sora">
        {# Affichage du formulaire (seulement en mode édition) #}
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-3 gap-8">
            {% if isEditMode %}
                {{ form_start(form, {'attr': {'class': 'contents'}}) }}
            {% endif %}

            {# Colonne Photo #}
            <div class="flex flex-col text-text items-center">

                <div class="mt-16 flex-shrink-0">
                    {% if userData.image %}
                        {# Design avec photo #}
                        <img src="{{ asset('uploads/images/' ~ userData.image) }}"
                             alt="Photo de profil"
                             class="w-48 h-48 md:w-56 md:h-56 p-1 rounded-full ring-2 ring-gris-clair object-cover">
                    {% else %}
                        {# Design sans photo #}
                        <div
                            class="relative w-48 h-48 md:w-56 md:h-56 overflow-hidden bg-neutral-200 rounded-full flex items-end justify-center shadow-sm">
                            <svg class="w-5/6 h-5/6 text-neutral-500" fill="currentColor" viewBox="0 0 20 20"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                      clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    {% endif %}
                </div>

                <p class="text-2xl text-title font-caveat mt-6"> Ma photo</p>

                {# Gestion du dépôt d'un fichier image (Uniquement en mode édition) #}
                {% if isEditMode %}
                    <div class="w-full mt-4">
                        {{ form_label(form.image, 'Choisir un fichier', {
                            'label_attr': {'class': 'block mb-2.5 text-sm font-medium text-gris-fonce'}
                        }) }}
                        {{ form_widget(form.image, {
                            'attr': {
                                'class': 'cursor-pointer bg-white border border-gris-clair text-text text-sm rounded-lg focus:outline-none focus:ring-1 focus:ring-bouton focus:border-bouton block w-full shadow-sm placeholder-gris-moyen file:mr-4 file:py-2.5 file:px-4 file:border-0 file:border-r file:border-gris-clair file:bg-gris-clair file:text-gris-fonce hover:file:bg-gris-moyen transition-colors',
                                'aria-describedby': 'file_input_help'
                            }
                        }) }}
                        <p class="mt-1 text-sm text-gris-moyen" id="file_input_help">
                            JPG, JPEG, GIF ou PNG (Taille max : 8Mo).
                        </p>
                        <div class="text-red-500 text-xs mt-1 italic font-sora">
                            {{ form_errors(form.image) }}
                        </div>
                    </div>
                {% endif %}
            </div>

            {# Colonne Infos Persos #}
            <div class="md:col-span-2">

                {# Gestion des boutons d'action (Modifier / Annuler) et des titres #}
                <div class="relative flex items-center justify-center mb-6">
                    <h1 class="text-4xl font-caveat text-text m-0">Mon profil</h1>

                    <div class="absolute right-0">
                        {% if isEditMode %}
                            <a href="{{ path('app_user') }}"
                               class="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-gris-clair hover:bg-gray-50 text-text text-sm font-bold rounded-md shadow-sm transition-colors">
                                ❌ Annuler
                            </a>
                        {% else %}
                            <a href="{{ path('app_user', {'edit': 1}) }}"
                               class="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-gris-clair hover:bg-gray-50 text-text text-sm font-bold rounded-md shadow-sm transition-colors">
                                ✏️ Modifier
                            </a>
                        {% endif %}
                    </div>
                </div>

                <h2 class="text-2xl font-caveat text-text mb-6 text-center">Mes informations personnelles</h2>

                {# --- Gestion de l'affichage des informations personnelles --- #}
                <div class="flex flex-col gap-6">
                    {# Identifiant #}
                    <div class="space-y-1">
                        <label class="block text-base font-semibold text-text">
                            Identifiant Kaz :
                        </label>
                        {% if isEditMode %}
                            {{ form_widget(form.identifiantKaz, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
                        {% else %}
                            <div
                                class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                {{ userData.identifiantKaz ?? 'Non défini' }}
                            </div>
                        {% endif %}
                    </div>

                    {# --- NOM et Prénom --- #}
                    <div class="grid grid-cols-2 gap-4">
                        {# NOM #}
                        <div class="space-y-1">
                            <label class="block text-base font-semibold text-text">
                                NOM :
                            </label>
                            {% if isEditMode %}
                                {{ form_widget(form.lastName, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
                                <div class="text-red-500 text-xs mt-1 italic font-sora">
                                    {{ form_errors(form.lastName) }}
                                </div>
                            {% else %}
                                <div
                                    class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                    {{ userData.lastName }}
                                </div>
                            {% endif %}
                        </div>

                        {# Prénom #}
                        <div class="space-y-1">
                            <label class="block text-base font-semibold text-text">
                                Prénom :
                            </label>
                            {% if isEditMode %}
                                {{ form_widget(form.firstName, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
                                <div class="text-red-500 text-xs mt-1 italic font-sora">
                                    {{ form_errors(form.firstName) }}
                                </div>
                            {% else %}
                                <div
                                    class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                    {{ userData.firstName }}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    {# Téléphone #}
                    <div class="space-y-1">
                        <label class="block text-base font-semibold text-text">
                            Numéro de téléphone :
                        </label>
                        {% if isEditMode %}
                            {{ form_widget(form.telephone, {'attr': {'class': 'w-full px-4 py-3 text-base bg-white border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
                            <div class="text-red-500 text-xs mt-1 italic">
                                {{ form_errors(form.telephone) }}
                            </div>
                        {% else %}
                            <div
                                class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                {{ userData.telephone ?? 'Non renseigné' }}
                            </div>
                        {% endif %}
                    </div>

                    {# E-mail #}
                    <div class="space-y-1">
                        <label class="block text-base font-semibold text-text">
                            E-mail :
                        </label>
                        {% if isEditMode %}
                            {{ form_widget(form.email, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
                            <div class="text-red-500 text-xs mt-1 italic font-sora">
                                {{ form_errors(form.email) }}
                            </div>
                        {% else %}
                            <div
                                class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                {{ userData.email }}
                            </div>
                        {% endif %}
                    </div>

                    {# E-mail de secours #}
                    <div class="space-y-1">
                        <label class="block text-base font-semibold text-text">
                            E-mail de secours :
                        </label>
                        {% if isEditMode %}
                            {{ form_widget(form.alternateEmail, {'attr': {'class': 'w-full px-4 py-3 text-base bg-white border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
                            <div class="text-red-500 text-xs mt-1 italic font-sora">
                                {{ form_errors(form.alternateEmail) }}
                            </div>
                        {% else %}
                            <div
                                class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                {{ userData.alternateEmail ?? 'Non renseigné' }}
                            </div>
                        {% endif %}
                    </div>

                    {# Quota Email #}
                    <div class="space-y-1">
                        <label class="block text-base font-semibold text-text">
                            Espace disponible dans votre boîte mail :
                        </label>
                        {% if isEditMode %}
                            {{ form_widget(form.emailQuota, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
                        {% else %}
                            <div
                                class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                {{ userData.emailQuota ?? 'Non défini' }}
                            </div>
                        {% endif %}
                    </div>

                    {# Quota Nextcloud #}
                    <div class="space-y-1 sm:col-span-2">
                        <label class="block text-base font-semibold text-text">
                            Quota Nextcloud :
                        </label>
                        {% if isEditMode %}
                            {{ form_widget(form.nextcloudQuota, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
                        {% else %}
                            <div
                                class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
                                {{ userData.nextcloudQuota ?? 'Non défini' }}
                            </div>
                        {% endif %}
                    </div>

                    {# --- Gestion de l'affichage des checkbox des différents accès --- #}
                    <div class="sm:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-gris-clair">

                        {# Accès Nextcloud #}
                        <div class="flex items-center gap-3">
                            {% if isEditMode %}
                                {{ form_widget(form.hasNextcloudAccess, {'attr': {'class': 'w-5 h-5 text-bouton border-gris-clair rounded focus:ring-bouton cursor-not-allowed opacity-60'}}) }}
                                {{ form_label(form.hasNextcloudAccess, null, {'label_attr': {'class': 'text-base font-medium text-text'}}) }}
                            {% else %}
                                <span class="text-l">{% if userData.hasNextcloudAccess %}✅{% else %}❌{% endif %}</span>
                                <span class="text-base font-medium text-text">Accès Nextcloud</span>
                            {% endif %}
                        </div>

                        {# Accès Mobilizon #}
                        <div class="flex items-center gap-3">
                            {% if isEditMode %}
                                {{ form_widget(form.hasMobilizon, {'attr': {'class': 'w-5 h-5 text-bouton border-gris-clair rounded focus:ring-bouton cursor-not-allowed opacity-60'}}) }}
                                {{ form_label(form.hasMobilizon, null, {'label_attr': {'class': 'text-base font-medium text-text'}}) }}
                            {% else %}
                                <span class="text-l">{% if userData.hasMobilizon %}✅{% else %}❌{% endif %}</span>
                                <span class="text-base font-medium text-text">Accès Mobilizon</span>
                            {% endif %}
                        </div>

                        {# Accès Agora #}
                        <div class="flex items-center gap-3">
                            {% if isEditMode %}
                                {{ form_widget(form.hasAgoraAccess, {'attr': {'class': 'w-5 h-5 text-bouton border-gris-clair rounded focus:ring-bouton cursor-not-allowed opacity-60'}}) }}
                                {{ form_label(form.hasAgoraAccess, null, {'label_attr': {'class': 'text-base font-medium text-text'}}) }}
                            {% else %}
                                <span class="text-l">{% if userData.hasAgoraAccess %}✅{% else %}❌{% endif %}</span>
                                <span class="text-base font-medium text-text">Accès Agora</span>
                            {% endif %}
                        </div>
                    </div>

                    {# Affichage du bouton "Valider" (seulement en mode édition) #}
                    {% if isEditMode %}
                        <div class="flex justify-center pt-8 pb-4">
                            <button type="submit"
                                    class="px-8 py-2.5 bg-bouton hover:bg-bouton-hover text-text text-sm font-bold rounded-lg shadow transition-colors">
                                Enregistrer les modifications
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>

            {# Fermuture du formulaire (seulement en mode édition) #}
            {% if isEditMode %}
                {{ form_end(form) }}
            {% endif %}

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