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

{% block title %}Paramètres — Skeleton{% endblock %}

{% block page_title %}Paramètres{% endblock %}

{% block profile_body %}

<div class="profile-section">

    {% if app.user.isOAuthOnly %}
    {# ══════════════════════════════════════════
       Compte Google — Définir un mot de passe
    ══════════════════════════════════════════ #}
    <div class="profile-card">
        <div class="profile-card-header">
            <h3>
                <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                Définir un mot de passe
            </h3>
            <p>Votre compte est lié à Google. Définissez un mot de passe pour pouvoir aussi vous connecter par email.</p>
        </div>
        <div>
            {{ form_start(form_set_password, {attr: {class: 'settings-form', id: 'form-set-password', novalidate: 'novalidate'}}) }}
                <div class="settings-field">
                    {{ form_label(form_set_password.newPassword.first) }}
                    <div class="settings-input-wrap has-eye">
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        {{ form_widget(form_set_password.newPassword.first, {attr: {class: 'settings-input', placeholder: 'Min. 12 caractères'}}) }}
                        <button type="button" class="pwd-toggle" aria-label="Afficher/masquer">
                            <svg class="eye-on" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    {# ── Barre de force ── #}
                    <div class="settings-strength">
                        <div class="settings-strength-bar" id="sp-s1"></div>
                        <div class="settings-strength-bar" id="sp-s2"></div>
                        <div class="settings-strength-bar" id="sp-s3"></div>
                        <div class="settings-strength-bar" id="sp-s4"></div>
                    </div>
                    <div class="settings-strength-label" id="sp-label"></div>
                    {# ── Règles ── #}
                    <ul class="settings-pwd-rules">
                        <li class="settings-pwd-rule" data-rule="length">
                            <span class="settings-pwd-rule-icon"></span>
                            Au moins 12 caractères
                        </li>
                        <li class="settings-pwd-rule" data-rule="upper">
                            <span class="settings-pwd-rule-icon"></span>
                            Une lettre majuscule
                        </li>
                        <li class="settings-pwd-rule" data-rule="lower">
                            <span class="settings-pwd-rule-icon"></span>
                            Une lettre minuscule
                        </li>
                        <li class="settings-pwd-rule" data-rule="digit">
                            <span class="settings-pwd-rule-icon"></span>
                            Un chiffre
                        </li>
                        <li class="settings-pwd-rule" data-rule="special">
                            <span class="settings-pwd-rule-icon"></span>
                            Un caractère spécial (- + ! * $ @ % _ ? .)
                        </li>
                    </ul>
                    {# ── Caractères refusés ── #}
                    <div class="settings-pwd-refused">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                        Caractères refusés&nbsp;: <code>&lt; &gt; &amp; " ' ` \ /</code>
                    </div>
                </div>
                <div class="settings-field">
                    {{ form_label(form_set_password.newPassword.second) }}
                    <div class="settings-input-wrap has-eye">
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        {{ form_widget(form_set_password.newPassword.second, {attr: {class: 'settings-input', placeholder: 'Répétez le mot de passe'}}) }}
                        <button type="button" class="pwd-toggle" aria-label="Afficher/masquer">
                            <svg class="eye-on" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    <div data-error="newPassword"></div>
                </div>
                <div class="settings-form-footer">
                    <button type="submit" class="settings-btn">
                        <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                        Définir mon mot de passe
                    </button>
                </div>
            {{ form_end(form_set_password) }}
        </div>
    </div>

    <div class="profile-card">
        <div class="profile-card-header">
            <h3>
                <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                Adresse e-mail
            </h3>
            <p>Votre email est géré par Google et ne peut pas être modifié depuis cet espace.</p>
        </div>
    </div>

    {% else %}
    {# ══════════════════════════════════════════
       Changer le mot de passe (comptes classiques)
    ══════════════════════════════════════════ #}
    <div class="profile-card">
        <div class="profile-card-header">
            <h3>
                <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                Changer le mot de passe
            </h3>
            <p id="pwd-desc1"{% if pwd_step1_done %} style="display:none"{% endif %}>
                Étape 1 — Confirmez votre identité pour continuer.
            </p>
            <p id="pwd-desc2"{% if not pwd_step1_done %} style="display:none"{% endif %}>
                Étape 2 — Choisissez votre nouveau mot de passe.
                <span class="settings-timer" id="pwd-timer"{% if pwd_step1_done %} data-seconds="{{ pwd_time_left }}"{% endif %}></span>
            </p>
        </div>

        {# ── Étape 1 : vérifier l'identité ── #}
        <div id="pwd-step1"{% if pwd_step1_done %} style="display:none"{% endif %}>
            {{ form_start(form_pwd_step1, {attr: {class: 'settings-form', novalidate: 'novalidate'}}) }}

                <div class="settings-field">
                    {{ form_label(form_pwd_step1.currentPassword) }}
                    <div class="settings-input-wrap has-eye">
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        {{ form_widget(form_pwd_step1.currentPassword, {attr: {class: 'settings-input'}}) }}
                        <button type="button" class="pwd-toggle" aria-label="Afficher/masquer">
                            <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    <div data-error="currentPassword"></div>
                </div>

                <div class="settings-form-footer">
                    <button type="submit" class="settings-btn">
                        <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                        Vérifier mon identité
                    </button>
                </div>

            {{ form_end(form_pwd_step1) }}
        </div>

        {# ── Étape 2 : nouveau mot de passe ── #}
        <div id="pwd-step2"{% if not pwd_step1_done %} style="display:none"{% endif %}>
            {{ form_start(form_pwd_step2, {attr: {class: 'settings-form', novalidate: 'novalidate'}}) }}

                <div class="settings-field">
                    {{ form_label(form_pwd_step2.newPassword.first) }}
                    <div class="settings-input-wrap has-eye">
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        {{ form_widget(form_pwd_step2.newPassword.first, {attr: {class: 'settings-input'}}) }}
                        <button type="button" class="pwd-toggle" aria-label="Afficher/masquer">
                            <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    <div class="settings-strength">
                        <div class="settings-strength-bar" id="sp2-s1"></div>
                        <div class="settings-strength-bar" id="sp2-s2"></div>
                        <div class="settings-strength-bar" id="sp2-s3"></div>
                        <div class="settings-strength-bar" id="sp2-s4"></div>
                    </div>
                    <div class="settings-strength-label" id="sp2-label"></div>
                    <ul class="settings-pwd-rules">
                        <li class="settings-pwd-rule" data-rule="length"><span class="settings-pwd-rule-icon"></span>Au moins 12 caractères</li>
                        <li class="settings-pwd-rule" data-rule="upper"><span class="settings-pwd-rule-icon"></span>Une lettre majuscule</li>
                        <li class="settings-pwd-rule" data-rule="digit"><span class="settings-pwd-rule-icon"></span>Un chiffre</li>
                        <li class="settings-pwd-rule" data-rule="lower"><span class="settings-pwd-rule-icon"></span>Une lettre minuscule</li>
                        <li class="settings-pwd-rule" data-rule="special"><span class="settings-pwd-rule-icon"></span>Un caractère spécial (- + ! * $ @ % _ ? .)</li>
                    </ul>
                    <div class="settings-pwd-refused">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                        Caractères refusés&nbsp;: <code>&lt; &gt; &amp; " ' ` \ /</code>
                    </div>
                </div>

                <div class="settings-field">
                    {{ form_label(form_pwd_step2.newPassword.second) }}
                    <div class="settings-input-wrap has-eye">
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        {{ form_widget(form_pwd_step2.newPassword.second, {attr: {class: 'settings-input'}}) }}
                        <button type="button" class="pwd-toggle" aria-label="Afficher/masquer">
                            <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    <div data-error="newPassword"></div>
                </div>

                <div class="settings-form-footer">
                    <button type="submit" class="settings-btn">
                        <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                        Enregistrer le nouveau mot de passe
                    </button>
                </div>

            {{ form_end(form_pwd_step2) }}
        </div>
    </div>

    {# ══════════════════════════════════════════
       Changer l'adresse e-mail
    ══════════════════════════════════════════ #}
    <div class="profile-card">
        <div class="profile-card-header">
            <h3>
                <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                Changer l'adresse e-mail
            </h3>
            <p id="email-desc1"{% if email_step1_done or email_pending %} style="display:none"{% endif %}>
                Étape 1 — Confirmez votre identité pour continuer.
            </p>
            <p id="email-desc2"{% if not email_step1_done or email_pending %} style="display:none"{% endif %}>
                Étape 2 — Saisissez votre nouvelle adresse e-mail.
                <span class="settings-timer" id="email-timer"{% if email_step1_done and not email_pending %} data-seconds="{{ email_time_left }}"{% endif %}></span>
            </p>
        </div>

        {# ── Étape 1 : vérifier l'identité ── #}
        <div id="email-step1"{% if email_step1_done or email_pending %} style="display:none"{% endif %}>
            {{ form_start(form_email_step1, {attr: {class: 'settings-form', novalidate: 'novalidate'}}) }}

                <div class="settings-field">
                    {{ form_label(form_email_step1.currentPassword) }}
                    <div class="settings-input-wrap has-eye">
                        <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        {{ form_widget(form_email_step1.currentPassword, {attr: {class: 'settings-input'}}) }}
                        <button type="button" class="pwd-toggle" aria-label="Afficher/masquer">
                            <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                        </button>
                    </div>
                    <div data-error="currentPassword"></div>
                </div>

                <div class="settings-form-footer">
                    <button type="submit" class="settings-btn">
                        <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                        Vérifier mon identité
                    </button>
                </div>

            {{ form_end(form_email_step1) }}
        </div>

        {# ── Étape 2 : nouvel e-mail ── #}
        <div id="email-step2"{% if not email_step1_done or email_pending %} style="display:none"{% endif %}>
            {{ form_start(form_email_step2, {attr: {class: 'settings-form', novalidate: 'novalidate'}}) }}

                <div class="settings-field">
                    {{ form_label(form_email_step2.newEmail) }}
                    <div class="settings-input-wrap">
                        <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                        {{ form_widget(form_email_step2.newEmail, {attr: {class: 'settings-input'}}) }}
                    </div>
                    <div data-error="newEmail"></div>
                    <p class="settings-field-hint">Un e-mail de confirmation vous sera envoyé à cette adresse.</p>
                </div>

                <div class="settings-form-footer">
                    <button type="submit" class="settings-btn">
                        <svg viewBox="0 0 24 24"><path d="M22 2L11 13"/><path d="M22 2L15 22 11 13 2 9l20-7z"/></svg>
                        Envoyer le lien de confirmation
                    </button>
                </div>

            {{ form_end(form_email_step2) }}
        </div>

        {# ── Étape 3 : en attente de confirmation ── #}
        <div id="email-pending"{% if not email_pending %} style="display:none"{% endif %}
             data-cancel-url="{{ path('app_settings_email_cancel') }}"
             data-cancel-token="{{ csrf_token('cancel-email-change') }}">
            <div class="settings-pending-box">
                <div class="settings-pending-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                </div>
                <div class="settings-pending-body">
                    <p class="settings-pending-title">En attente de confirmation</p>
                    <p class="settings-pending-text">
                        Si l'adresse <strong id="pending-email-addr">{{ pending_email }}</strong> est disponible, un lien de confirmation vous a été envoyé.<br>
                        Cliquez sur le lien pour valider le changement. Votre adresse actuelle reste inchangée tant que vous n'avez pas confirmé.
                    </p>
                    <p class="settings-pending-timer">
                        Temps restant : <span class="settings-timer" id="pending-timer"{% if email_pending %} data-seconds="{{ pending_time_left }}"{% endif %}></span>
                    </p>
                </div>
            </div>
            <div class="settings-form-footer" style="margin-top:12px">
                <button type="button" class="settings-btn settings-btn--outline" id="email-cancel-btn">
                    <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    Annuler la demande
                </button>
            </div>
        </div>
    </div>

    {% endif %}

    {# ══════════════════════════════════════════
       Zone de danger — Supprimer le compte
    ══════════════════════════════════════════ #}
    <div class="profile-card profile-card--danger">
        <div class="profile-card-header">
            <h3>
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                Supprimer mon compte
            </h3>
            <p>Cette action est <strong>irréversible</strong>. Toutes vos données seront définitivement supprimées.</p>
        </div>

        <details class="settings-danger-details">
            <summary class="settings-danger-summary">Je souhaite supprimer mon compte</summary>

            <div class="settings-danger-body">
                {{ form_start(form_delete, {attr: {class: 'settings-form', novalidate: 'novalidate'}}) }}

                    <div class="settings-field">
                        {{ form_label(form_delete.currentPassword) }}
                        <div class="settings-input-wrap has-eye">
                            <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                            {{ form_widget(form_delete.currentPassword, {attr: {class: 'settings-input'}}) }}
                            <button type="button" class="pwd-toggle" aria-label="Afficher/masquer">
                                <svg class="eye-on"  viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                            </button>
                        </div>
                        <div data-error="currentPassword"></div>
                    </div>

                    <div class="settings-form-footer">
                        <button type="submit" class="settings-btn settings-btn--danger">
                            <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
                            Supprimer définitivement mon compte
                        </button>
                    </div>

                {{ form_end(form_delete) }}
            </div>
        </details>
    </div>

</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/settings.js') }}"></script>
{% if app.user.isOAuthOnly %}
<script>
(function () {
    var pwdInput = document.getElementById('form_set_password_newPassword_first');
    if (!pwdInput) return;

    // Strength bar
    FormAjax.initPwdStrength(
        pwdInput,
        [document.getElementById('sp-s1'), document.getElementById('sp-s2'), document.getElementById('sp-s3'), document.getElementById('sp-s4')],
        document.getElementById('sp-label'),
        12
    );

    // Rules
    FormAjax.initPwdRules(pwdInput, '#form-set-password .settings-pwd-rule', 12);

    // Eye toggles
    FormAjax.initEyeToggles(document.getElementById('form-set-password'));

    // AJAX submit
    var form = document.getElementById('form-set-password');
    FormAjax.submit(form, {
        onSuccess: function (data) {
            if (data.redirect) {
                window.location.href = data.redirect;
            }
        },
    });
})();
</script>
{% endif %}
{% endblock %}