{% extends 'account/base_account.html.twig' %}

{% block title %}Changer mon mot de passe{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <style>
        #qrBtn      { display: none !important; }
        #qrPanel    { display: none !important; }
        #userNavBtn { display: flex !important; }
    </style>
{% endblock %}


{% block content %}

{# ── Flash messages Symfony (PasswordExpiryListener + autres) ── #}
{% for msg in app.flashes('warning') %}
<div style="background:#fff3cd;border-left:4px solid #ff9500;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#7a4f00;display:flex;align-items:flex-start;gap:10px;">
    <span style="font-size:18px;line-height:1;">⚠️</span>
    <span>{{ msg|raw }}</span>
</div>
{% endfor %}
{% for msg in app.flashes('info') %}
<div style="background:#e8f4fd;border-left:4px solid #0071e3;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#004a8f;display:flex;align-items:flex-start;gap:10px;">
    <span style="font-size:18px;line-height:1;">ℹ️</span>
    <span>{{ msg|raw }}</span>
</div>
{% endfor %}
{% for msg in app.flashes('success') %}
<div style="background:#e8f8ee;border-left:4px solid #34c759;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#1a6b30;display:flex;align-items:flex-start;gap:10px;">
    <span style="font-size:18px;line-height:1;">✅</span>
    <span>{{ msg|raw }}</span>
</div>
{% endfor %}
{% for msg in app.flashes('error') %}
<div style="background:#fff2f2;border-left:4px solid #ff3b30;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#c92a2a;display:flex;align-items:flex-start;gap:10px;">
    <span style="font-size:18px;line-height:1;">❌</span>
    <span>{{ msg|raw }}</span>
</div>
{% endfor %}

{# ── Bannière expiration — affichée si passwordChangedAt renseigné ── #}
{% if app.user.passwordChangedAt is not null %}
    {% set months_ago = date(app.user.passwordChangedAt|date('Y-m-d'))|date_modify('+12 months') %}
    {% set days_left = ((months_ago|date('U') - date('now')|date('U')) / 86400)|abs|round %}
    {% if app.user.isPasswordExpired %}
    <div style="background:#fff2f2;border:1.5px solid #ffc9c9;border-radius:12px;padding:16px 20px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;">
        <span style="font-size:24px;line-height:1;">🔒</span>
        <div>
            <div style="font-weight:700;color:#c92a2a;font-size:15px;margin-bottom:4px;">Mot de passe expiré</div>
            <div style="font-size:13px;color:#86868b;">Votre mot de passe a plus de 12 mois. Renouvelez-le maintenant pour rester conforme à la politique de sécurité SANAGENCY.</div>
        </div>
    </div>
    {% endif %}
{% endif %}

<div class="page-header">
    <h1 class="page-title">🔒 Changer mon mot de passe</h1>
    <p class="page-subtitle">Modifiez votre mot de passe de connexion</p>
</div>

<div class="card max-w-sm">
    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
    
    <div class="form-group">
        {{ form_label(form.currentPassword) }}
        {{ form_widget(form.currentPassword) }}
        {{ form_errors(form.currentPassword) }}
    </div>

    <hr class="form-divider">

    <div class="form-group">
        {{ form_label(form.newPassword.first) }}
        {{ form_widget(form.newPassword.first, {'attr': {'id': 'change-password-input'}}) }}
        {{ form_errors(form.newPassword.first) }}

        {# ── Indicateur de force — Politique MDP V1.0 §2 ── #}
        <div id="pwd-strength-change" style="margin-top:10px;display:none;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;">
                <div class="pwd-rule-c" id="c-len"><span class="pwd-dot-c">●</span> 12 caractères minimum</div>
                <div class="pwd-rule-c" id="c-maj"><span class="pwd-dot-c">●</span> Une majuscule (A-Z)</div>
                <div class="pwd-rule-c" id="c-min"><span class="pwd-dot-c">●</span> Une minuscule (a-z)</div>
                <div class="pwd-rule-c" id="c-num"><span class="pwd-dot-c">●</span> Un chiffre (0-9)</div>
                <div class="pwd-rule-c" id="c-spe"><span class="pwd-dot-c">●</span> Un caractère spécial</div>
            </div>
        </div>
        <style>
            .pwd-rule-c { font-size:11px;color:#86868b;display:flex;align-items:center;gap:5px;transition:color .2s; }
            .pwd-rule-c.ok { color:#34c759; }
            .pwd-rule-c.ok .pwd-dot-c { color:#34c759; }
            .pwd-rule-c .pwd-dot-c { color:#d2d2d7;font-size:8px; }
        </style>
    </div>

    <div class="form-group">
        {{ form_label(form.newPassword.second) }}
        {{ form_widget(form.newPassword.second) }}
        {{ form_errors(form.newPassword.second) }}
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            🔐 Modifier le mot de passe
        </button>
        <a href="{{ path('app_account_profil') }}" class="btn btn-secondary">
            Annuler
        </a>
    </div>

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

<!-- CONSEILS SÉCURITÉ — mis à jour Politique MDP V1.0 -->
<div class="card max-w-sm mt-3">
    <div class="card-title">💡 Règles de sécurité (Politique interne V1.0)</div>
    
    <ul class="tips-list">
        <li>
            <span class="check">✓</span>
            <span>Au moins <strong>12 caractères</strong> minimum</span>
        </li>
        <li>
            <span class="check">✓</span>
            <span>Mélangez majuscules, minuscules, chiffres et caractères spéciaux</span>
        </li>
        <li>
            <span class="check">✓</span>
            <span>N'utilisez pas de mot du dictionnaire ni de données personnelles</span>
        </li>
        <li>
            <span class="check">✓</span>
            <span>Ne réutilisez pas l'un de vos 5 derniers mots de passe</span>
        </li>
        <li>
            <span class="check">✓</span>
            <span>Renouvelez votre mot de passe tous les 12 mois</span>
        </li>
    </ul>
</div>

<script>
(function() {
    const input = document.getElementById('change-password-input');
    if (!input) return;
    const box = document.getElementById('pwd-strength-change');
    const rules = {
        'c-len': v => v.length >= 12,
        'c-maj': v => /[A-Z]/.test(v),
        'c-min': v => /[a-z]/.test(v),
        'c-num': v => /[0-9]/.test(v),
        'c-spe': v => /[\W_]/.test(v),
    };
    input.addEventListener('input', function() {
        const v = this.value;
        box.style.display = v.length > 0 ? 'block' : 'none';
        for (const [id, test] of Object.entries(rules)) {
            document.getElementById(id).classList.toggle('ok', test(v));
        }
    });
})();
</script>
{% endblock %}