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

<%
  function neoStatusLabel(status) {
    if (status === 'validated') return 'Gagné';
    if (status === 'lost') return 'Perdu';
    if (status === 'void') return 'Remboursé';
    return 'Traité';
  }

  const estimates = gainEstimates || {};
  const proGain = estimates.pro || {};
  const proDisplayedProfit = Number(estimates.proDisplayedProfit ?? proGain.profit ?? 0);
  const simulationStake = Number(estimates.stake || 100);
  const shouldShowGainSimulation = proDisplayedProfit >= 250;
  const decidedTotal = Number(summary.validated || 0) + Number(summary.lost || 0);
  const successRate = decidedTotal > 0 ? Math.round((Number(summary.validated || 0) / decidedTotal) * 100) : null;
  function formatEuro(value) {
    const amount = Number(value || 0);
    const sign = amount > 0 ? '+' : '';
    return `${sign}${amount.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}€`;
  }
%>

<main class="app-main neo-history-page neo-history-app">
  <section class="neo-history-app-hero">
    <span aria-hidden="true">
      <img src="/assets/topstats-robot-cutout.png" alt="">
    </span>
    <div>
      <p class="eyebrow">Suivi transparent</p>
      <h1>Historial TopStats</h1>
      <p>Aquí tienes los consejos cerrados, sus resultados y una lectura global del rendimiento.</p>
    </div>
  </section>

  <% if (shouldShowGainSimulation && proDisplayedProfit > 0) { %>
    <section class="neo-history-fomo" aria-label="Avantage PRO">
      <div>
        <span>Historial PRO</span>
        <h2>Les conseils PRO terminés affichent <strong><%= formatEuro(proDisplayedProfit) %></strong> de gain estimé sur cette simulation.</h2>
        <p>Simulation basée sur <%= simulationStake.toLocaleString('es-ES', { maximumFractionDigits: 0 }) %>€ misés par avis terminé avec cote. Le pack PRO débloque les conseils sans plafond gratuit de cote, avec une lecture plus complète du risque.</p>
      </div>
      <a class="btn btn-primary" href="/pro">Voir les packs PRO</a>
    </section>
  <% } %>

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

  <section class="neo-history-stake-note" aria-label="Base de calcul de l'historique">
    <strong>Base de calcul</strong>
    <p>Les gains, pertes et bénéfices affichés sont une simulation : <%= simulationStake.toLocaleString('es-ES', { maximumFractionDigits: 0 }) %>€ misés sur chaque avis terminé avec cote. Les avis sans cote exploitable sont suivis dans l’historique, mais ne modifient pas cette simulation.</p>
  </section>

  <% if (neoHistory.length) { %>
    <section class="neo-history-list" aria-label="Historial completo de consejos TopStats">
      <% neoHistory.forEach((item) => { %>
        <article class="neo-history-card neo-history-card-compact">
          <div class="neo-history-main">
            <span><%= item.match_label || 'Match à confirmer' %></span>
            <h2><%= item.title %></h2>
          </div>
          <div class="neo-history-meta">
            <em class="pick-status pick-status-<%= item.result_status %>"><%= neoStatusLabel(item.result_status) %></em>
          </div>
          <div class="neo-history-signals">
            <span>Confiance <strong><%= item.confidence || '-' %><%= item.confidence ? '%' : '' %></strong></span>
            <span>Cote <strong><%= item.odds ? Number(item.odds).toFixed(2) : 'Non dispo' %></strong></span>
            <span>Risque <strong><%= item.risk_level || 'Mesuré' %></strong></span>
          </div>
          <div class="neo-history-foot">
            <span><%= item.market || item.recommendation_type || 'Marché' %></span>
            <small><%= item.kickoff_at ? formatDateTime(item.kickoff_at) : formatDate(item.created_at) %></small>
          </div>
        </article>
      <% }) %>
    </section>

    <nav class="pagination" aria-label="Pagination historique TopStats">
      <% if (pagination.page > 1) { %>
        <a class="btn btn-soft btn-small" href="/historique-neo?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 %> conseil<%= pagination.total > 1 ? 's' : '' %></span>
      <% if (pagination.page < pagination.totalPages) { %>
        <a class="btn btn-soft btn-small" href="/historique-neo?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>Ningún consejo cerrado</h2>
      <p>Les conseils apparaissent ici uniquement lorsque leur résultat est connu.</p>
      <a class="btn btn-soft" href="/recommendations">Voir les recommandations</a>
    </section>
  <% } %>
</main>

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