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

<%
  const meta = typeof recommendationsMeta !== 'undefined' && recommendationsMeta ? recommendationsMeta : {};
  const visibleRecommendations = Array.isArray(recommendations) ? recommendations : [];
  const lockedRecommendations = Array.isArray(hiddenRecommendations) ? hiddenRecommendations : [];
  const hiddenCount = Number(meta.hiddenCount || lockedRecommendations.length || 0);
  const freeMaxOdds = meta.freeMaxOdds ? Number(meta.freeMaxOdds) : 1.45;
  const recommendationsLoading = typeof isRecommendationsLoading !== 'undefined' && isRecommendationsLoading;
  const recommendationsAsyncUrl = typeof recommendationsDataUrl !== 'undefined' ? recommendationsDataUrl : '';
  const proUser = typeof isPro !== 'undefined' && isPro;
  const totalRecommendations = visibleRecommendations.length + lockedRecommendations.length;
  const splitMatchLabel = (label) => String(label || 'Match du jour').split(/\s+(?:vs|v|-|–)\s+/i).filter(Boolean);
%>

<main class="app-main app-screen recommendations-app recommendations-day-app" data-async-page data-recommendations-page data-async-loading="<%= recommendationsLoading ? 'true' : 'false' %>" data-async-url="<%= recommendationsAsyncUrl %>">
  <section class="recommendations-tools" aria-label="Outils des avis du jour">
    <label class="recommendations-search">
      <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" name="recommendations_search" placeholder="Buscar" autocomplete="off" data-recommendations-search>
    </label>
    <button type="button" class="recommendations-tool-button recommendations-sort" data-recommendations-sort="probability" aria-label="Trier les avis">
      <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>
      <span data-recommendations-sort-label>Tri</span>
    </button>
  </section>

  <% if (proUser) { %>
    <section class="recommendations-pro-card is-unlocked">
      <h1>Avis du jour</h1>
      <p>Tous les avis TopStats sont débloqués. Les cotes gratuites et les signaux PRO sont visibles sur une seule page.</p>
      <span><%= totalRecommendations %> avis</span>
    </section>
  <% } else { %>
    <section class="recommendations-pro-card">
      <h1>Exclusivité TopStats Pro</h1>
      <p>Les meilleurs avis de la journée sont filtrés et regroupés ici. Les cotes jusqu’à <%= freeMaxOdds.toFixed(2) %> restent visibles, les marchés supérieurs sont réservés aux membres PRO.</p>
      <a href="/pro">Débloquer TopStats Pro</a>
    </section>
  <% } %>

  <% if (recommendationsLoading) { %>
    <section class="dashboard-hub-loading app-async-loading recommendations-loading" data-async-loading-box>
      <span></span>
      <div>
        <strong>Cargando consejos del día...</strong>
        <p>TopStats récupère les avis disponibles.</p>
      </div>
    </section>
  <% } %>

  <% if (!recommendationsLoading && visibleRecommendations.length) { %>
    <section class="recommendations-day-list" aria-label="Avis TopStats visibles">
      <% visibleRecommendations.forEach((recommendation) => { %>
        <%
          const analysisId = recommendation.api_fixture_id || recommendation.fixture_id || recommendation.match_id;
          const label = recommendation.match_label || 'Match du jour';
          const teams = splitMatchLabel(label);
          const homeName = recommendation.home_team || teams[0] || label;
          const awayName = recommendation.away_team || teams[1] || '';
        %>
        <article
          class="recommendations-day-card"
          data-recommendation-card
          data-recommendation-search="<%= `${homeName} ${awayName} ${recommendation.title || ''} ${recommendation.market || ''} ${recommendation.bookmaker || ''}`.toLowerCase() %>"
          data-recommendation-probability="<%= Number(recommendation.estimated_probability || recommendation.confidence || 0) || 0 %>"
          data-recommendation-odds="<%= Number(recommendation.odds || 0) || 0 %>"
          data-recommendation-match="<%= `${homeName} ${awayName}`.toLowerCase() %>"
        >
          <div class="recommendations-day-match">
            <span>
              <% if (recommendation.home_logo) { %><img src="<%= recommendation.home_logo %>" alt=""><% } else { %><em><%= initials(homeName) %></em><% } %>
              <% if (awayName) { %>
                <% if (recommendation.away_logo) { %><img src="<%= recommendation.away_logo %>" alt=""><% } else { %><em><%= initials(awayName) %></em><% } %>
              <% } %>
            </span>
            <strong><%= homeName %><% if (awayName) { %> - <%= awayName %><% } %></strong>
          </div>
          <div class="recommendations-day-content">
            <h2><%= recommendation.title %></h2>
            <div class="recommendations-day-metrics">
              <span>Proba <strong><%= recommendation.estimated_probability || recommendation.confidence || '-' %>%</strong></span>
              <span>Cote <strong><%= recommendation.odds ? Number(recommendation.odds).toFixed(2) : '-' %></strong></span>
              <% if (analysisId) { %>
                <a class="recommendations-day-analysis" href="/matchs/<%= analysisId %>/analyse">Análisis</a>
              <% } %>
            </div>
          </div>
        </article>
      <% }) %>
    </section>
  <% } %>

  <% if (!recommendationsLoading && lockedRecommendations.length) { %>
    <section class="recommendations-day-list recommendations-locked-list" aria-label="Avis TopStats réservés PRO">
      <% lockedRecommendations.forEach((recommendation) => { %>
        <%
          const label = recommendation.match_label || 'Match du jour';
          const teams = splitMatchLabel(label);
          const homeName = recommendation.home_team || teams[0] || label;
          const awayName = recommendation.away_team || teams[1] || '';
        %>
        <article
          class="recommendations-day-card is-locked"
          data-recommendation-card
          data-recommendation-search="<%= `${homeName} ${awayName} ${recommendation.title || ''} ${recommendation.market || ''} ${recommendation.bookmaker || ''}`.toLowerCase() %>"
          data-recommendation-probability="<%= Number(recommendation.estimated_probability || recommendation.confidence || 0) || 0 %>"
          data-recommendation-odds="<%= Number(recommendation.odds || 0) || 0 %>"
          data-recommendation-match="<%= `${homeName} ${awayName}`.toLowerCase() %>"
        >
          <div class="recommendations-day-match">
            <span>
              <% if (recommendation.home_logo) { %><img src="<%= recommendation.home_logo %>" alt=""><% } else { %><em><%= initials(homeName) %></em><% } %>
              <% if (awayName) { %>
                <% if (recommendation.away_logo) { %><img src="<%= recommendation.away_logo %>" alt=""><% } else { %><em><%= initials(awayName) %></em><% } %>
              <% } %>
            </span>
            <strong><%= homeName %><% if (awayName) { %> - <%= awayName %><% } %></strong>
          </div>
          <div class="recommendations-day-locked-row">
            <span aria-hidden="true">🔒</span>
            <p>Signal TopStats PRO réservé</p>
            <i aria-hidden="true">🔒</i>
          </div>
        </article>
      <% }) %>
    </section>
  <% } %>

  <section class="app-empty-card recommendations-empty recommendations-filter-empty" data-recommendations-empty hidden>
    <h2>Ningún consejo encontrado</h2>
    <p>Essayez une autre recherche ou un autre tri.</p>
  </section>

  <% if (!recommendationsLoading && !totalRecommendations) { %>
    <section class="app-empty-card recommendations-empty">
      <h2>Ningún consejo fiable ahora mismo</h2>
      <p><%= meta.note ? meta.note : 'TopStats attend des données pré-match suffisantes avant de proposer une opportunité.' %></p>
      <a class="btn btn-primary" href="/matchs">Voir les matchs</a>
    </section>
  <% } %>

  <% if (!recommendationsLoading && !proUser && hiddenCount && !lockedRecommendations.length) { %>
    <section class="app-locked-signal recommendations-hidden-summary">
      <div>
        <span>🔒</span>
        <strong>Signaux PRO masqués</strong>
        <p><%= hiddenCount %> avis dépassent la limite gratuite de <%= freeMaxOdds.toFixed(2) %>.</p>
      </div>
      <a class="btn btn-primary btn-small" href="/pro">Devenir PRO</a>
    </section>
  <% } %>
</main>

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