{% extends "admin/admin_base.html" %}
{% block title %}Leaderboard — KittyRec Admin{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <h1>Leaderboard</h1>
    <span class="badge badge-purple ml-auto">{{ entries|length }} players ranked</span>
  </div>
  <p>Global all-time and periodic XP scores</p>
</div>

{% if SCOPE_ADMIN in scopes %}
<div class="card" style="margin-bottom:1.25rem">
  <div class="section-head">
    <h2>Reset Periodic</h2>
    <button class="btn btn-red btn-sm" onclick="resetPeriodic()">Reset Periodic Scores</button>
  </div>
  <p style="color:var(--text3);font-size:.82rem;margin:0">Resets the weekly/periodic score column for all players. All-time scores are unaffected.</p>
</div>
{% endif %}

<div class="card">
  <div class="search-bar">
    <input type="text" id="search" placeholder="Filter by username…" oninput="filterTable()">
  </div>
  <div class="table-wrap">
    <table id="lb-table">
      <thead>
        <tr>
          <th style="width:50px">Rank</th>
          <th>Player</th>
          <th>Level</th>
          <th>All-Time Score</th>
          <th>Periodic Score</th>
        </tr>
      </thead>
      <tbody>
        {% for e in entries %}
        <tr data-name="{{ (e.username or '')|lower }}">
          <td style="font-weight:700;color:{% if loop.index0 == 0 %}var(--yellow){% elif loop.index0 == 1 %}var(--text2){% elif loop.index0 == 2 %}var(--teal){% else %}var(--text3){% endif %}">#{{ loop.index }}</td>
          <td>
            <a href="/admin/players/{{ e.profile_id }}" style="font-weight:600;color:var(--text);text-decoration:none">{{ e.username or ('#' ~ e.profile_id) }}</a>
          </td>
          <td><span class="badge badge-purple">Lv {{ e.level or '?' }}</span></td>
          <td style="font-family:monospace;color:var(--purple-l);font-weight:700">{{ "{:,}".format(e.all_time or 0) }}</td>
          <td style="font-family:monospace;color:var(--teal)">{{ "{:,}".format(e.periodic or 0) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function filterTable() {
  const q = document.getElementById('search').value.toLowerCase();
  document.querySelectorAll('#lb-table tbody tr').forEach(r => {
    r.style.display = r.dataset.name.includes(q) ? '' : 'none';
  });
}

async function resetPeriodic() {
  if (!confirm('Reset all periodic leaderboard scores? This cannot be undone.')) return;
  const d = await KR.apiPost('/admin/api/reset_leaderboard', {});
  if (d.ok) { KR.toast('Periodic scores reset'); setTimeout(() => location.reload(), 600); }
  else KR.toast(d.error || 'Error', 'error');
}
</script>
{% endblock %}