<%- include('../partials/head', { title, bodyClass: 'app-page admin-page' }) %>
<%- include('../partials/app-header') %>

<main class="app-main">
  <%- include('../partials/admin-nav') %>
  <section class="page-title">
    <p class="eyebrow">Cotes disponibles</p>
    <h1>Bookmakers préférés</h1>
    <p>TopStats prend la cote du bookmaker en priorité 1, puis 2, puis 3 si la cote n’existe pas sur le marché choisi.</p>
  </section>

  <% if (apiError) { %>
    <section class="glass-panel admin-warning">
      <h2>Liste indisponible</h2>
      <p>Impossible de charger la liste des bookmakers : <%= apiError %></p>
      <p>La sélection déjà enregistrée reste disponible. Vérifiez la configuration des données puis revenez sur cette page.</p>
    </section>
  <% } %>

  <section class="glass-panel">
    <h2>Ordre de priorité</h2>
    <form method="post" action="/admin/bookmakers" class="form-stack">
      <div class="bookmaker-priority-grid">
        <% for (let index = 0; index < maxPreferences; index += 1) { %>
          <% const selectedItem = selected[index] || null; %>
          <label>Priorité <%= index + 1 %>
            <select name="bookmaker_<%= index + 1 %>">
              <option value="">Ninguno</option>
              <% bookmakers.forEach((bookmaker) => { %>
                <% const isSelected = selectedItem && (
                  (selectedItem.id && bookmaker.id && String(selectedItem.id) === String(bookmaker.id))
                  || (!selectedItem.id && selectedItem.normalizedName === bookmaker.normalizedName)
                ); %>
                <option value="<%= bookmaker.optionValue %>" <%= isSelected ? 'selected' : '' %>>
                  <%= bookmaker.name %><%= bookmaker.id ? ` · ID ${bookmaker.id}` : '' %>
                </option>
              <% }) %>
            </select>
          </label>
        <% } %>
      </div>
      <p class="micro-copy">Si aucun bookmaker préféré n’est configuré, TopStats reprend le comportement standard : meilleure cote exploitable disponible. Dès qu’une priorité est enregistrée, les autres bookmakers sont ignorés.</p>
      <button class="btn btn-primary" type="submit">Enregistrer les priorités</button>
    </form>
  </section>

  <section class="section-head">
    <div>
      <h2>Bookmakers disponibles</h2>
      <p><%= bookmakers.length %> bookmaker<%= bookmakers.length > 1 ? 's' : '' %> disponible<%= bookmakers.length > 1 ? 's' : '' %>.</p>
    </div>
  </section>
  <div class="table-card">
    <table>
      <thead><tr><th>Priorité</th><th>ID technique</th><th>Nom</th></tr></thead>
      <tbody>
        <% if (!bookmakers.length) { %>
          <tr><td colspan="3">No hay ningún bookmaker cargado por ahora.</td></tr>
        <% } %>
        <% bookmakers.forEach((bookmaker) => { %>
          <% const rank = selected.findIndex((item) => (
            (item.id && bookmaker.id && String(item.id) === String(bookmaker.id))
            || (!item.id && item.normalizedName === bookmaker.normalizedName)
          )); %>
          <tr>
            <td>
              <% if (rank >= 0) { %>
                <span class="status-pill active">Priorité <%= rank + 1 %></span>
              <% } else { %>
                <span class="status-pill">Non sélectionné</span>
              <% } %>
            </td>
            <td><%= bookmaker.id || '-' %></td>
            <td><%= bookmaker.name %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</main>

<%- include('../partials/bottom-nav') %>
<%- include('../partials/footer') %>
