{# ══════════════════════════════════════════════════════════════════
   Shared leaderboard macros: period tabs + one window table.
   All three windows (global / weekly / monthly) are rendered
   server-side and toggled client-side → instant, zero loading.
   Import with context:  {% from "webapp/_lb_macros.html" import ... with context %}
   ══════════════════════════════════════════════════════════════════ #}

{% macro lb_tabs(active='global') %}
<div class="leaderboard-tabs" role="tablist" aria-label="{{ t('leaderboard') | default('Leaderboard') }}">
  <button type="button" class="leaderboard-tab {% if active == 'global' %}active{% endif %}"
          data-lb-panel="lb-panel-global" role="tab" aria-selected="{{ 'true' if active == 'global' else 'false' }}">
    {{ t('global') | default('GLOBAL') }}
  </button>
  <button type="button" class="leaderboard-tab {% if active == 'weekly' %}active{% endif %}"
          data-lb-panel="lb-panel-weekly" role="tab" aria-selected="false">
    {{ t('weekly') | default('WEEKLY') }} <span class="lb-window-chip">7D</span>
  </button>
  <button type="button" class="leaderboard-tab {% if active == 'monthly' %}active{% endif %}"
          data-lb-panel="lb-panel-monthly" role="tab" aria-selected="false">
    {{ t('monthly') | default('MONTHLY') }} <span class="lb-window-chip">30D</span>
  </button>
</div>
{% endmacro %}

{% macro lb_table(rows, me_id=None, hint='') %}
{% if rows %}
  {% if hint %}<div class="lb-hint">{{ hint }}</div>{% endif %}
  <div style="overflow-x:auto">
    <table class="leaderboard-table">
      <thead>
        <tr>
          <th>{{ t('rank') | default('RANK') }}</th>
          <th>{{ t('player') | default('PLAYER') }}</th>
          <th>{{ t('wins') | default('WINS') }}</th>
          <th>{{ t('points') | default('POINTS') }}</th>
          <th>{{ t('win_rate') | default('WIN RATE') }}</th>
          <th>{{ t('prize') | default('PRIZE') }}</th>
        </tr>
      </thead>
      <tbody>
        {% for e in rows %}
        {% set is_me = me_id is not none and e.user_id == me_id %}
        <tr class="leaderboard-row {% if loop.index0 < 3 %}top3{% endif %} {% if is_me %}me{% endif %}">
          <td class="rank {% if loop.index0 == 0 %}rank-1{% elif loop.index0 == 1 %}rank-2{% elif loop.index0 == 2 %}rank-3{% else %}rank-neon{% endif %}">
            {% if loop.index0 == 0 %}🥇{% elif loop.index0 == 1 %}🥈{% elif loop.index0 == 2 %}🥉{% else %}{{ loop.index0 + 1 }}{% endif %}
          </td>
          <td>
            <div style="display:flex;align-items:center;gap:0.75rem">
              <div style="width:28px;height:28px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--neon),var(--purple));display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700">
                {{ (e.user.display_name[0]|upper) if e.user and e.user.display_name else '?' }}
              </div>
              <div style="min-width:0">
                <div style="display:flex;align-items:center;gap:0.4rem">
                  {% if e.user and e.user.numeric_id is not none %}
                  <a href="{{ url_for('web.player_profile', numeric_id=e.user.numeric_id) }}" style="font-weight:500;color:var(--text);text-decoration:none" onmouseover="this.style.color='var(--neon)'" onmouseout="this.style.color='var(--text)'">{{ e.user.display_name }}</a>
                  {% else %}
                  <span style="font-weight:500">{{ 'Player #' ~ e.user_id }}</span>
                  {% endif %}
                  {% if is_me %}<span class="lb-you-badge">{{ t('you') | default('YOU') }}</span>{% endif %}
                </div>
                <div class="lb-player-sub">🎮 {{ e.matches }} {{ t('lb_match_one') if e.matches == 1 else t('lb_match_many') }} · 🏆 {{ e.wins }} {{ t('lb_win_one') if e.wins == 1 else t('lb_win_many') }}</div>
              </div>
            </div>
          </td>
          <td style="color:var(--neon);font-weight:600">{{ e.wins }}</td>
          <td style="font-family:'Orbitron',sans-serif;font-weight:700">{{ e.points }}</td>
          <td>{{ e.win_rate }}%</td>
          <td style="color:var(--amber)">${{ '%.2f' | format(e.prize) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  <div class="empty-state">
    <div class="empty-icon">📊</div>
    <h3 class="empty-title">{{ t('no_data') | default('No data available') }}</h3>
    <p class="empty-desc">{{ hint if hint else (t('no_leaderboard_data') | default('Leaderboard data is not available yet.')) }}</p>
  </div>
{% endif %}
{% endmacro %}

{% macro lb_script() %}
<script>
(function () {
  var containers = document.querySelectorAll('[data-lb-group]');
  containers.forEach(function (group) {
    var tabs = group.querySelectorAll('.leaderboard-tab');
    var scope = group.closest('.leaderboard-container') || document;
    tabs.forEach(function (tab) {
      tab.addEventListener('click', function () {
        tabs.forEach(function (t2) { t2.classList.remove('active'); t2.setAttribute('aria-selected', 'false'); });
        tab.classList.add('active');
        tab.setAttribute('aria-selected', 'true');
        scope.querySelectorAll('.lb-panel').forEach(function (p) { p.classList.remove('active'); });
        var panel = scope.querySelector('#' + tab.getAttribute('data-lb-panel'));
        if (panel) { panel.classList.add('active'); }
      });
    });
  });
})();
</script>
{% endmacro %}