{% extends "webapp/base.html" %}
{% from "webapp/_game_logo.html" import glogo %}
{% block title %}{{ t('tournaments') | default('Tournaments') }} — {{ t('brand') }}{% endblock %}

{% block content %}
<div class="section" style="padding-top:2rem">

  <!-- Hero Banner -->
  <div class="scroll-reveal">
    <div style="text-align:center;margin-bottom:2.5rem">
      <h1 class="hero-headline" style="font-size:clamp(2rem,6vw,3rem)">
        <span class="line neon-text">{{ t('tournaments') | default('TOURNAMENTS') }}</span>
      </h1>
      <p style="color:var(--text-dim);font-size:1.05rem;margin-top:0.75rem;max-width:700px;margin-left:auto;margin-right:auto">
        {{ t('tournaments_desc') | default('Compete in daily tournaments across all your favorite games. Win prizes, climb leaderboards, and prove your skill.') }}
      </p>
    </div>
  </div>

  <!-- Platform stats strip -->
  <div class="scroll-reveal" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem">
    <div class="card" style="text-align:center;padding:0.9rem">
      <div style="font-family:'Orbitron';font-size:1.3rem;font-weight:800;color:var(--neon)">{{ open_count }}</div>
      <div style="font-size:0.68rem;color:var(--text-dim)">{{ t('active_tournaments') | default('Active Tournaments') }}</div>
    </div>
    <div class="card" style="text-align:center;padding:0.9rem">
      <div style="font-family:'Orbitron';font-size:1.3rem;font-weight:800;color:var(--amber)">${{ open_pool }}</div>
      <div style="font-size:0.68rem;color:var(--text-dim)">{{ t('total_prize_pool') | default('Total Prize Pool') }}</div>
    </div>
    <div class="card" style="text-align:center;padding:0.9rem">
      <div style="font-family:'Orbitron';font-size:1.3rem;font-weight:800;color:var(--purple)">{{ registered_players }}</div>
      <div style="font-size:0.68rem;color:var(--text-dim)">{{ t('registered_players') | default('Registered Players') }}</div>
    </div>
    <a href="{{ url_for('web.results_page') }}" class="card" style="text-align:center;padding:0.9rem;text-decoration:none;color:var(--text);transition:border-color 140ms">
      <div style="font-family:'Orbitron';font-size:1.3rem;font-weight:800;color:var(--text)">🗂️</div>
      <div style="font-size:0.68rem;color:var(--text-dim)">{{ t('results_history') | default('Results History') }} →</div>
    </a>
  </div>

  <!-- Filters -->
  <div class="scroll-reveal" style="margin-bottom:2rem">
    <div style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
      <div style="display:flex;gap:0.5rem;flex-wrap:wrap">
        <button class="btn btn-ghost btn-sm filter-btn {% if not game_filter %}active{% endif %}" data-filter="all">{{ t('all') | default('ALL') }}</button>
        <button class="btn btn-ghost btn-sm filter-btn" data-filter="live">{{ t('live') | default('LIVE') }}</button>
        <button class="btn btn-ghost btn-sm filter-btn" data-filter="upcoming">{{ t('upcoming') | default('UPCOMING') }}</button>
        <button class="btn btn-ghost btn-sm filter-btn" data-filter="free">{{ t('free') | default('FREE') }}</button>
        <button class="btn btn-ghost btn-sm filter-btn" data-filter="prize">{{ t('prize_pool') | default('PRIZE POOL') }}</button>
      </div>
      <div style="margin-left:auto">
        <select class="game-selector" onchange="filterByGame(this.value)">
          <option value="">{{ t('all_games') | default('All Games') }}</option>
          {% for g in games %}
          <option value="{{ g.slug }}" {% if g.slug == game_filter %}selected{% endif %}>
            {{ g.icon if g.icon else '' }} {{ g.name }}
          </option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  <!-- Live Tournaments -->
  {% if live_matches %}
  <section class="scroll-reveal" style="margin-bottom:2.5rem">
    <div class="section-header">
      <h2><span style="color:#ef4444">● LIVE</span> {{ t('live_tournaments') | default('LIVE TOURNAMENTS') }}</h2>
    </div>
    <div class="tournament-grid">
      {% for m in live_matches %}
      <a href="{{ url_for('web.tournament_detail', match_id=m.id) }}" class="tournament-card">
        <div class="tournament-banner">
          {{ glogo(m.game, 'md') }}
          <div class="banner-overlay"></div>
          <div class="banner-meta">
            <span class="live-indicator">{{ t('live') | default('LIVE') }}</span>
            <span class="badge badge-neon">{{ m.game.name if m.game else '—' }}</span>
          </div>
        </div>
        <div class="tournament-content">
          <h3 class="tournament-title">{{ m.title }}</h3>
          <div class="tournament-meta">
            <span class="badge badge-green">{{ m.entry_fee == 0 and t('free') | default('FREE') or '$' ~ m.entry_fee }}</span>
            {% if m.prize_pool > 0 %}
            <span class="badge badge-neon">${{ m.prize_pool }}</span>
            {% endif %}
          </div>
          <div class="tournament-stats">
            <div class="tournament-stat">
              <span class="stat-num">{{ m.current_players }}</span>
              <span class="stat-label">{{ t('players') | default('Players') }}</span>
            </div>
          </div>
          <div class="tournament-action">
            <span class="btn btn-primary btn-sm">{{ t('join_now') | default('JOIN NOW') }} →</span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- Upcoming Tournaments -->
  <section class="scroll-reveal">
    <div class="section-header">
      <h2>{{ t('upcoming_tournaments') | default('UPCOMING TOURNAMENTS') }}</h2>
    </div>
    {% if upcoming_matches %}
    <div class="tournament-grid">
      {% for m in upcoming_matches %}
      <a href="{{ url_for('web.tournament_detail', match_id=m.id) }}" class="tournament-card">
        <div class="tournament-banner">
          {{ glogo(m.game, 'md') }}
          <div class="banner-overlay"></div>
          <div class="banner-meta">
            <span class="badge badge-amber">{{ t('upcoming') | default('UPCOMING') }}</span>
            <span class="badge badge-neon">{{ m.game.name if m.game else '—' }}</span>
          </div>
        </div>
        <div class="tournament-content">
          <h3 class="tournament-title">{{ m.title }}</h3>
          <div class="tournament-meta">
            <span class="badge {% if m.entry_fee == 0 %}badge-green{% else %}badge-amber{% endif %}">{{ m.entry_fee == 0 and t('free') | default('FREE') or '$' ~ m.entry_fee }}</span>
            {% if m.prize_pool > 0 %}
            <span class="badge badge-neon">${{ m.prize_pool }}</span>
            {% endif %}
            {% if m.registration_not_yet_open %}
            <span class="badge badge-amber" title="{{ m.registration_opens_at.strftime('%Y-%m-%d 00:00') if m.registration_opens_at else '' }}">🕐 {{ t('reg_not_open_yet') | default('Registration Not Open Yet') }}</span>
            {% elif m.registration_closed %}
            <span class="badge badge-orange">🔒 {{ t('reg_closed') | default('Registration Closed') }}</span>
            {% endif %}
          </div>
          <div class="tournament-stats">
            <div class="tournament-stat">
              <span class="stat-num">{{ m.current_players }}</span>
              <span class="stat-label">{{ t('players') | default('Players') }}</span>
            </div>
            {% if m.starts_at %}
            <div class="tournament-stat">
              <span class="countdown-timer" data-target="{{ m.starts_at.strftime('%Y-%m-%dT%H:%M:%S') }}">00:00</span>
              <span class="stat-label">{{ t('starts_in') | default('Starts In') }}</span>
            </div>
            {% endif %}
          </div>
          <div class="tournament-action">
            <span class="btn btn-outline btn-sm">{{ t('view') | default('VIEW') }}</span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
      <div class="empty-icon">🏆</div>
      <h3 class="empty-title">{{ t('no_tournaments') | default('No Tournaments Found') }}</h3>
      <p class="empty-desc">{{ t('no_tournaments_desc') | default('Try changing your filters.') }}</p>
    </div>
    {% endif %}
  </section>

  <!-- ── 🏆 RESULTS — winners announced by admin ───────────────────── -->
  {% if finished_results %}
  <section class="scroll-reveal" style="margin-top:2.5rem">
    <div class="section-header">
      <h2>🏆 {{ t('results_winners') | default('RESULTS — WINNERS') }}</h2>
    </div>
    <div class="tournament-grid">
      {% for r in finished_results %}
      {% set m = r.match %}
      <a href="{{ url_for('web.tournament_detail', match_id=m.id) }}" class="tournament-card tournament-finished">
        <div class="tournament-banner">
          {{ glogo(m.game, 'md') }}
          <div class="banner-overlay"></div>
          <div class="banner-meta">
            <span class="badge badge-green">✓ {{ t('finished') | default('FINISHED') }}</span>
            <span class="badge badge-neon">{{ m.game.name if m.game else '—' }}</span>
          </div>
        </div>
        <div class="tournament-content">
          <h3 class="tournament-title">{{ m.title }}</h3>
          <div class="results-winners">
            {% for w in r.winners %}
            <div class="result-winner">
              <span class="rw-medal">{% if loop.index0 == 0 %}🥇{% elif loop.index0 == 1 %}🥈{% else %}🥉{% endif %}</span>
              <span class="rw-avatar">{{ (w.display_name[0]|upper) if w.display_name else '?' }}</span>
              <a href="{{ url_for('web.player_profile', numeric_id=w.numeric_id) if w.numeric_id is not none else '#' }}" class="rw-name" style="text-decoration:none">{{ w.display_name }}</a>
            </div>
            {% endfor %}
          </div>
          <div class="tournament-meta">
            {% if m.prize_pool > 0 %}
            <span class="badge badge-neon">${{ m.prize_pool }}</span>
            {% endif %}
            <span class="badge badge-amber">{{ t('winners_announced') | default('Winners Announced') }}</span>
          </div>
          <div class="tournament-action">
            <span class="btn btn-outline btn-sm">{{ t('view_results') | default('VIEW RESULTS') }} →</span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>

{% block scripts %}
<script>
  (function() {
    const els = document.querySelectorAll('.countdown-timer[data-target]');
    if (els.length === 0) return;
    const update = () => {
      els.forEach(el => {
        const target = new Date(el.dataset.target).getTime();
        const now = Date.now();
        const diff = target - now;
        if (diff <= 0) { el.textContent = '00:00:00'; return; }
        const h = Math.floor(diff / 3600000);
        const m = Math.floor((diff % 3600000) / 60000);
        const s = Math.floor((diff % 60000) / 1000);
        el.textContent = String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');
      });
    };
    update();
    setInterval(update, 1000);
  })();

  function filterByGame(slug) {
    if (slug) {
      window.location.href = '/tournaments?game=' + slug;
    }
  }
</script>
{% endblock %}

{% endblock %}