{% extends "admin/base.html" %}
{% block page_title %}🏆 مدیریت مسابقات{% endblock %}
{% block content %}
<div class="action-bar">
  <div class="search-box">
    <input class="input" type="text" placeholder="جستجوی مسابقه..." id="searchBox" onkeyup="filterTable()">
  </div>
  <select class="input" style="width:200px;font-size:1rem" onchange="location=this.value">
    <option value="">همه بازی‌ها</option>
    {% for g in games %}
    <option value="?game_id={{ g.id }}"{% if request.args.get('game_id')==g.id|string %} selected{% endif %}>{{ g.icon }} {{ g.name }}</option>
    {% endfor %}
  </select>
  <select class="input" style="width:160px;font-size:1rem" onchange="location=this.value">
    <option value="">همه وضعیت‌ها</option>
    <option value="?status=upcoming"{% if request.args.get('status')=='upcoming' %} selected{% endif %}>آینده</option>
    <option value="?status=live"{% if request.args.get('status')=='live' %} selected{% endif %}>زنده</option>
    <option value="?status=finished"{% if request.args.get('status')=='finished' %} selected{% endif %}>پایان‌یافته</option>
    <option value="?status=cancelled"{% if request.args.get('status')=='cancelled' %} selected{% endif %}>لغو شده</option>
  </select>
  <a href="{{ url_for('admin.match_create') }}" class="btn btn-primary" style="box-shadow:var(--shadow-glow)">➕ ساخت مسابقه جدید</a>
</div>

<div class="table-wrap animate-in">
  <table>
    <thead><tr>
      <th>#</th><th>{{ t('match_title') }}</th><th>{{ t('match_game') }}</th><th>{{ t('match_mode') }}</th>
      <th>{{ t('match_start') }}</th><th>{{ t('match_entry_fee') }}</th>
      <th style="text-align:center">{{ t('capacity') }}</th>
      <th>{{ t('match_status') }}</th><th>کد/رمز</th><th>🏆 {{ t('winners')|default('Winners') }}</th><th>{{ t('action') }}</th>
    </tr></thead>
    <tbody>
      {% for m in matches %}
      <tr style="transition:background 0.2s">
        <td style="color:var(--text-muted)">{{ m.id }}</td>
        <td><strong style="font-size:1.05rem">{{ m.title }}</strong></td>
        <td>{{ m.game.icon }} {{ m.game.name }}</td>
        <td>{{ m.mode.name if m.mode else '—' }}</td>
        <td>{{ m.starts_at.strftime('%Y-%m-%d %H:%M') }}</td>
        <td>{{ m.entry_fee }}</td>
        <td style="text-align:center;font-family:'Orbitron';font-size:0.95rem">
          <span style="color:var(--neon);font-weight:700">{{ m.current_players }}</span>
          <span style="color:var(--text-muted)"> : </span>
          <span style="color:var(--text)">{{ m.capacity }}</span>
        </td>
        <td><span class="badge {% if m.status=='upcoming' %}badge-green{% elif m.status=='live' %}badge-red{% elif m.status=='cancelled' %}badge-red{% else %}badge-amber{% endif %}">{{ m.status }}</span></td>
        <td>
          {% if m.credentials_published %}
            <span style="color:var(--primary);font-family:monospace;font-size:0.9rem;text-shadow:0 0 8px var(--primary-glow)">{{ m.room_code }} / {{ m.room_password }}</span>
          {% else %}
            <span style="color:var(--text-muted)">—</span>
          {% endif %}
         </td>
         <td>
          {% set wids = (m.winner_participant_ids | fromjson) if m.winner_participant_ids else [] %}
          {% set winners = m.participants.all() | selectattr('id', 'in', wids) | list %}
          {% if winners %}
            {% for p in winners[:3] %}
            <span style="font-size:0.8rem" title="{{ p.user.display_name if p.user else 'Unknown' }}">{{ p.user.display_name[0]|upper if p.user else '?' }}</span>
            {% endfor %}
            {% if winners|length > 3 %}<span style="font-size:0.75rem;color:var(--text-muted)">+{{ winners|length - 3 }}</span>{% endif %}
          {% else %}
            <span style="color:var(--text-muted)">—</span>
          {% endif %}
        </td>
         <td>
           <div class="flex" style="gap:0.3rem;flex-wrap:wrap">
            <a href="{{ url_for('admin.match_edit', mid=m.id) }}" class="btn btn-outline btn-xs" title="ویرایش">✏️</a>
            <a href="{{ url_for('admin.match_award', mid=m.id) }}" class="btn btn-outline btn-xs" title="توزیع جایزه" style="border-color:var(--neon);color:var(--neon)">🏆</a>
            {% if m.status != 'cancelled' %}
            <a href="{{ url_for('admin.match_cancel', mid=m.id) }}" class="btn btn-danger btn-xs" title="لغو" onclick="return confirm('{{ t('confirm_delete') }}')">🚫</a>
            {% endif %}
            <a href="{{ url_for('admin.match_delete', mid=m.id) }}" class="btn btn-outline btn-xs" title="حذف" style="border-color:var(--danger);color:var(--danger)" onclick="return confirm('آیا مطمئن هستید؟')">🗑️</a>
          </div>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="11" style="text-align:center;color:var(--text-muted);padding:2rem">{{ t('no_data') }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}
{% block scripts %}
<script>
function filterTable(){
  const q=document.getElementById('searchBox').value.toLowerCase();
  document.querySelectorAll('#matchesTable tbody tr').forEach(r=>{
    r.style.display=r.textContent.toLowerCase().includes(q)?'':'none';
  });
}
</script>
{% endblock %}