{% extends 'admin/layout.html.twig' %}
{% block page_title %}Clés de badge{% endblock %}
{% block breadcrumb %}
  <span class="sep">/</span><span class="breadcrumb-text">Clés de badge</span>
{% endblock %}
{% block header_action %}{% endblock %}

{% block content %}
<style>
  .key-chip {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
  }
  .key-available { background: rgba(63,185,80,.15);  color: #3fb950; }
  .key-used      { background: rgba(120,120,120,.12); color: #888; }
  .stat-box {
    display: inline-flex; flex-direction: column; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 28px; gap: 4px; min-width: 110px;
  }
  .stat-box .stat-val { font-size: 1.6rem; font-weight: 700; }
  .stat-box .stat-lbl { font-size: .78rem; color: var(--muted); }
  .gen-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 28px; }
  .gen-form label { font-size: .82rem; color: var(--muted); display: block; margin-bottom: 4px; }
</style>

{% set total     = keys|length %}
{% set used      = keys|filter(k => k.redeemed)|length %}
{% set available = total - used %}

{# ── Flash ── #}
{% for msg in app.flashes('success') %}
  <div style="background:rgba(63,185,80,.12);border:1px solid #3fb950;border-radius:6px;padding:10px 14px;margin-bottom:16px;color:#3fb950;font-size:.88rem">{{ msg }}</div>
{% endfor %}
{% for msg in app.flashes('error') %}
  <div style="background:rgba(248,81,73,.1);border:1px solid #f85149;border-radius:6px;padding:10px 14px;margin-bottom:16px;color:#f85149;font-size:.88rem">{{ msg }}</div>
{% endfor %}

{# ── Stats ── #}
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px">
  <div class="stat-box"><span class="stat-val">{{ total }}</span><span class="stat-lbl">Total</span></div>
  <div class="stat-box"><span class="stat-val" style="color:#3fb950">{{ available }}</span><span class="stat-lbl">Disponibles</span></div>
  <div class="stat-box"><span class="stat-val" style="color:#888">{{ used }}</span><span class="stat-lbl">Utilisées</span></div>
</div>

{# ── Formulaire de génération ── #}
<div style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:32px">
  <h3 style="margin:0 0 16px;font-size:.95rem">Générer un nouveau lot</h3>
  <form method="post" action="{{ path('admin_badge_keys_generate') }}" class="gen-form">
    <div>
      <label for="gen-badge">Badge</label>
      <select id="gen-badge" name="badge_id" style="min-width:220px">
        {% for badge in badges %}
          <option value="{{ badge.id }}">{{ badge.displayName }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="gen-qty">Quantité (max 500)</label>
      <input type="number" id="gen-qty" name="quantity" value="50" min="1" max="500" style="width:90px">
    </div>
    <button type="submit" class="btn btn-primary btn-sm">Générer</button>
  </form>
</div>

{# ── Tableau ── #}
{% if keys is empty %}
  <p style="color:var(--muted)">Aucune clé générée.</p>
{% else %}
<table class="data-table">
  <thead>
    <tr>
      <th>Code</th>
      <th>Badge</th>
      <th>Statut</th>
      <th>Utilisée par</th>
      <th>Date utilisation</th>
    </tr>
  </thead>
  <tbody>
    {% for key in keys %}
    <tr>
      <td><code style="font-size:.85rem;letter-spacing:.05em">{{ key.code }}</code></td>
      <td>{{ key.badge.displayName }}</td>
      <td>
        {% if key.redeemed %}
          <span class="key-chip key-used">Utilisée</span>
        {% else %}
          <span class="key-chip key-available">Disponible</span>
        {% endif %}
      </td>
      <td>
        {% if key.redeemedBy %}
          <a href="{{ path('player_profile', {username: key.redeemedBy.username}) }}" style="color:var(--accent)">{{ key.redeemedBy.username }}</a>
        {% else %}
          <span style="color:var(--muted)">—</span>
        {% endif %}
      </td>
      <td style="color:var(--muted);font-size:.85rem">
        {{ key.redeemedAt ? key.redeemedAt|date('d/m/Y H:i') : '—' }}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% endblock %}