{% extends "webapp/base.html" %}
{% from "webapp/_lb_macros.html" import lb_tabs, lb_table, lb_script with context %}
{% block title %}{{ t('leaderboard') }} — FIGHTSKILL{% endblock %}
{% block content %}
<div class="section" style="padding-top:2.5rem;max-width:1280px;margin:0 auto">

  <!-- Header -->
  <div class="scroll-reveal" style="margin-bottom:2rem;text-align:center">
    <h1 class="hero-headline" style="font-size:clamp(1.8rem,4vw,2.5rem)">
      <span class="line neon-text">{{ t('leaderboard') | default('LEADERBOARD') }}</span>
    </h1>
    <p style="color:var(--text-dim);margin-top:0.5rem;font-size:0.95rem">
      {{ t('leaderboard_subtitle') | default('Climb the ranks across all regions.') }}
    </p>
  </div>

  <!-- Game Tabs -->
  <div class="scroll-reveal" style="margin-bottom:1.5rem">
    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center">
      {% for g in games %}
      <a href="{{ url_for('web.leaderboard', game_id=g.id) }}" class="btn btn-sm {% if g.id == game.id %}btn-primary{% else %}btn-ghost{% endif %}">
        {{ g.icon if g.icon else '' }} {{ g.name }}
      </a>
      {% endfor %}
    </div>
  </div>

  <!-- Leaderboard Container: three time windows, instant tab switching -->
  <div class="scroll-reveal">
    <div class="leaderboard-container" data-lb-group>
      {{ lb_tabs(active='global') }}

      <!-- ── GLOBAL (all-time) ── -->
      <div class="lb-panel active" id="lb-panel-global" role="tabpanel">
        {{ lb_table(entries, me_id=user.id, hint=t('lb_hint_global') | default('All-time points from every finished match')) }}
      </div>

      <!-- ── WEEKLY (last 7 days) ── -->
      <div class="lb-panel" id="lb-panel-weekly" role="tabpanel">
        {{ lb_table(weekly_entries, me_id=user.id, hint=t('lb_hint_week') | default('Points earned in the last 7 days')) }}
      </div>

      <!-- ── MONTHLY (last 30 days) ── -->
      <div class="lb-panel" id="lb-panel-monthly" role="tabpanel">
        {{ lb_table(monthly_entries, me_id=user.id, hint=t('lb_hint_month') | default('Points earned in the last 30 days')) }}
      </div>
    </div>
  </div>

  <!-- Points rules card -->
  <div class="scroll-reveal" style="display:flex;gap:0.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.25rem">
    <span class="lb-rule-chip">🏆 {{ t('lb_rule_win') | default('Win a match: +100 pts') }}</span>
    <span class="lb-rule-chip">🎯 {{ t('lb_rule_play') | default('Play a match: +20 pts') }}</span>
    <span class="lb-rule-chip">🕒 {{ t('lb_rule_reset') | default('Weekly & monthly windows reset automatically') }}</span>
  </div>
</div>

{{ lb_script() }}
{% endblock %}