{% extends "base.html" %}
{% block title %}Mon profil — Forge Engine{% endblock %}
{% block content %}
<section class="section profileSection">
  <div class="container profileContainer">
    <h1 class="title is-4 mb-3">Mon profil</h1>

    {% if error %}
    <div class="notification is-danger profileNotif">{{ error }}</div>
    {% endif %}
    {% if success %}
    <div class="notification is-success profileNotif">{{ success }}</div>
    {% endif %}

    <div class="profileGrid">
      <div class="profileCol">
        <div class="box profileBox">
          <h2 class="title is-6 mb-2">Adresse email</h2>
          <p class="hint mb-2">
            {{ 'Compte administrateur' if user.role == 'admin' else 'Compte utilisateur' }}{% if user.role != 'admin' %} — le dossier de ton jeu ({{ user.project_slug }}) suit automatiquement{% endif %}.
          </p>
          <form method="post" action="{{ url_for('profile_update_email') }}" autocomplete="off" class="profileForm">
            <div class="field"><input class="input is-small" type="email" name="email" value="{{ user.email }}" placeholder="Adresse email" required aria-label="Adresse email"></div>
            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password" aria-label="Mot de passe actuel"></div>
            <div class="field"><button type="submit" class="button primary is-small is-fullwidth">Changer d'adresse email</button></div>
          </form>
        </div>

        <div class="box profileBox">
          <h2 class="title is-6 mb-2">Informations</h2>
          <form method="post" action="{{ url_for('profile_update_name') }}" class="profileForm profileForm-row">
            <div class="field"><input class="input is-small" type="text" name="prenom" value="{{ user.prenom }}" placeholder="Prénom" required aria-label="Prénom"></div>
            <div class="field"><input class="input is-small" type="text" name="nom" value="{{ user.nom }}" placeholder="Nom" required aria-label="Nom"></div>
            <div class="field profileForm-full"><button type="submit" class="button primary is-small is-fullwidth">Enregistrer</button></div>
          </form>
        </div>

        <div class="box profileBox profileBox-danger">
          <h2 class="title is-6 mb-2">Supprimer mon compte</h2>
          <p class="hint mb-2">
            {% if user.role != 'admin' %}
            Action définitive : ton compte ET ton jeu ({{ user.project_slug }}) seront supprimés.
            {% else %}
            Action définitive : ton compte sera supprimé (tes jeux existants ne sont pas touchés).
            {% endif %}
          </p>
          <form method="post" action="{{ url_for('profile_delete') }}" autocomplete="off" class="profileForm">
            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password" aria-label="Mot de passe actuel"></div>
            <div class="field"><input class="input is-small" type="text" name="confirm_text" placeholder='Tape "SUPPRIMER" pour confirmer' required aria-label='Tape &quot;SUPPRIMER&quot; pour confirmer'></div>
            <div class="field"><button type="submit" class="button is-danger is-small is-fullwidth">Supprimer définitivement mon compte</button></div>
          </form>
        </div>
      </div>

      <div class="profileCol">
        <div class="box profileBox">
          <h2 class="title is-6 mb-2">Changer de mot de passe</h2>
          <form method="post" action="{{ url_for('profile_change_password') }}" autocomplete="off" class="profileForm">
            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password" aria-label="Mot de passe actuel"></div>
            <div class="field"><input class="input is-small" id="password" type="password" name="new_password" placeholder="Nouveau mot de passe" required autocomplete="new-password" aria-label="Nouveau mot de passe"></div>
            <div class="field">
              <div class="passwordStrengthBar"><div class="passwordStrengthFill" id="pwFill"></div></div>
              <ul class="passwordChecklist passwordChecklist-compact" id="pwChecklist">
                <li data-check="longueur">8+ car.</li>
                <li data-check="majuscule">Majuscule</li>
                <li data-check="minuscule">Minuscule</li>
                <li data-check="chiffre">Chiffre</li>
                <li data-check="special">Spécial</li>
              </ul>
            </div>
            <div class="field"><input class="input is-small" type="password" name="new_password_confirm" placeholder="Confirmer le nouveau mot de passe" required autocomplete="new-password" aria-label="Confirmer le nouveau mot de passe"></div>
            <div class="field"><button type="submit" class="button primary is-small is-fullwidth">Changer le mot de passe</button></div>
          </form>
        </div>

        <div class="box profileBox">
          <h2 class="title is-6 mb-2">Codes de récupération 2FA</h2>
          <p class="hint mb-2">Remplace immédiatement les 10 codes précédents. Les nouveaux ne s'affichent qu'une fois, juste après.</p>
          <form method="post" action="{{ url_for('profile_regenerate_recovery_codes') }}" autocomplete="off" class="profileForm">
            <div class="field"><input class="input is-small" type="password" name="current_password" placeholder="Mot de passe actuel" required autocomplete="current-password" aria-label="Mot de passe actuel"></div>
            <div class="field"><button type="submit" class="button primary is-small is-fullwidth">Régénérer mes 10 codes</button></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
var MIN_SCORE_REQUIRED = {{ min_score_required }};
var PW_CHECKS = {
  longueur: function (p) { return p.length >= 8; },
  majuscule: function (p) { return /[A-Z]/.test(p); },
  minuscule: function (p) { return /[a-z]/.test(p); },
  chiffre: function (p) { return /\d/.test(p); },
  special: function (p) { return /[^A-Za-z0-9]/.test(p); },
};
(function () {
  var input = document.getElementById('password');
  var fill = document.getElementById('pwFill');
  var items = document.querySelectorAll('#pwChecklist li');
  if (!input) return;
  function update() {
    var value = input.value || '';
    var score = 0;
    items.forEach(function (li) {
      var ok = PW_CHECKS[li.dataset.check](value);
      li.classList.toggle('ok', ok);
      if (ok) score++;
    });
    var pct = (score / items.length) * 100;
    fill.style.width = pct + '%';
    fill.className = 'passwordStrengthFill' +
      (score >= items.length ? ' strong' : score >= MIN_SCORE_REQUIRED ? ' good' : score >= 2 ? ' medium' : ' weak');
  }
  input.addEventListener('input', update);
  update();
})();
</script>
{% endblock %}