<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<% const groups = [
  ['clients', 'Clients'],
  ['requests', 'Demandes'],
  ['quotes', 'Devis'],
  ['invoices', 'Factures'],
  ['interventions', 'Interventions'],
  ['employees', 'Employés'],
  ['payments', 'Paiements']
]; %>
<% const totalResults = (typeof flatResults !== 'undefined' ? flatResults : []).length; %>
<div class="app-shell search-workspace">
  <%- partial('partials/admin-nav') %>
  <section class="content">
    <div class="page-head compact-page-head">
      <div>
        <p class="eyebrow">Navigation rapide</p>
        <h1>Recherche globale</h1>
        <p class="muted">Clients, factures, devis, employés, interventions et paiements dans une seule vue.</p>
      </div>
      <button class="secondary" type="button" data-command-palette-open>Ouvrir Cmd K</button>
    </div>
    <form class="panel search-hero compact-search-hero" method="get">
      <label>Recherche
        <input name="q" value="<%= term %>" placeholder="Ex: Marie, DEV-2026, facture, employé, paiement" autofocus>
      </label>
      <button>Rechercher</button>
    </form>

    <% if (term && term.length < 2) { %>
      <div class="empty-state"><strong>Recherche trop courte</strong><span>Saisissez au moins deux caractères pour éviter les résultats inutiles.</span></div>
    <% } %>

    <% if (term && term.length >= 2 && !totalResults) { %>
      <div class="empty-state"><strong>Aucun résultat trouvé</strong><span>Essayez un nom, un numéro de facture, une adresse, un téléphone ou une prestation.</span><a class="button secondary small" href="<%= adminBase %>/clients">Créer un client</a></div>
    <% } %>

    <div class="search-sections compact-search-sections">
      <% groups.forEach(([key, label]) => { const items = results[key] || []; %>
        <section class="panel compact-panel">
          <div class="inline-heading">
            <h2><%= label %></h2>
            <span class="badge"><%= items.length %></span>
          </div>
          <% items.forEach((item) => { %>
            <a class="result-row typed-result" href="<%= item.href %>">
              <small><%= item.type || label %></small>
              <strong><%= item.title %></strong>
              <span><%= item.subtitle %></span>
            </a>
          <% }) %>
          <% if (term && term.length >= 2 && !items.length) { %><p class="muted compact-empty-line">Aucun élément dans cette catégorie.</p><% } %>
        </section>
      <% }) %>
    </div>
  </section>
</div>
