{% extends 'base.html.twig' %}

{% block player_nav %}{% endblock %}

{% block title %}Admin — {% block page_title %}{% endblock %}{% endblock %}

{% block stylesheets %}
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg:      #0d1117;
    --surface: #161b22;
    --border:  #30363d;
    --text:    #c9d1d9;
    --muted:   #8b949e;
    --accent:  #f0883e;
    --accent2: #58a6ff;
    --danger:  #f85149;
    --success: #3fb950;

    --pv: #e05252; --eg: #5299e0; --atq: #e08a52; --def: #52e062;
    --arc: #9952e0; --sag: #52d4e0; --vit: #e0d452; --fin: #e052a8;
  }

  body { background: var(--bg) url("{{ asset('images/BackgroundSpace.png') }}") center center / cover fixed; color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; min-height: 100vh; }

  .page { display: flex; flex-direction: column; flex: 1; }

  /* ── Admin breadcrumb bar ── */
  .admin-bar {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px 24px; display: flex; align-items: center; gap: 6px;
    font-size: .85rem; flex-shrink: 0;
  }
  .admin-home { font-weight: 700; color: var(--accent); text-decoration: none; font-size: .88rem; }
  .admin-home:hover { opacity: .8; }
  .sep { color: var(--border); }
  .breadcrumb-link { color: var(--accent2); text-decoration: none; font-size: .85rem; }
  .breadcrumb-link:hover { text-decoration: underline; }
  .breadcrumb-text { color: var(--muted); font-size: .85rem; }
  .admin-bar-action { margin-left: auto; }

  main { flex: 1; padding: 24px; max-width: 1100px; margin: 0 auto; width: 100%; }

  /* ── Buttons ── */
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 18px; border-radius: 6px; font-size: .85rem; font-weight: 600;
    cursor: pointer; border: none; text-decoration: none; transition: opacity .15s;
    white-space: nowrap;
  }
  .btn:hover { opacity: .85; }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-cancel  { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
  .btn-sm { padding: 4px 12px; font-size: .78rem; }
  .btn-edit   { background: #1f2d40; color: var(--accent2); border: 1px solid #2d4060; }
  .btn-delete { background: #2d1515; color: var(--danger); border: 1px solid #4a2020; }

  /* ── Table ── */
  table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  thead tr { background: #0d1117; }
  th { padding: 9px 14px; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
  td { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: .85rem; vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: rgba(255,255,255,.02); }
  .tab-bar { display: flex; gap: 4px; margin-bottom: 10px; }
  .tab-btn {
    padding: 5px 16px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--muted); font-size: .8rem; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
  }
  .tab-btn:hover { color: var(--text); border-color: var(--muted); }
  .tab-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(240,136,62,.08); font-weight: 600; }
  .actions { display: flex; gap: 6px; }
  .check { color: var(--success); }
  .dash  { color: var(--border); }

  /* ── Sortable headers ── */
  th[data-sort] { cursor: pointer; user-select: none; }
  th[data-sort]:hover { color: var(--text); }
  th[data-sort]::after { content: ' ⇅'; opacity: .3; font-size: .8em; }
  th[data-sort].sort-asc::after  { content: ' ▲'; opacity: 1; color: var(--accent); }
  th[data-sort].sort-desc::after { content: ' ▼'; opacity: 1; color: var(--accent); }

  /* ── Badges ── */
  .badge { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
  .badge-game { background: #1a2010; color: #8bc34a; border: 1px solid #2a4018; }
  .badge-type   { background: #1f2d40; color: var(--accent2); border: 1px solid #2d4060; }
  .badge-rarity { background: #1e1a2e; }

  .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .toolbar-count { color: var(--muted); font-size: .85rem; }
  .empty { text-align: center; color: var(--muted); padding: 48px 0; }
  .empty a { color: var(--accent); text-decoration: none; }

  /* ── Form sections ── */
  .section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 16px;
  }
  .section-title {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }

  /* ── Grids ── */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
  .col-span-2 { grid-column: span 2; }
  .col-span-3 { grid-column: span 3; }
  .col-span-full { grid-column: 1 / -1; }

  /* ── Fields ── */
  .field { display: flex; flex-direction: column; gap: 4px; }
  .field-hint { font-size: .72rem; min-height: 14px; font-weight: 600; }
  .hint-pos  { color: var(--success); }
  .hint-neg  { color: var(--danger); }
  .hint-zero { color: var(--muted); }

  label.field-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  label.field-label.label-pv  { color: var(--pv); }
  label.field-label.label-eg  { color: var(--eg); }
  label.field-label.label-atq { color: var(--atq); }
  label.field-label.label-def { color: var(--def); }
  label.field-label.label-arc { color: var(--arc); }
  label.field-label.label-sag { color: var(--sag); }
  label.field-label.label-vit { color: var(--vit); }
  label.field-label.label-fin { color: var(--fin); }

  input[type="text"], input[type="number"], select, textarea {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 7px 11px; color: var(--text); font-size: .88rem; outline: none;
    transition: border-color .15s; width: 100%; font-family: inherit;
  }
  input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus { border-color: var(--accent2); }
  textarea { resize: vertical; min-height: 70px; }
  select option { background: #1a1f27; }

  /* ── Checkboxes ── */
  .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .checkbox-item {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: .85rem; color: var(--text); user-select: none;
  }
  .checkbox-item input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

  /* ── Status array rows ── */
  .status-array-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .status-array-row select { flex: 1; min-width: 0; width: auto; }
  .status-array-row select.stats-array-stat { flex: 0 0 auto; width: 110px; }
  .status-array-row .status-array-prob { width: 72px; flex-shrink: 0; }
  .status-array-row .stats-array-value { width: 80px; flex-shrink: 0; }
  .status-array-row .stats-array-turns { width: 64px; flex-shrink: 0; }
  .status-array-row .stats-array-level { width: 56px; flex-shrink: 0; }
  .status-array-row .elemental-multiplier { width: 80px; flex-shrink: 0; }
  .status-array-pct { color: var(--muted); font-size: .85rem; flex-shrink: 0; }

  /* ── Form actions ── */
  .form-actions { display: flex; gap: 10px; margin-top: 24px; }
</style>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  const GAME_LABELS = {0: 'CSI Forever', 1: 'CSII Forever', 2: 'CSI Rogue', 3: 'Narval Souls'};
  // ── Game filter for status/skill selects in forms ──────────────────
  var gameSelect = document.querySelector('select[name="gameId"]');
  if (gameSelect) {
    function filterByGame(gameId) {
      document.querySelectorAll('select').forEach(function (sel) {
        var opts = sel.querySelectorAll('option[data-game]');
        if (!opts.length) return;
        opts.forEach(function (opt) {
          opt.hidden = gameId !== '' && opt.dataset.game !== String(gameId);
        });
        if (sel.value && sel.options[sel.selectedIndex] && sel.options[sel.selectedIndex].hidden) {
          sel.value = '';
        }
      });
    }
    filterByGame(gameSelect.value);
    gameSelect.addEventListener('change', function () { filterByGame(this.value); });
    // Re-filter after a new row is dynamically added
    document.addEventListener('click', function (e) {
      if (e.target.closest('.js-status-row-add')) {
        setTimeout(function () { filterByGame(gameSelect.value); }, 0);
      }
    });
  }

  // ── Column sorting ────────────────────────────────────────────────────
  document.querySelectorAll('table').forEach(function (table) {
    var ths = table.querySelectorAll('th[data-sort]');
    if (!ths.length) return;
    ths.forEach(function (th, thIdx) {
      th.addEventListener('click', function () {
        var asc = !th.classList.contains('sort-asc');
        table.querySelectorAll('th[data-sort]').forEach(function (h) { h.classList.remove('sort-asc', 'sort-desc'); });
        th.classList.add(asc ? 'sort-asc' : 'sort-desc');
        var tbody = table.querySelector('tbody');
        var rows = Array.from(tbody.querySelectorAll('tr'));
        var numeric = th.dataset.sortType === 'num';
        // find the actual cell index of this th
        var cellIdx = Array.from(th.parentNode.children).indexOf(th);
        rows.sort(function (a, b) {
          var av = (a.cells[cellIdx] ? a.cells[cellIdx].textContent.trim() : '');
          var bv = (b.cells[cellIdx] ? b.cells[cellIdx].textContent.trim() : '');
          if (numeric) return asc ? (parseInt(av) - parseInt(bv)) : (parseInt(bv) - parseInt(av));
          return asc ? av.localeCompare(bv, 'fr') : bv.localeCompare(av, 'fr');
        });
        rows.forEach(function (r) { tbody.appendChild(r); });
      });
    });
  });

  // ── Game tabs ─────────────────────────────────────────────────────────
  document.querySelectorAll('table').forEach(function (table) {
    var rows = Array.from(table.querySelectorAll('tbody tr[data-game]'));
    if (!rows.length) return;
    var games = [...new Set(rows.map(function (r) { return r.dataset.game; }))].sort();
    if (games.length <= 1) return;
    var bar = document.createElement('div');
    bar.className = 'tab-bar';
    function makeTab(label, game) {
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'tab-btn' + (game === null ? ' active' : '');
      btn.textContent = label;
      btn.addEventListener('click', function () {
        bar.querySelectorAll('.tab-btn').forEach(function (b) { b.classList.remove('active'); });
        btn.classList.add('active');
        rows.forEach(function (r) {
          r.style.display = (game === null || r.dataset.game === game) ? '' : 'none';
        });
      });
      return btn;
    }
    bar.appendChild(makeTab('Tous', null));
    games.forEach(function (g) { bar.appendChild(makeTab(GAME_LABELS[g] ?? 'Jeu ' + g, g)); });
    table.parentNode.insertBefore(bar, table);
  });
});
</script>
{% endblock %}

{% block body %}
<div class="page">
  <div class="admin-bar">
    <a href="{{ path('admin_index') }}" class="admin-home">Admin</a>
    {% block breadcrumb %}{% endblock %}
    <div class="admin-bar-action" style="display:flex;align-items:center;gap:12px;">
      {% block header_action %}{% endblock %}
      <a href="{{ path('admin_logout') }}" style="font-size:.78rem;color:var(--muted);text-decoration:none;opacity:.7;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.7">Déconnexion</a>
    </div>
  </div>

  {# ── Barre de navigation secondaire ── #}
  {% set cur = app.request.attributes.get('_route') %}
  <nav style="background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;gap:2px;overflow-x:auto;flex-shrink:0">
    {% set navItems = [
      {route: 'admin_index',        label: 'Accueil',    prefix: 'admin_index'},
      {route: 'admin_players',      label: 'Joueurs',    prefix: 'admin_player'},
      {route: 'admin_goodie_orders',label: 'Commandes',  prefix: 'admin_goodie_order'},
      {route: 'admin_badge_keys',   label: 'Clés badge', prefix: 'admin_badge_key'},
      {route: 'admin_csiwo_index',  label: 'CSIWO',      prefix: 'admin_csiwo'},
    ] %}
    {% for item in navItems %}
      {% set active = cur starts with item.prefix %}
      <a href="{{ path(item.route) }}"
         style="display:inline-block;padding:9px 14px;font-size:.8rem;font-weight:600;text-decoration:none;border-bottom:2px solid {{ active ? 'var(--accent)' : 'transparent' }};color:{{ active ? 'var(--accent)' : 'var(--muted)' }};white-space:nowrap;transition:color .12s">
        {{ item.label }}
      </a>
    {% endfor %}
  </nav>

  <main>
    {% block content %}{% endblock %}
  </main>
</div>
{% endblock %}