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

{% block title %}Paramètres - Bubul{% endblock %}

{% block meta_description %}Configurez vos paramètres Bubul : gérez votre compte, connectez votre plateforme Moodle et personnalisez votre expérience.{% endblock %}

{% block body %}
<div class="max-w-[1300px] mx-auto">

    {# ================================================================
       LAYOUT : sidebar gauche + contenu
       ================================================================ #}
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-10">

    {# ================================================================
       SIDEBAR NAVIGATION
       ================================================================ #}
    {% include '_molecules/settings-nav/settings-nav.html.twig' with { user: user, activePage: 'settings' } only %}

    {# ================================================================
       CONTENU PRINCIPAL
       ================================================================ #}
    <div class="flex-1 min-w-0">

        {# Titre de page #}
        <div class="">
            {% include '_molecules/page-header/page-header.html.twig' with {
                title: 'Paramètres',
                subtitle: 'Gérez votre compte et vos préférences',
                icon: 'settings',
                variant: 'default',
                class: 'pt-0'
            } only %}
        </div>

    {# ================================================================
       CONTENU
       ================================================================ #}
    <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
        {# Header #}
        <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'md', color: 'primary' } only %}
            </div>
            <div>
                <h3 class="font-semibold text-gray-900">Informations du compte</h3>
                <p class="text-sm text-gray-500">Modifiez vos informations personnelles et votre mot de passe</p>
            </div>
        </div>

        {# Body #}
        <div class="p-6">
            <div class="space-y-8">
                {# Section 1 : Informations personnelles #}
                {{ form_start(identityForm, {'attr': {'class': 'space-y-6', 'data-turbo': 'false'}}) }}
                    {% do identityForm.firstName.setRendered() %}
                    {% do identityForm.lastName.setRendered() %}
                    {% do identityForm.email.setRendered() %}
                    <div class="border-b border-gray-100 pb-6">
                        <h3 class="text-base font-semibold text-gray-900 mb-4 font-[Poppins]">Informations personnelles</h3>
                        <div class="space-y-4">
                            {% include '_atoms/form/input.html.twig' with {
                                type: 'text',
                                name: identityForm.firstName.vars.full_name,
                                id: identityForm.firstName.vars.id,
                                label: 'Prénom',
                                placeholder: 'Votre prénom',
                                value: identityForm.firstName.vars.value,
                                required: true
                            } only %}

                            {% include '_atoms/form/input.html.twig' with {
                                type: 'text',
                                name: identityForm.lastName.vars.full_name,
                                id: identityForm.lastName.vars.id,
                                label: 'Nom',
                                placeholder: 'Votre nom',
                                value: identityForm.lastName.vars.value,
                                required: true
                            } only %}

                            {# Email éditable avec badge intégré #}
                            <div class="space-y-1.5">
                                <div>
                                    <label for="{{ identityForm.email.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1.5">
                                        Adresse email <span class="text-error ml-0.5">*</span>
                                    </label>
                                    <div class="relative">
                                        {% include '_atoms/form/input.html.twig' with {
                                            type: 'email',
                                            name: identityForm.email.vars.full_name,
                                            id: identityForm.email.vars.id,
                                            placeholder: 'votre@email.fr',
                                            value: identityForm.email.vars.value,
                                            required: true,
                                            icon: 'mail',
                                            iconPosition: 'left',
                                            class: 'pr-28'
                                        } only %}
                                        <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
                                            {% if user.isEmailVerified %}
                                                {% include '_atoms/badge/badge.html.twig' with {
                                                    label: 'Vérifié',
                                                    variant: 'success',
                                                    size: 'sm',
                                                    icon: 'check'
                                                } only %}
                                            {% else %}
                                                {% include '_atoms/badge/badge.html.twig' with {
                                                    label: 'Non vérifié',
                                                    variant: 'warning',
                                                    size: 'sm'
                                                } only %}
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% if user.hasPendingEmailChange %}
                                    {% include '_molecules/alert/alert.html.twig' with {
                                        title: 'Confirmation en attente',
                                        message: 'L\'adresse <strong>' ~ user.pendingEmail ~ '</strong> attend votre validation. Cliquez sur le lien reçu par email pour confirmer le changement.',
                                        variant: 'warning',
                                        size: 'sm'
                                    } only %}
                                {% else %}
                                    {% include '_molecules/alert/alert.html.twig' with {
                                        message: 'Modifiez votre email et sauvegardez — un lien de confirmation vous sera envoyé.',
                                        variant: 'info',
                                        size: 'sm'
                                    } only %}
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Sauvegarder',
                            variant: 'primary',
                            type: 'submit'
                        } only %}
                    </div>
                {{ form_end(identityForm) }}

                {# Section 2 : Changement de mot de passe #}
                {{ form_start(passwordForm, {'attr': {'class': 'space-y-6 pt-2', 'data-turbo': 'false'}}) }}
                    {% do passwordForm.currentPassword.setRendered() %}
                    {% do passwordForm.newPassword.setRendered() %}
                    {% do passwordForm.newPasswordConfirm.setRendered() %}
                    <div class="border-b border-gray-100 pb-6">
                        <h3 class="text-base font-semibold text-gray-900 mb-1 font-[Poppins]">Changer le mot de passe</h3>
                        <p class="text-sm text-gray-500 mb-4">Renseignez les champs ci-dessous pour modifier votre mot de passe</p>
                        <div class="space-y-4">
                            {% include '_atoms/form/input.html.twig' with {
                                type: 'password',
                                name: passwordForm.currentPassword.vars.full_name,
                                id: passwordForm.currentPassword.vars.id,
                                label: 'Mot de passe actuel',
                                placeholder: 'Votre mot de passe actuel',
                                required: true,
                                icon: 'lock',
                                iconPosition: 'left'
                            } only %}

                            {% include '_atoms/form/input.html.twig' with {
                                type: 'password',
                                name: passwordForm.newPassword.vars.full_name,
                                id: passwordForm.newPassword.vars.id,
                                label: 'Nouveau mot de passe',
                                placeholder: 'Minimum ' ~ constant('App\\Config\\AppLimits::PASSWORD_MIN_LENGTH') ~ ' caractères',
                                required: true,
                                icon: 'lock',
                                iconPosition: 'left'
                            } only %}

                            {% include '_atoms/form/input.html.twig' with {
                                type: 'password',
                                name: passwordForm.newPasswordConfirm.vars.full_name,
                                id: passwordForm.newPasswordConfirm.vars.id,
                                label: 'Confirmer le nouveau mot de passe',
                                placeholder: 'Confirmez votre nouveau mot de passe',
                                required: true,
                                icon: 'key',
                                iconPosition: 'left'
                            } only %}
                        </div>
                    </div>

                    <div class="flex justify-end">
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Changer le mot de passe',
                            variant: 'primary',
                            type: 'submit'
                        } only %}
                    </div>
                {{ form_end(passwordForm) }}
            </div>
        </div>
    </div>

    {# ================================================================
       ZONE DANGEREUSE — dev uniquement
       ================================================================ #}
    {% if app.environment == 'dev' %}
    <div class="bg-white rounded-2xl border border-error/30 shadow-sm overflow-hidden mt-8">
        <div class="px-6 py-4 flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-error/10 flex items-center justify-center">
                {% include '_atoms/icon/icon.html.twig' with { name: 'trash', size: 'md', color: 'error' } only %}
            </div>
            <div>
                <h3 class="font-semibold text-gray-900">Zone dangereuse</h3>
                <p class="text-sm text-gray-500">Ces actions sont irréversibles. Procédez avec précaution.</p>
            </div>
        </div>
        <div class="p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <p class="text-sm font-medium text-gray-900">Supprimer mon compte</p>
                    <p class="text-sm text-gray-500">Supprime définitivement votre compte, vos cours, et toutes vos données.</p>
                </div>
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Supprimer mon compte',
                    variant: 'error',
                    icon: 'trash',
                    attr: { onclick: "openDeleteAccountModal()" }
                } only %}
            </div>
        </div>
    </div>
    {% endif %}{# /dev uniquement #}

    </div>{# /flex-1 contenu principal #}
    </div>{# /flex layout #}
</div>

{# ================================================================
   MODAL: SUPPRESSION DE COMPTE — dev uniquement
   ================================================================ #}
{% if app.environment == 'dev' %}
{% embed '_molecules/modal/modal.html.twig' with {
    id: 'modal-delete-account',
    title: 'Supprimer mon compte',
    subtitle: 'Cette action est irréversible et ne peut pas être annulée.',
    variant: 'danger',
    size: 'lg'
} %}
    {% block body %}
        <div class="space-y-4">
            <div class="p-3 bg-error/5 border border-error/20 rounded-lg">
                <p class="text-sm text-gray-700">
                    Tous vos cours, activités et données seront supprimés <strong>définitivement</strong>. Cette action ne peut pas être annulée.
                </p>
            </div>
            <form id="modal-delete-account-form" action="{{ path('app_settings_delete_account') }}" method="POST" data-turbo="false">
                <input type="hidden" name="_token" value="{{ csrf_token('delete-account-' ~ user.uuid) }}">
                {% include '_atoms/form/input.html.twig' with {
                    type: 'text',
                    name: 'confirmation',
                    id: 'delete-confirmation',
                    label: 'Tapez SUPPRIMER pour confirmer',
                    placeholder: 'SUPPRIMER',
                    required: true,
                    attr: { oninput: 'toggleDeleteBtn(this.value)', autocomplete: 'off' }
                } only %}
            </form>
        </div>
    {% endblock %}
    {% block footer %}
        <div class="flex items-center justify-between w-full gap-3">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Annuler',
                variant: 'ghost',
                size: 'lg',
                type: 'button',
                attr: { onclick: "closeModal('modal-delete-account')" }
            } only %}
            <button
                id="btn-delete-confirm"
                type="submit"
                form="modal-delete-account-form"
                disabled
                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium bg-error text-white opacity-50 cursor-not-allowed transition-all"
            >
                {% include '_atoms/icon/icon.html.twig' with { name: 'trash', size: 'sm', color: 'white' } only %}
                Supprimer définitivement
            </button>
        </div>
        <script>
            function toggleDeleteBtn(value) {
                const btn = document.getElementById('btn-delete-confirm');
                if (!btn) return;
                const isValid = value === 'SUPPRIMER';
                btn.disabled = !isValid;
                btn.classList.toggle('opacity-50', !isValid);
                btn.classList.toggle('cursor-not-allowed', !isValid);
                btn.classList.toggle('cursor-pointer', isValid);
                btn.classList.toggle('hover:bg-error/90', isValid);
            }
            function openDeleteAccountModal() {
                const input = document.getElementById('delete-confirmation');
                if (input) { input.value = ''; }
                toggleDeleteBtn('');
                openModal('modal-delete-account');
            }
        </script>
    {% endblock %}
{% endembed %}
{% endif %}{# /dev uniquement #}
{% endblock %}