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

<main class="chat-main">
  <section class="chat-intro">
    <img class="chat-neo-avatar" src="/assets/topstats-icon.png" alt="" aria-hidden="true">
    <div>
      <p class="eyebrow">Assistant IA</p>
      <h1>Chat avec TopStats</h1>
      <span class="chat-plan-notice <%= isPro ? 'is-pro' : 'is-free' %>">
        <%= isPro ? 'Accès PRO actif' : (isExpiredSubscription ? 'Accès PRO expiré' : 'Réservé aux membres PRO') %>
      </span>
    </div>
  </section>

  <section class="chat-shell">
    <div class="chat-window" data-chat-window>
      <% if (isChatLocked && messages.length) { %>
        <div class="chat-preview-note">
          <span>Aperçu lecture seule</span>
          <p>Vos derniers échanges restent visibles. Pour continuer avec TopStats, réactivez l’accès PRO.</p>
        </div>
      <% } %>
      <% if (!messages.length) { %>
        <article class="message message-bot chat-empty-message">
          <p>TopStats répond aux membres PRO sur les matchs, les cotes, les combinés raisonnables et les analyses avant match.</p>
        </article>
      <% } %>
      <% messages.forEach((message) => { %>
        <article class="message <%= message.role === 'user' ? 'message-user' : 'message-bot' %>">
          <p><%= message.content %></p>
        </article>
      <% }) %>
    </div>
  </section>

  <% if (isPro) { %>
    <form class="chat-form" data-chat-form method="post" action="/api/chat">
      <input type="text" name="message" maxlength="800" autocomplete="off" placeholder="Posez votre question à TopStats..." required>
      <button class="btn btn-primary" type="submit" aria-label="Envoyer" data-chat-submit>→</button>
    </form>
  <% } else { %>
    <section class="chat-pro-lockbar" aria-label="Chat réservé aux membres PRO">
      <div>
        <span class="chat-lock-pill">PRO</span>
        <h2><%= isExpiredSubscription ? 'Votre accès PRO a expiré' : 'Chat TopStats réservé aux membres PRO' %></h2>
        <p>TopStats analyse vos matchs, explique les cotes et vous aide à rester discipliné avant de jouer.</p>
      </div>
      <a class="btn btn-primary" href="/pro">Débloquer TopStats</a>
    </section>
  <% } %>
</main>

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