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

<main class="app-main history-page">
  <%
    const finishedPicksTotal = Number(pickSummary.validated || 0) + Number(pickSummary.lost || 0) + Number(pickSummary.voided || 0);
  %>
  <section class="page-title">
    <p class="eyebrow">Mémoire TopStats</p>
    <h1>Historial</h1>
    <p>Consejos cerrados, résultats, analyses consultées et conversations récentes.</p>
    <a class="btn btn-soft btn-small" href="/historique-neo">Voir l’historique complet de TopStats</a>
  </section>

  <section class="history-proof-grid">
    <article>
      <span><%= finishedPicksTotal %></span>
      <p>Consejos cerrados</p>
    </article>
    <article>
      <span><%= pickSummary.validated || 0 %></span>
      <p>Gagnés</p>
    </article>
    <article>
      <span><%= pickSummary.lost || 0 %></span>
      <p>Perdus</p>
    </article>
    <article>
      <span><%= pickSummary.voided || 0 %></span>
      <p>Reembolsados</p>
    </article>
  </section>

  <section class="glass-panel picks-history-panel">
    <div class="section-heading">
      <p class="eyebrow">Consejos TopStats</p>
      <h2>Consejos cerrados</h2>
      <p>Aquí tienes solo los pronósticos ya ganados, perdidos o reembolsados.</p>
    </div>

    <% if (picks && picks.length) { %>
      <div class="picks-history-list">
        <% picks.forEach((pick) => { %>
          <article>
            <div>
              <span><%= pick.match_label || 'Match à confirmer' %></span>
              <h3><%= pick.title %></h3>
              <p><%= pick.market || 'Marché' %> · <%= pick.bookmaker || 'Bookmaker' %></p>
            </div>
            <aside>
              <% if (pick.odds) { %><strong><%= Number(pick.odds).toFixed(2) %></strong><% } %>
              <small class="pick-status pick-status-<%= pick.status %>">
                <%= pick.status === 'validated' ? 'Gagné' : pick.status === 'lost' ? 'Perdu' : 'Remboursé' %>
              </small>
              <small><%= formatDate(pick.created_at) %></small>
            </aside>
          </article>
        <% }) %>
      </div>

      <nav class="pagination" aria-label="Pagination conseils suivis">
        <% if (picksPagination.page > 1) { %>
          <a class="btn btn-soft btn-small" href="/historique?conseils_page=<%= picksPagination.page - 1 %>">Précédent</a>
        <% } else { %>
          <span class="btn btn-ghost btn-small disabled">Précédent</span>
        <% } %>
        <span>Page <%= picksPagination.page %> / <%= picksPagination.totalPages %></span>
        <% if (picksPagination.page < picksPagination.totalPages) { %>
          <a class="btn btn-soft btn-small" href="/historique?conseils_page=<%= picksPagination.page + 1 %>">Suivant</a>
        <% } else { %>
          <span class="btn btn-ghost btn-small disabled">Suivant</span>
        <% } %>
      </nav>
    <% } else { %>
      <div class="empty-state compact">
        <h2>Ningún consejo cerrado</h2>
        <p>Les conseils apparaissent ici seulement quand leur résultat est connu.</p>
      </div>
    <% } %>
  </section>

  <% if (history.length) { %>
    <div class="timeline">
      <% history.forEach((item) => { %>
        <article>
          <span></span>
          <div>
            <p><%= item.event_type %></p>
            <h3><%= item.label %></h3>
            <small><%= formatDate(item.created_at) %></small>
          </div>
        </article>
      <% }) %>
    </div>

    <nav class="pagination" aria-label="Pagination historique">
      <% if (pagination.page > 1) { %>
        <a class="btn btn-soft btn-small" href="/historique?page=<%= pagination.page - 1 %>">Précédent</a>
      <% } else { %>
        <span class="btn btn-ghost btn-small disabled">Précédent</span>
      <% } %>
      <span>Page <%= pagination.page %> / <%= pagination.totalPages %> · <%= pagination.total %> élément<%= pagination.total > 1 ? 's' : '' %></span>
      <% if (pagination.page < pagination.totalPages) { %>
        <a class="btn btn-soft btn-small" href="/historique?page=<%= pagination.page + 1 %>">Suivant</a>
      <% } else { %>
        <span class="btn btn-ghost btn-small disabled">Suivant</span>
      <% } %>
    </nav>
  <% } else { %>
    <section class="glass-panel empty-state">
      <h2>Sin historial</h2>
      <p>Vos analyses, recommandations et messages apparaîtront ici dès que vous utilisez TopStats.</p>
    </section>
  <% } %>
</main>

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