{# templates/backend/dashboard/account.html.twig #}
{% extends 'backend/base_back.html.twig' %}
{% block title %}Mon compte{% endblock %}

{% block body %}
    <div class="container py-2 py-md-5">
        <h2 class="text-center mb-4 mb-md-5">Paramètres du compte</h2>

        <div class="row justify-content-center">
            <div class="col-12 col-md-10 col-lg-6 section-bottom">

                {# ── Flash messages serveur ──────────────────────────────────────────── #}
                {% for t,msgs in app.flashes %}
                    {% for m in msgs %}
                        <div class="alert alert-{{ t=='success'?'success':'danger' }} alert-dismissible fade show mb-3" role="alert">
                            {{ m|raw }}<button type="button" class="close" data-dismiss="alert">&times;</button>
                        </div>
                    {% endfor %}
                {% endfor %}

                {# ── Carte Offre / Premium ──────────────────────────────────────────── #}
                <div class="card shadow-sm mb-3 mb-md-4">
                    <div class="card-body d-flex flex-column flex-md-row align-items-md-center p-3 p-md-4">
                        <div class="flex-fill mb-2 mb-md-0">
                            <h5 class="m-0">
                                Votre offre&nbsp;:
                                {% if app.user and 'ROLE_PREMIUM' in app.user.roles %}
                                    <span class="badge badge-success">Premium</span>
                                {% else %}
                                    <span class="badge badge-secondary">Gratuit</span>
                                {% endif %}
                            </h5>
                        </div>

                        {% if 'ROLE_PREMIUM' not in app.user.roles %}
                            <a href="{{ path('app_premium') }}" class="btn btn-success btn-block btn-md-auto">
                                Passer en Premium&nbsp;🚀
                            </a>
                        {% else %}
                            <span class="text-success font-weight-bold">Merci pour votre soutien 💚</span>
                        {% endif %}
                    </div>

                </div>
                {% if 'ROLE_PREMIUM' in app.user.roles %}
                    <a href="{{ path('app_portal') }}" target="_blank" class="d-block mb-4 btn btn-outline-danger btn-sm">
                        Gérer / résilier mon abonnement
                    </a>
                {% endif %}

                {# ── Profil ──────────────────────────────────────────────────────────── #}
                <div class="card shadow-sm mb-3 mb-md-4">
                    <div class="card-header bg-primary text-white"><i class="fas fa-user mr-2"></i> Profil</div>
                    <div class="card-body p-3 p-md-4">
                        <form id="profile-form" action="{{ path('app_account') }}" method="post" novalidate>
                            {{ form_widget(profileForm._token) }}
                            <div class="form-group">
                                {{ form_label(profileForm.email, null, { label_attr:{class:'small font-weight-bold'} }) }}
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-envelope"></i></span></div>
                                    {{ form_widget(profileForm.email, { attr:{class:'form-control',placeholder:'votre@email.com',autocomplete:'email'} }) }}
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>
                            <button class="btn btn-primary btn-block">Mettre à jour</button>
                        </form>
                        <div id="profile-success" class="mt-3"></div>
                    </div>
                </div>

                {# ── Mot de passe ─────────────────────────────────────────────────────── #}
                <div class="card shadow-sm mb-3 mb-md-4">
                    <div class="card-header bg-warning text-dark"><i class="fas fa-key mr-2"></i> Mot de passe</div>
                    <div class="card-body p-3 p-md-4">
                        <form id="password-form" action="{{ path('app_account') }}" method="post" novalidate>
                            {{ form_widget(passwordForm._token) }}

                            <div class="form-group">
                                {{ form_label(passwordForm.currentPassword,'Actuel',{label_attr:{class:'small font-weight-bold'}}) }}
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-lock"></i></span></div>
                                    {{ form_widget(passwordForm.currentPassword,{attr:{class:'form-control',autocomplete:'current-password',placeholder:'********'}}) }}
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    {{ form_label(passwordForm.newPassword.first,'Nouveau',{label_attr:{class:'small font-weight-bold'}}) }}
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-lock"></i></span></div>
                                        {{ form_widget(passwordForm.newPassword.first,{attr:{class:'form-control',autocomplete:'new-password',placeholder:'min. 8 car.'}}) }}
                                    </div>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="form-group col-md-6">
                                    {{ form_label(passwordForm.newPassword.second,'Confirmez',{label_attr:{class:'small font-weight-bold'}}) }}
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-lock"></i></span></div>
                                        {{ form_widget(passwordForm.newPassword.second,{attr:{class:'form-control',autocomplete:'new-password',placeholder:'Répétez'}}) }}
                                    </div>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>

                            <button class="btn btn-warning btn-block">Mettre à jour</button>
                        </form>
                        <div id="password-success" class="mt-3"></div>
                    </div>
                </div>

                {# ── Suppression ──────────────────────────────────────────────────────── #}
                <div class="card shadow-sm border-danger mb-4">
                    <div class="card-header bg-light text-danger"><i class="fas fa-user-times mr-2"></i> Supprimer le compte</div>
                    <div class="card-body p-3 p-md-4">
                        <p class="mb-3">Action <strong>définitive</strong> : toutes les données seront effacées.</p>
                        <button class="btn btn-outline-danger btn-block" data-toggle="modal" data-target="#deleteAccountModal">Supprimer</button>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {# ── Modal de suppression ──────────────────────────────────────────────── #}
    <div class="modal fade" id="deleteAccountModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-danger">
                <div class="modal-header bg-danger text-white">
                    <h6 class="modal-title">Confirmer la suppression</h6>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Tout sera définitivement supprimé :</p>
                    <ul class="pl-3 mb-2">
                        <li>Données personnelles</li>
                        <li>Pages créées</li>
                        <li>Statistiques</li>
                    </ul>
                    <p class="small text-muted m-0">Aucune récupération possible.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <form action="{{ path('app_account_delete') }}" method="post" class="m-0">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('delete-account') }}">
                        <button class="btn btn-danger">Supprimer</button>
                    </form>
                </div>
            </div>
        </div>

    </div>

    {# ── JS AJAX (profil & mot de passe) ───────────────────────────────────── #}
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            /* helpers ------------------------------------------------------------ */
            const reset = form => {
                form.querySelectorAll('.is-invalid').forEach(i=>i.classList.remove('is-invalid'));
                form.querySelectorAll('.invalid-feedback').forEach(f=>{f.innerText='';f.classList.remove('d-block');});
            };
            const paint = (input,msgs)=>{
                if(!input) return;
                const fb=input.closest('.form-group').querySelector('.invalid-feedback');
                input.classList.add('is-invalid');
                fb.innerText=msgs.join(' ');
                fb.classList.add('d-block');
            };
            const ok = (box,msg)=>{
                box.innerHTML=`<div class="alert alert-success alert-dismissible fade show" role="alert">
        ${msg}<button type="button" class="close" data-dismiss="alert">&times;</button></div>`;
            };

            /* ---------- PROFIL ---------- */
            const pForm=document.getElementById('profile-form');
            const pBox =document.getElementById('profile-success');
            pForm.addEventListener('submit', async e=>{
                e.preventDefault(); reset(pForm); pBox.innerHTML='';
                const res  = await fetch(pForm.action,{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest'},body:new FormData(pForm)});
                const data = await res.json().catch(()=>({}));

                if(res.ok && data.status==='success'){ ok(pBox,data.message||'Adresse e-mail mise à jour !'); return; }
                for(const [field,msgs] of Object.entries(data.errors||{})){
                    if(field==='slug') continue;
                    paint(pForm.querySelector(`input[name$="[${field}]"]`), msgs);
                }
            });

            /* ---------- MOT DE PASSE ---------- */
            const mForm=document.getElementById('password-form');
            const mBox =document.getElementById('password-success');
            const sel  = key =>
                key==='currentPassword' ? 'input[name$="[currentPassword]"]' :
                    key==='first'           ? 'input[name$="[first]"]'           :
                        key==='second'          ? 'input[name$="[second]"]'          :
                            key==='newPassword'     ? 'input[name$="[first]"]'           : null;

            mForm.addEventListener('submit', async e=>{
                e.preventDefault(); reset(mForm); mBox.innerHTML='';
                const res  = await fetch(mForm.action,{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest'},body:new FormData(mForm)});
                const data = await res.json().catch(()=>({}));

                if(res.ok && data.status==='success'){ ok(mBox,data.message||'Mot de passe mis à jour !'); mForm.reset(); return; }
                for(const [field,msgs] of Object.entries(data.errors||{})){
                    paint(mForm.querySelector(sel(field)), msgs);
                }
            });

        });
    </script>
{% endblock %}