{% extends "base.html" %}
{% block title %}Personnes{% endblock %}
{% block content %}
<div class="section-title">
  <h1>Personnes{% if afficher_supprimes %} <span class="badge badge-muted">supprimées</span>{% endif %}</h1>
  <div class="btn-group" style="margin:0">
    <a href="{{ url_for('personnes.nouveau') }}" class="btn btn-primary">+ Nouvelle personne</a>
    {% if afficher_supprimes %}
    <a href="{{ url_for('personnes.liste', q=q or none, role=roles_filtre or none) }}" class="btn btn-secondary">Actives</a>
    {% else %}
    <a href="{{ url_for('personnes.liste', q=q or none, role=roles_filtre or none, supprimes=1) }}" class="btn btn-secondary">Supprimées</a>
    {% endif %}
  </div>
</div>

<form class="card filter-form" id="personnes-filter-form" method="get" action="{{ url_for('personnes.liste') }}">
  {% if afficher_supprimes %}<input type="hidden" name="supprimes" value="1">{% endif %}
  <div class="filter-search">
    <div class="search-input-wrap">
      <input type="search" id="personnes-q" name="q" value="{{ q }}" placeholder="Recherche par nom ou raison sociale" autocomplete="off">
      <button type="button" class="search-clear" id="clear-search" hidden aria-label="Effacer la recherche">&times;</button>
    </div>
  </div>
  <div class="filter-roles">
    {% for r in roles_lot %}
    <label class="form-check">
      <input type="checkbox" name="role" value="{{ r }}" {% if r in roles_filtre %}checked{% endif %}>
      {{ role_labels[r] }}
    </label>
    {% endfor %}
  </div>
</form>

<div id="personnes-results" class="personnes-results">
  {% include "personnes/_liste_resultats.html" %}
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  const form = document.getElementById('personnes-filter-form');
  const results = document.getElementById('personnes-results');
  const searchInput = form.querySelector('[name=q]');
  const clearBtn = document.getElementById('clear-search');
  const listeUrl = {{ url_for('personnes.liste')|tojson }};
  let debounceTimer = null;
  let fetchController = null;

  function updateClearButton() {
    if (!clearBtn) return;
    clearBtn.hidden = searchInput.value.trim().length === 0;
  }

  function buildParams() {
    const params = new URLSearchParams();
    const q = searchInput.value.trim();
    if (q) params.set('q', q);
    form.querySelectorAll('[name=role]:checked').forEach((cb) => params.append('role', cb.value));
    if (form.querySelector('[name=supprimes]')) params.set('supprimes', '1');
    return params;
  }

  async function refreshListe() {
    const params = buildParams();
    params.set('fragment', '1');

    if (fetchController) fetchController.abort();
    fetchController = new AbortController();

    results.classList.add('is-loading');
    updateClearButton();

    try {
      const resp = await fetch(`${listeUrl}?${params}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        signal: fetchController.signal,
      });
      if (!resp.ok) throw new Error('Erreur réseau');
      results.innerHTML = await resp.text();

      params.delete('fragment');
      const qs = params.toString();
      history.replaceState(null, '', qs ? `${listeUrl}?${qs}` : listeUrl);
    } catch (err) {
      if (err.name !== 'AbortError') console.error(err);
    } finally {
      results.classList.remove('is-loading');
    }
  }

  searchInput.addEventListener('input', () => {
    updateClearButton();
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(refreshListe, 300);
  });

  form.querySelectorAll('[name=role]').forEach((cb) => {
    cb.addEventListener('change', refreshListe);
  });

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    refreshListe();
  });

  clearBtn?.addEventListener('click', () => {
    searchInput.value = '';
    updateClearButton();
    searchInput.focus();
    refreshListe();
  });

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