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

<%
  const matches = Array.isArray(favoriteMatches) ? favoriteMatches : [];
  const sections = favoriteSections || { live: [], buckets: [] };
  const liveMatches = Array.isArray(sections.live) ? sections.live : [];
  const buckets = Array.isArray(sections.buckets) ? sections.buckets : [];
  const count = Number.isFinite(Number(favoriteCount)) ? Number(favoriteCount) : matches.length;
  const oddsHref = includeOdds ? '/favoris' : '/favoris?odds=1';
%>

<main class="app-main app-screen favorites-app matches-favorites-render <%= includeOdds ? 'show-odds' : '' %>" data-favorites-page>
  <section class="favorites-topbar">
    <div>
      <h1>Favoritos</h1>
      <p><span data-favorites-count><%= count %></span> match<%= count > 1 ? 's' : '' %></p>
    </div>
    <div class="favorites-actions">
      <a class="favorites-odds-toggle <%= includeOdds ? 'active' : '' %>" href="<%= oddsHref %>" aria-label="Afficher les cotes">
        <span>Cotes</span>
        <i></i>
      </a>
      <form method="post" action="/favoris/vider" data-confirm="Vider tous les favoris ?">
        <button type="submit" class="favorites-icon-action" aria-label="Vider les favoris">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M4 7h16"></path>
            <path d="M9 7V4h6v3"></path>
            <path d="M7 7l1 13h8l1-13"></path>
            <path d="M10 11v5"></path>
            <path d="M14 11v5"></path>
          </svg>
        </button>
      </form>
      <a class="favorites-icon-action" href="/matchs" aria-label="Fermer les favoris">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12"></path><path d="M18 6 6 18"></path></svg>
      </a>
    </div>
  </section>

  <% if (count) { %>
    <% if (liveMatches.length) { %>
      <section class="favorites-live-block" data-favorites-section>
        <header>
          <h2>En direct</h2>
          <p><%= liveMatches.length %> match<%= liveMatches.length > 1 ? 's' : '' %></p>
        </header>
        <div class="favorites-match-list">
          <% liveMatches.forEach((match) => { %>
            <%- include('../partials/app-match-row', { match, favoriteMatchIds }) %>
          <% }) %>
        </div>
      </section>
    <% } %>

    <% buckets.forEach((bucket) => { %>
      <section class="favorites-bucket" data-favorites-section>
        <% if (bucket.title) { %>
          <h2><%= bucket.title %></h2>
        <% } %>
        <% bucket.competitions.forEach((competition) => { %>
          <details class="favorites-competition" open data-favorites-competition>
            <summary>
              <span class="favorites-competition-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <path d="M8 4h8v3a4 4 0 0 1-8 0z"></path>
                  <path d="M8 6H5a3 3 0 0 0 3 3"></path>
                  <path d="M16 6h3a3 3 0 0 1-3 3"></path>
                  <path d="M12 11v4"></path>
                  <path d="M9 20h6"></path>
                  <path d="M10 15h4l1 5H9z"></path>
                </svg>
              </span>
              <span>
                <strong><%= competition.name %></strong>
                <small><%= competition.country || 'World' %></small>
              </span>
              <em aria-hidden="true">⌄</em>
            </summary>
            <div class="favorites-match-list">
              <% competition.matches.forEach((match) => { %>
                <%- include('../partials/app-match-row', { match, favoriteMatchIds }) %>
              <% }) %>
            </div>
          </details>
        <% }) %>
      </section>
    <% }) %>
  <% } else { %>
    <section class="favorites-empty">
      <strong>No tienes favoritos</strong>
      <p>Ajoutez une étoile depuis la page Matchs pour retrouver vos affiches ici.</p>
      <a href="/matchs">Voir les matchs</a>
    </section>
  <% } %>
</main>

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