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

<%
  const statsDay = typeof dailyStats !== 'undefined' && dailyStats ? dailyStats : { cards: [], lockedCards: [], categories: [], total: 0, hiddenCount: 0, note: '' };
  const statsCards = Array.isArray(statsDay.cards) ? statsDay.cards : [];
  const lockedStatsCards = Array.isArray(statsDay.lockedCards) ? statsDay.lockedCards : [];
  const statsCategories = Array.isArray(statsDay.categories) ? statsDay.categories : [];
  const freeLimit = Number(freeMaxOdds || 1.45);
  const oddsPickerValues = ['1.01', '1.10', '1.20', '1.30', '1.40', '1.45', '1.50', '1.75', '2.00', '2.50', '3.00', '4.00', '5.00', '7.50', '10.00', '15.00', '20.00', '30.00', '50.00', '100.00'];
  const probabilityPickerValues = ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'];
%>

<main class="app-main app-screen stats-day-app">
  <section class="neo-stats-day" data-neo-stats-day>
    <header class="neo-stats-day-head">
      <div>
        <h1>Stats du jour</h1>
        <p>Les meilleures statistiques de la journée</p>
        <div class="neo-stats-day-note">
          <span>?</span>
          <small>L’indicateur 4/5 ou 5/5 indique combien de fois cette statistique s’est produite lors des 5 derniers matchs.</small>
        </div>
      </div>
    </header>

    <div class="neo-stats-day-tools">
      <label>
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16 16 4 4"></path></svg>
        <input type="search" placeholder="Buscar une stat" data-neo-stats-search>
      </label>
      <label class="neo-stats-odds-switch">
        <span>Cotes</span>
        <input type="checkbox" data-neo-stats-odds-toggle checked>
        <i></i>
      </label>
      <button type="button" class="neo-stats-filter-button" aria-label="Filtres" aria-expanded="true" data-neo-stats-filter-toggle>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10"></path><path d="M4 12h16"></path><path d="M4 17h7"></path><path d="M17 6v12"></path><path d="m14 15 3 3 3-3"></path></svg>
        Tri
      </button>
    </div>

    <div class="neo-stats-tabs" data-neo-stats-tabs>
      <button type="button" class="active" data-neo-stats-category="all">Top des stats</button>
      <% statsCategories.slice(0, 5).forEach((category) => { %>
        <button type="button" data-neo-stats-category="<%= category %>"><%= category %></button>
      <% }) %>
    </div>

    <div class="neo-stats-filter-panel" data-neo-stats-filter-panel>
      <div class="neo-stats-filter-head">
        <span>Filtres</span>
        <button type="button" class="neo-stats-reset-button" data-neo-stats-reset>Reset</button>
      </div>
      <div class="neo-stats-filter-range">
        <span>Plage de cotes</span>
        <label class="neo-stats-picker" data-neo-stats-picker>
          <small>Min</small>
          <input type="hidden" value="1.01" data-neo-stats-odds-min>
          <button type="button" data-neo-stats-picker-toggle>1.01</button>
          <div class="neo-stats-picker-list" data-neo-stats-picker-list>
            <% oddsPickerValues.forEach((value) => { %>
              <button type="button" data-neo-stats-picker-value="<%= value %>"><%= value %></button>
            <% }) %>
          </div>
        </label>
        <i></i>
        <label class="neo-stats-picker" data-neo-stats-picker>
          <small>Max</small>
          <input type="hidden" value="20.00" data-neo-stats-odds-max>
          <button type="button" data-neo-stats-picker-toggle>20.00</button>
          <div class="neo-stats-picker-list" data-neo-stats-picker-list>
            <% oddsPickerValues.forEach((value) => { %>
              <button type="button" data-neo-stats-picker-value="<%= value %>"><%= value %></button>
            <% }) %>
          </div>
        </label>
      </div>
      <div class="neo-stats-filter-range">
        <span>Plage de proba (%)</span>
        <label class="neo-stats-picker" data-neo-stats-picker>
          <small>Min</small>
          <input type="hidden" value="50" data-neo-stats-prob-min>
          <button type="button" data-neo-stats-picker-toggle>50</button>
          <div class="neo-stats-picker-list" data-neo-stats-picker-list>
            <% probabilityPickerValues.forEach((value) => { %>
              <button type="button" data-neo-stats-picker-value="<%= value %>"><%= value %></button>
            <% }) %>
          </div>
        </label>
        <i></i>
        <label class="neo-stats-picker" data-neo-stats-picker>
          <small>Max</small>
          <input type="hidden" value="100" data-neo-stats-prob-max>
          <button type="button" data-neo-stats-picker-toggle>100</button>
          <div class="neo-stats-picker-list" data-neo-stats-picker-list>
            <% probabilityPickerValues.forEach((value) => { %>
              <button type="button" data-neo-stats-picker-value="<%= value %>"><%= value %></button>
            <% }) %>
          </div>
        </label>
      </div>
      <div class="neo-stats-sort-row" aria-label="Trier les stats par">
        <span>Trier les stats par</span>
        <button type="button" class="active" data-neo-stats-sort="level">Probabilité</button>
        <button type="button" data-neo-stats-sort="odds">Cote</button>
        <button type="button" data-neo-stats-sort="match">Ordre de lecture</button>
      </div>
      <div class="neo-stats-display-row" aria-label="Affichage des stats">
        <span>Affichage</span>
        <button type="button" class="active" data-neo-stats-display="level">Par match x/5</button>
        <button type="button" data-neo-stats-display="percent">En %</button>
      </div>
      <% if (statsCategories.length) { %>
        <div class="neo-stats-section-checks" data-neo-stats-categories>
          <span>Sections à afficher</span>
          <% statsCategories.forEach((category) => { %>
            <label>
              <input type="checkbox" value="<%= category %>" data-neo-stats-category-check checked>
              <i></i>
              <%= category %>
            </label>
          <% }) %>
        </div>
      <% } %>
    </div>

    <% if (statsCategories.length > 1) { %>
      <div class="neo-stats-categories" data-neo-stats-categories aria-hidden="true">
        <% statsCategories.forEach((category) => { %>
          <button type="button" data-neo-stats-category="<%= category %>"><%= category %></button>
        <% }) %>
      </div>
    <% } %>

    <% if (statsCards.length || lockedStatsCards.length) { %>
      <div class="neo-stats-grid" aria-label="Stats IA du jour">
        <% statsCards.forEach((card) => { %>
          <article
            class="neo-stats-card"
            data-neo-stats-card
            data-neo-stats-card-category="<%= card.category %>"
            data-neo-stats-search="<%= `${card.category || ''} ${card.title || ''} ${card.matchLabel || ''} ${card.bookmaker || ''}`.toLowerCase() %>"
            data-neo-stats-level="<%= Number(card.level || 0) %>"
            data-neo-stats-odds="<%= Number(card.odds || 0) %>"
            data-neo-stats-probability="<%= Number(card.probability || 0) %>"
          >
            <div class="neo-stats-match">
              <span>
                <% if (card.homeLogo) { %><img src="<%= card.homeLogo %>" alt=""><% } else { %><em><%= initials(card.homeTeam) %></em><% } %>
                <% if (card.awayLogo) { %><img src="<%= card.awayLogo %>" alt=""><% } else if (card.awayTeam) { %><em><%= initials(card.awayTeam) %></em><% } %>
              </span>
              <strong><%= card.matchLabel %></strong>
            </div>
            <div class="neo-stats-card-body">
              <small><%= card.category %></small>
              <h2><%= card.title %></h2>
              <p><%= card.note || 'Lecture IA générale' %></p>
            </div>
            <div class="neo-stats-card-metrics">
              <span
                data-neo-stats-level-label
                data-level-label="<%= card.levelLabel || `${card.level || 0}/5` %>"
                data-probability-label="<%= Number(card.probability || 0).toFixed(0) %>%"
              ><%= card.levelLabel || `${card.level || 0}/5` %></span>
              <% if (card.odds) { %><strong><%= Number(card.odds).toFixed(2) %></strong><% } %>
              <% if (card.bookmaker) { %><em><%= card.bookmaker %></em><% } %>
            </div>
            <div class="neo-stats-card-actions">
              <a href="<%= card.href %>">Análisis</a>
              <button
                type="button"
                data-neo-list-add
                data-list-title="<%= card.title %>"
                data-list-category="<%= card.category %>"
                data-list-match="<%= card.matchLabel %>"
                data-list-href="<%= card.href %>"
                data-list-odds="<%= card.odds || '' %>"
                data-list-bookmaker="<%= card.bookmaker || '' %>"
                data-list-level="<%= card.levelLabel || '' %>"
              >Ajouter à ma liste</button>
            </div>
          </article>
        <% }) %>

        <% lockedStatsCards.forEach((card) => { %>
          <article
            class="neo-stats-card is-locked"
            data-neo-stats-card
            data-neo-stats-card-category="<%= card.category %>"
            data-neo-stats-search="<%= `${card.category || ''} ${card.title || ''} ${card.matchLabel || ''}`.toLowerCase() %>"
            data-neo-stats-level="<%= Number(card.level || 0) %>"
            data-neo-stats-odds="<%= Number(card.odds || 0) %>"
            data-neo-stats-probability="<%= Number(card.probability || 0) %>"
          >
            <div class="neo-stats-match">
              <span>
                <% if (card.homeLogo) { %><img src="<%= card.homeLogo %>" alt=""><% } else { %><em><%= initials(card.homeTeam) %></em><% } %>
                <% if (card.awayLogo) { %><img src="<%= card.awayLogo %>" alt=""><% } else if (card.awayTeam) { %><em><%= initials(card.awayTeam) %></em><% } %>
              </span>
              <strong><%= card.matchLabel %></strong>
            </div>
            <div class="neo-stats-card-body">
              <small><%= card.category %></small>
              <h2>Stat TopStats PRO</h2>
              <p>Cote supérieure à <%= freeLimit.toFixed(2) %> réservée aux membres PRO.</p>
            </div>
            <div class="neo-stats-card-lock">🔒</div>
          </article>
        <% }) %>
      </div>
    <% } else { %>
      <section class="app-empty-card neo-stats-page-empty">
        <h2>No hay stats disponibles</h2>
        <p>TopStats affichera les stats générales dès que les snapshots et cotes du jour seront prêts.</p>
        <a class="btn btn-primary" href="/matchs">Voir les matchs</a>
      </section>
    <% } %>

    <section class="app-empty-card neo-stats-empty" data-neo-stats-empty hidden>
      <h2>No se ha encontrado ninguna stat</h2>
      <p>Essayez une autre recherche ou un autre filtre.</p>
    </section>
  </section>
</main>

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