<%- include("partials/layout-top", { title }) %>
<% const statsTitle = statsOwner && !statsOwner.isSelf ? `${statsOwner.username}'s stats` : "Your stats"; %>
<section class="card">
  <div class="stats-header">
    <h1><%= statsTitle %></h1>
    <% if (compare) { %>
    <button
      type="button"
      class="button subtle"
      data-compare-toggle
      data-compare-label="Back to stats"
    >
      Compare
    </button>
    <% } %>
  </div>
</section>

<div class="stats-default" data-stats-default>
  <section class="card">
    <h2>Community Interaction</h2>
    <% if (!stats) { %>
    <p>No stats yet. Send a message or run a command to appear here.</p>
    <% } else { %>
    <div class="stat-grid">
      <div class="stat">
        <span class="stat-label">Messages</span>
        <span class="stat-value"><%= stats.messages %></span>
      </div>
      <div class="stat">
        <span class="stat-label">Commands</span>
        <span class="stat-value"><%= stats.commands %></span>
      </div>
    </div>
    <% } %>
  </section>

  <section class="card">
    <h2>Expression Interaction</h2>
    <% if (!expression) { %>
    <p>This category will appear once the Expression Interaction plugin is active.</p>
    <% } else { %>
    <div class="stat-grid">
      <div class="stat">
        <span class="stat-label">Actions given</span>
        <span class="stat-value"><%= expression.totals.given %></span>
      </div>
      <div class="stat">
        <span class="stat-label">Actions received</span>
        <span class="stat-value"><%= expression.totals.received %></span>
      </div>
    </div>
    <% } %>
  </section>

  <% (pluginStats || []).forEach((section) => { %>
  <section class="card">
    <h2><%= section.title %></h2>
    <% if (!section.stats || !section.stats.length) { %>
    <p><%= section.emptyMessage %></p>
    <% } else { %>
    <div class="stat-grid">
      <% section.stats.forEach((stat) => { %>
      <div class="stat">
        <span class="stat-label"><%= stat.label %></span>
        <span class="stat-value"><%= stat.value %></span>
      </div>
      <% }) %>
    </div>
    <% } %>
  </section>
  <% }) %>
</div>

<% if (compare) { %>
<section class="card stats-compare" data-stats-compare>
  <div class="stats-compare-header">
    <h2>Compare stats</h2>
    <div class="table-tools">
      <input
        class="table-search"
        type="search"
        placeholder="Search stats"
        aria-label="Search stats"
        data-table-filter="compare"
      />
    </div>
  </div>
  <div class="table-wrap">
    <table class="table" data-table="compare">
      <thead>
        <tr>
          <th data-sort="section">Section</th>
          <th data-sort="stat">Stat</th>
          <th data-sort="left"><%= compare.leftLabel %></th>
          <th data-sort="right"><%= compare.rightLabel %></th>
        </tr>
      </thead>
      <tbody>
        <% compare.rows.forEach((row) => { %>
        <tr
          data-search="<%= `${row.section} ${row.label}` %>"
          data-section="<%= row.section %>"
          data-stat="<%= row.label %>"
          data-left="<%= row.left ?? '' %>"
          data-right="<%= row.right ?? '' %>"
        >
          <td><%= row.section %></td>
          <td><%= row.label %></td>
          <td><%= row.left ?? '-' %></td>
          <td><%= row.right ?? '-' %></td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</section>
<% } %>
<%- include("partials/layout-bottom") %>
