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

<%
  const pickSummary = data.pickSummary || { total: 0, pending: 0, validated: 0, lost: 0, voided: 0 };
  const dashboardLoading = typeof isDashboardLoading !== 'undefined' && isDashboardLoading;
  const dashboardAsyncUrl = typeof dashboardDataUrl !== 'undefined' ? dashboardDataUrl : '';
  const matches = Array.isArray(data.matches) ? data.matches : [];
  const visibleRecommendations = Array.isArray(data.recommendations) ? data.recommendations.length : 0;
  const hiddenRecommendations = Number(data.hiddenRecommendationsCount || 0);
  const stats = data.dashboardStats || {};
  const adviceCount = Number.isFinite(Number(stats.advice)) ? Number(stats.advice) : visibleRecommendations + hiddenRecommendations;
  const liveCount = Number.isFinite(Number(stats.live)) ? Number(stats.live) : matches.filter((match) => match.is_live || match.isLive || String(match.status || '').toLowerCase().includes('live') || String(match.status || '').toLowerCase().includes('direct')).length;
  const upcomingCount = Number.isFinite(Number(stats.upcoming)) ? Number(stats.upcoming) : matches.filter((match) => !(match.is_finished || match.isFinished) && !['ft', 'aet', 'pen', 'terminé'].includes(String(match.status || '').toLowerCase())).length;
  const matchesCount = Number.isFinite(Number(stats.matches)) ? Number(stats.matches) : matches.length;
  const followedCount = Number.isFinite(Number(stats.followed)) ? Number(stats.followed) : Number(pickSummary.pending || 0);
  const firstName = String(currentUser.name || 'TopStats').split(' ')[0];
  const now = new Date();
  const nowLabel = new Intl.DateTimeFormat('es-ES', { hour: '2-digit', minute: '2-digit' }).format(now);
  const todayLabel = new Intl.DateTimeFormat('es-ES', { day: 'numeric', month: 'long' }).format(now);
  const greeting = now.getHours() >= 18 ? 'Buenas noches' : 'Buenas';
%>

<main class="app-main dashboard-hub" data-async-page data-async-loading="<%= dashboardLoading ? 'true' : 'false' %>" data-async-url="<%= dashboardAsyncUrl %>">
  <section class="dashboard-hub-hero">
    <div>
      <h1><%= greeting %>, <%= firstName %></h1>
      <p>Briefing IA prêt · <%= todayLabel %></p>
    </div>
    <span class="dashboard-hub-access <%= isPro ? 'is-pro' : 'is-free' %>"><%= isPro ? 'PRO activo' : 'Gratis' %></span>
  </section>

  <% if (dashboardLoading) { %>
    <section class="dashboard-hub-loading app-async-loading" data-async-loading-box>
      <span></span>
      <div>
        <strong>Cargando el panel...</strong>
        <p>TopStats récupère les matchs et les avis disponibles.</p>
      </div>
    </section>
  <% } %>

  <section class="dashboard-hub-grid" aria-label="Accès rapides">
    <a class="dashboard-hub-card hub-advice hub-card-wide" href="/recommendations">
      <span class="hub-card-visual" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="m12 3 1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6Z"></path><path d="M19 15v4"></path><path d="M17 17h4"></path></svg>
      </span>
      <span class="hub-card-copy">
        <span class="hub-card-title-line">
          <strong>Avis IA</strong>
          <em><%= adviceCount > 0 ? `${adviceCount} avis` : 'Scanner' %></em>
        </span>
        <small>Signaux classés par confiance et risque.</small>
      </span>
      <span class="hub-card-art hub-art-advice" aria-hidden="true"></span>
    </a>

    <a class="dashboard-hub-card hub-matches" href="/matchs">
      <span class="hub-card-visual" aria-hidden="true">
        <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect><path d="M12 4v16"></path><path d="M4 12h16"></path></svg>
      </span>
      <span class="hub-card-copy">
        <strong>Matchs</strong>
        <small>Calendrier, compétitions et cotes.</small>
      </span>
      <em><%= matchesCount > 0 ? `${matchesCount} affiches` : 'Voir' %></em>
      <span class="hub-card-art hub-art-stadium" aria-hidden="true"></span>
    </a>

    <a class="dashboard-hub-card hub-direct" href="/direct">
      <span class="hub-card-visual" aria-hidden="true">
        <i></i><i></i><i></i>
        <svg viewBox="0 0 24 24"><path d="M12 18.5a6.5 6.5 0 1 0 0-13"></path><path d="M12 15a3 3 0 1 0 0-6"></path><path d="M12 12h.01"></path></svg>
      </span>
      <span class="hub-card-copy">
        <strong>Direct</strong>
        <small>Scores, événements et stats live.</small>
      </span>
      <em><%= liveCount > 0 ? `${liveCount} live` : 'Ningún directo' %></em>
      <span class="hub-card-art hub-art-live" aria-hidden="true"></span>
    </a>

    <a class="dashboard-hub-card hub-chat hub-card-wide <%= isPro ? '' : 'is-locked' %>" href="<%= isPro ? '/chat' : '/pro' %>">
      <span class="hub-card-visual" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M5 6.5A3.5 3.5 0 0 1 8.5 3h7A3.5 3.5 0 0 1 19 6.5v5A3.5 3.5 0 0 1 15.5 15H11l-5 4v-4.7A3.5 3.5 0 0 1 5 11.5z"></path><path d="M9 8.5h6"></path><path d="M9 11.5h3.5"></path></svg>
      </span>
      <span class="hub-card-copy">
        <span class="hub-card-title-line">
          <strong>Chat TopStats</strong>
          <em><%= isPro ? 'En ligne' : 'PRO' %></em>
        </span>
        <small><%= isPro ? 'Questionnez TopStats sur un match.' : 'Réservé aux membres PRO.' %></small>
      </span>
      <span class="hub-card-art hub-art-chat" aria-hidden="true"></span>
    </a>
  </section>

  <% if (!dashboardLoading && !matches.length && !adviceCount) { %>
    <section class="dashboard-hub-empty">
      <strong>No hay datos aprovechables ahora mismo</strong>
      <p>Les matchs et avis apparaîtront dès que TopStats détecte une affiche dans les compétitions ciblées.</p>
    </section>
  <% } %>
</main>

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