{% extends "base.html" %}

{% block body %}
{% include "partials/header.html" %}

<div class="section" style="padding-top:0">
  <div class="section-title"><span>Gestion des utilisateurs</span></div>

  <table class="users-table" id="users-table" style="width:100%;border-collapse:collapse;font-size:13px">
    <thead>
      <tr style="border-bottom:1px solid var(--border);text-align:left">
        <th style="padding:8px 6px">Avatar</th>
        <th style="padding:8px 6px">Nom</th>
        <th style="padding:8px 6px">Couleur</th>
        <th style="padding:8px 6px">Admin</th>
        <th style="padding:8px 6px">Mot de passe</th>
        <th style="padding:8px 6px"></th>
      </tr>
    </thead>
    <tbody>
      {% if not users %}
      <tr><td colspan="6">
        {% set es_badge = "Utilisateurs" %}
        {% set es_title = "Aucun utilisateur" %}
        {% set es_subtitle = "Créez un utilisateur avec le formulaire ci-dessous. Utilisez <code>kenboard set-password</code> pour définir un mot de passe en CLI." %}
        {% set es_cards = [
          {"icon": '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>', "color": "blue", "title": "Utilisateurs", "text": "Chaque utilisateur a un nom, une couleur d'avatar et un rôle (admin ou non)."},
          {"icon": '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>', "color": "purple", "title": "Mot de passe", "text": "Le mot de passe est haché en argon2. Utilisez le formulaire ou <code>kenboard set-password</code>."}
        ] %}
        {% include "partials/empty_state.html" %}
      </td></tr>
      {% endif %}
      {% for u in users %}
      <tr data-user-id="{{ u.id }}" style="border-bottom:1px solid var(--border)">
        <td style="padding:6px">
          <div class="task-avatar" style="background:{{ u.color }};width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700">{{ u.name[0]|upper }}</div>
        </td>
        <td style="padding:6px"><input type="text" class="u-name" value="{{ u.name }}" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px"><input type="text" class="u-color" value="{{ u.color }}" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px;text-align:center"><input type="checkbox" class="u-admin" {% if u.is_admin %}checked{% endif %}></td>
        <td style="padding:6px"><input type="password" class="u-password" placeholder="(inchangé)" autocomplete="new-password" style="width:100%"></td>
        <td style="padding:6px;white-space:nowrap">
          <button class="btn-edit btn-save-user" onclick="saveUser(this)">Enregistrer</button>
          <button class="btn-edit btn-delete-user" onclick="prepareDeleteUser(this)">Supprimer</button>
        </td>
      </tr>
      {% endfor %}
      <tr style="border-top:2px solid var(--border)"><td colspan="6" style="padding:8px 6px 4px 6px;font-size:11px;color:var(--dimmed);text-transform:uppercase;letter-spacing:0.5px;font-weight:600">Nouvel utilisateur</td></tr>
      <tr id="users-add-row" style="border-bottom:1px solid var(--border);background:var(--bg)">
        <td style="padding:6px"></td>
        <td style="padding:6px"><input type="text" id="new-name" placeholder="Nom" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px"><input type="text" id="new-color" placeholder="#0969da ou var(--accent)" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px;text-align:center"><input type="checkbox" id="new-admin"></td>
        <td style="padding:6px"><input type="password" id="new-password" placeholder="Mot de passe" autocomplete="new-password" style="width:100%"></td>
        <td style="padding:6px"><button class="btn btn-save" id="users-create-btn" onclick="createUser()">Créer</button></td>
      </tr>
    </tbody>
  </table>
</div>

{% endblock %}

{% block scripts %}
<script>
let _userDeleteId = null;

async function saveUser(btn) {
  const tr = btn.closest('tr');
  const id = tr.dataset.userId;
  const body = {
    name: tr.querySelector('.u-name').value,
    color: tr.querySelector('.u-color').value,
    is_admin: tr.querySelector('.u-admin').checked,
  };
  const pwd = tr.querySelector('.u-password').value;
  try {
    await apiCall('/api/v1/users/' + id, {
      method: 'PATCH',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body),
    });
    // Password changes deliberately don't go through PATCH (cf. #53,
    // models/user.py UserUpdate has extra="ignore" so a stray `password`
    // field is silently dropped as a defence against mass-assignment).
    // The dedicated admin endpoint enforces argon2 hashing and the 8-char
    // minimum. Without this second call the input would look like it
    // saved but the password would never actually change (#132).
    if (pwd) {
      await apiCall('/api/v1/users/' + id + '/reset-password', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({new_password: pwd}),
      });
    }
    location.reload();
  } catch (e) {
    console.debug('saveUser: apiCall failed, popup already shown', e);
  }
}

function prepareDeleteUser(btn) {
  _userDeleteId = btn.closest('tr').dataset.userId;
  confirmDelete(btn, deleteUser);
}

async function deleteUser() {
  if (!_userDeleteId) return;
  try {
    await apiCall('/api/v1/users/' + _userDeleteId, {method: 'DELETE'});
    location.reload();
  } catch (e) {
    console.debug('deleteUser: apiCall failed, popup already shown', e);
  }
}

async function createUser() {
  const body = {
    name: document.getElementById('new-name').value,
    color: document.getElementById('new-color').value,
    is_admin: document.getElementById('new-admin').checked,
  };
  const pwd = document.getElementById('new-password').value;
  if (pwd) body.password = pwd;
  if (!body.name || !body.color) {
    showError('Validation', 'Nom et couleur requis');
    return;
  }
  try {
    await apiCall('/api/v1/users', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body),
    });
    location.reload();
  } catch (e) {
    console.debug('createUser: apiCall failed, popup already shown', e);
  }
}
</script>
{% endblock %}