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

{% block title %}CSI World — Personnages{% endblock %}

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

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

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

  /* ── Search panel ── */
  .search-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .search-row { display: flex; gap: 10px; }

  .search-row input[type="text"] {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--text);
    font-size: .95rem;
    outline: none;
    transition: border-color .15s;
  }
  .search-row input[type="text"]:focus { border-color: var(--accent2); }
  .search-row input[type="text"]::placeholder { color: var(--muted); }

  .search-row button {
    padding: 8px 22px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
  }
  .search-row button:hover { opacity: .85; }

  .filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .filter-row select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text);
    font-size: .85rem;
    outline: none;
    transition: border-color .15s;
    min-width: 140px;
  }
  .filter-row select:focus { border-color: var(--accent2); }

  /* ── Results ── */
  .results-header {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 14px;
    padding-left: 2px;
  }
  .results-header strong { color: var(--text); }

  .results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }

  .no-results {
    text-align: center;
    color: var(--muted);
    padding: 48px 0;
    font-size: 1rem;
  }

  /* ── Portrait cards ── */
  .char-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color .15s, transform .1s;
  }
  .char-card:hover { border-color: var(--accent); transform: translateY(-2px); }

  .char-portrait {
    width: 100%; aspect-ratio: 3/3; overflow: hidden;
    background: var(--bg); display: flex; align-items: center; justify-content: center;
  }
  .char-portrait img { width: 100%; height: 100%; object-fit: cover; }
  .char-portrait-ph { font-size: 3rem; color: var(--border); }

  .char-info {
    padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1;
  }
  .char-name { font-size: .95rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .char-subtitle { font-size: .78rem; color: var(--muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .char-roles { display: flex; flex-wrap: wrap; gap: 4px; }
  .char-game { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; }

  .badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .badge-type { background: #1f2d40; color: var(--accent2); border: 1px solid #2d4060; }
  .badge-type.role-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; }
  .badge-type .role-icon { width: 24px; height: 24px; image-rendering: pixelated; flex-shrink: 0; }

  /* ── Element badges sur les cartes (mêmes règles que la fiche perso) ── */
  .badge-element-typed {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    color: #fff; font-weight: 600; font-size: .68rem;
    text-shadow:
      -1px -1px 0 rgba(0,0,0,.5),
       1px -1px 0 rgba(0,0,0,.5),
      -1px  1px 0 rgba(0,0,0,.5),
       1px  1px 0 rgba(0,0,0,.5);
    border: 1px solid rgba(0,0,0,.18);
    text-transform: uppercase; letter-spacing: .03em;
  }
  .badge-element-typed.no-color { background: var(--surface); color: var(--text); text-shadow: none; border-color: var(--border); }
  .badge-element-typed img { width: 24px; height: 24px; image-rendering: pixelated; flex-shrink: 0; }

  .char-elements { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; }
  .char-elements .badge-element-typed { flex-shrink: 0; white-space: nowrap; }

  .game-logo { height: 18px; width: auto; object-fit: contain; opacity: .85; }
</style>
{% endblock %}

{% block body %}
<div class="page">
  <main>
    <form method="get" action="{{ path('characters_index') }}" class="search-panel">
      <div class="search-row">
        <input type="text" name="name" value="{{ name }}" placeholder="Rechercher un personnage…" autofocus>
        <button type="submit">Rechercher</button>
      </div>
      <div class="filter-row">
        <select name="role">
          <option value="">Tous les rôles</option>
          {% for role in roles %}
            <option value="{{ role.id }}" {{ roleId == role.id ? 'selected' }}>{{ role.name }}</option>
          {% endfor %}
        </select>
        {% if gameIds %}
          <select name="game" id="filterGame">
            {% for gid in gameIds %}
              <option value="{{ gid }}" {{ gameId == gid ? 'selected' }}>{{ ('game.id.' ~ gid)|trans({}, 'game') }}</option>
            {% endfor %}
          </select>
        {% endif %}
        {% if elements %}
          <select name="element" id="filterElement">
            <option value="">Tous les éléments</option>
            {% for el in elements %}
              <option value="{{ el.id }}" data-game="{{ el.gameId }}" {{ elementId == el.id ? 'selected' }}>{{ el.name }}</option>
            {% endfor %}
          </select>
        {% endif %}
      </div>
    </form>

    {% if submitted %}
      <div class="results-header">
        {% if results is not empty %}
          <strong>{{ results|length }}</strong> résultat{{ results|length > 1 ? 's' }}{% if name %} pour "<strong>{{ name }}</strong>"{% endif %}
        {% else %}
          Aucun résultat{% if name %} pour "<strong>{{ name }}</strong>"{% endif %}
        {% endif %}
      </div>
    {% endif %}

    {% if results is not empty %}
    <div class="results-grid">
      {% for character in results %}
      <a href="{{ path('character_show', {id: character.id}) }}" class="char-card">
        <div class="char-portrait">
          {% if character.appearance %}
            <img src="{{ asset(character.appearance) }}" alt="{{ character.name }}">
          {% else %}
            <span class="char-portrait-ph">✦</span>
          {% endif %}
        </div>
        <div class="char-info">
          <div class="char-name">{{ character.name }}</div>
          {% if character.title %}
            <div class="char-subtitle">{{ character.title }}</div>
          {% endif %}
          {% if character.roles %}
            <div class="char-roles">
              {% for rid in character.roles %}
                {% set r = roleMap[rid] ?? null %}
                {% if r %}
                  <span class="badge badge-type role-badge">
                    {% if r.iconUrl %}<img src="{{ r.iconUrl }}" class="role-icon" alt="">{% endif %}
                    {{ r.name }}
                  </span>
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          {% if character.gameId != 0 and character.elementalTypes %}
            <div class="char-elements">
              {% for eid in character.elementalTypes %}
                {% set e = elementMap[eid] ?? null %}
                {% if e %}
                  <span class="badge-element-typed {{ e.color ? '' : 'no-color' }}" {% if e.color %}style="background:{{ e.color }};"{% endif %}>
                    {% if e.iconUrl %}<img src="{{ e.iconUrl }}" alt="">{% endif %}
                    {{ e.name }}
                  </span>
                {% endif %}
              {% endfor %}
            </div>
          {% endif %}
          <div class="char-game">
            <img src="{{ path('game_logo', {gameId: character.gameId}) }}" class="game-logo" alt="">
            {{ ('game.id.' ~ character.gameId)|trans({}, 'game') }}
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
    {% elseif submitted %}
      <p class="no-results">Aucun résultat{% if name %} pour "{{ name }}"{% endif %}</p>
    {% endif %}
  </main>
</div>

<script>
(function () {
  const gameSel = document.getElementById('filterGame');
  const elemSel = document.getElementById('filterElement');
  if (!gameSel || !elemSel) return;

  function syncElementFilter(resetSelection) {
    const gid = gameSel.value;
    // Cache si pas de jeu choisi, ou si CSI Forever (gameId=0 : pas de types élémentaux)
    elemSel.style.display = (gid === '' || gid === '0') ? 'none' : '';
    // Filtre les options selon le jeu
    let selectionStillVisible = false;
    Array.from(elemSel.options).forEach(opt => {
      if (!opt.dataset.game) return; // "Tous les éléments"
      const matches = opt.dataset.game === gid;
      opt.hidden = !matches;
      opt.disabled = !matches;
      if (matches && opt.value === elemSel.value) selectionStillVisible = true;
    });
    if (resetSelection && !selectionStillVisible) elemSel.value = '';
  }

  gameSel.addEventListener('change', () => syncElementFilter(true));
  syncElementFilter(false);
})();
</script>
{% endblock %}