{% extends 'admin_frontend/base.html' %}
{% block title %}Leaderboard{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-semibold">Leaderboard</h1>
  <form method="get" class="flex items-center gap-2">
    <label class="text-sm text-gray-600">Period</label>
    <select name="period" class="border rounded px-3 py-2">
      <option value="weekly" {% if period == 'weekly' %}selected{% endif %}>Weekly</option>
      <option value="month" {% if period == 'month' or period == 'monthly' or period == '30d' %}selected{% endif %}>Monthly</option>
      <option value="all" {% if period == 'all' or period == 'all_time' or period == 'alltime' or period == '' %}selected{% endif %}>All Time</option>
    </select>
    <label class="text-sm text-gray-600">Show</label>
    <select name="limit" class="border rounded px-3 py-2">
      {% for n in limit_options %}
      <option value="{{ n }}" {% if limit == n %}selected{% endif %}>{{ n }}</option>
      {% endfor %}
    </select>
    <button class="btn">Apply</button>
  </form>
</div>

{% if me %}
<div class="mb-4 grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-white rounded shadow p-4">
    <div class="text-sm text-gray-500">Your Rank</div>
    <div class="text-2xl font-semibold">#{{ me.rank|default:'—' }}</div>
  </div>
  <div class="bg-white rounded shadow p-4">
    <div class="text-sm text-gray-500">Your Points</div>
    <div class="text-2xl font-semibold">{{ me.points_given|default:0 }}</div>
  </div>
  <div class="bg-white rounded shadow p-4">
    <div class="text-sm text-gray-500">Last Helped</div>
    <div class="text-2xl font-semibold">{% if me.last_help_at %}{{ me.last_help_at|date:'Y-m-d H:i' }}{% else %}—{% endif %}</div>
  </div>
  </div>
{% endif %}

<div class="bg-white rounded shadow overflow-hidden">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Rank</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">User</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Points</th>
        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Last Help</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
      {% for u in rows %}
      <tr class="{% if me and u.id == me.id %}bg-blue-50{% endif %}">
        <td class="px-4 py-2 font-medium">#{{ u.rank }}</td>
        <td class="px-4 py-2">{{ u.username }}</td>
        <td class="px-4 py-2">{{ u.points_given|default:0 }}</td>
        <td class="px-4 py-2">{% if u.last_help_at %}{{ u.last_help_at|date:'Y-m-d H:i' }}{% else %}<span class="text-gray-400">—</span>{% endif %}</td>
      </tr>
      {% empty %}
      <tr><td class="px-4 py-4 text-center text-gray-500" colspan="4">No leaderboard data for this period.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}
