{% extends 'base.html.twig' %}
{% from 'entity/layout.html.twig' import icon_img %}

{% block title %}Mes favoris — CSI World{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <style>
    .favs-page { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
    .favs-page h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; color: var(--accent); }
    .favs-section { margin-bottom: 32px; }
    .favs-section-title {
      font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
      color: var(--text); margin-bottom: 10px; padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: baseline; gap: 8px;
    }
    .favs-count { color: var(--muted); font-size: .8rem; font-weight: 500; }
    .favs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
    .fav-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
      padding: 10px 12px; display: flex; align-items: center; gap: 12px;
      text-decoration: none; color: var(--text); transition: all .15s;
    }
    .fav-card:hover { border-color: var(--accent); background: rgba(240,136,62,.06); }
    .fav-card-icon-wrap {
      width: 48px; height: 48px; flex-shrink: 0;
      background: var(--bg); border-radius: 4px; border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .fav-card-icon-wrap img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
    .fav-card-icon-wrap .detail-icon,
    .fav-card-icon-wrap .detail-icon-placeholder { width: 40px !important; height: 40px !important; }
    .fav-card-icon-wrap .detail-icon-placeholder { display: flex; align-items: center; justify-content: center; color: var(--border); font-size: 20px; }
    .fav-card-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
    .fav-card-name { font-size: .92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fav-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
    .fav-badge {
      display: inline-block; padding: 1px 7px; border-radius: 10px;
      font-size: .68rem; font-weight: 600; letter-spacing: .02em;
      background: #1f2d40; color: var(--accent2); border: 1px solid #2d4060;
      white-space: nowrap;
    }
    .fav-badge.cat  { background: #1f2d26; color: #3fb950; border-color: #2a4a34; }
    .fav-badge.boss { background: #2d1f1f; color: #e05252; border-color: #4a2d2d; }
    .fav-badge.superboss { background: #2d1a2d; color: #c952e0; border-color: #4a2a4a; }
    .fav-badge.game { background: var(--bg); color: var(--muted); border-color: var(--border); }
    .favs-empty {
      background: var(--surface); border: 1px dashed var(--border); border-radius: 8px;
      padding: 40px 20px; text-align: center; color: var(--muted); font-size: .9rem;
    }
    .favs-empty a { color: var(--accent2); text-decoration: none; }
    .favs-empty a:hover { text-decoration: underline; }
  </style>
{% endblock %}

{% block body %}
<div class="favs-page">
  <h1>Mes favoris ⭐</h1>

  {% if grouped is empty %}
    <div class="favs-empty">
      Tu n'as encore aucun favori.<br>
      Clique sur le <strong>☆</strong> à côté du nom d'un objet, statut, ennemi… pour l'ajouter.<br>
      Retrouve tout ce que tu recherches dans l'<a href="{{ path('search_index') }}">encyclopédie</a>.
    </div>
  {% else %}
    {% for type, rows in grouped %}
      {% set meta = typeMeta[type] ?? {label: type, route: null} %}
      <div class="favs-section">
        <div class="favs-section-title">
          {{ meta.label }}
          <span class="favs-count">— {{ rows|length }} favori{{ rows|length > 1 ? 's' }}</span>
        </div>
        <div class="favs-grid">
          {% for r in rows %}
            {% set e = r.entity %}
            <a href="{{ meta.route ? path(meta.route, {id: e.id}) : '#' }}" class="fav-card">
              <div class="fav-card-icon-wrap">
                {% if type == 'enemy' %}
                  {% if e.appearance %}
                    <img src="{{ asset(e.appearance) }}" alt="">
                  {% else %}
                    <div class="detail-icon-placeholder">☠</div>
                  {% endif %}
                {% else %}
                  {{ icon_img(e, 40) }}
                {% endif %}
              </div>
              <div class="fav-card-info">
                <div class="fav-card-name">{{ e.name }}</div>
                <div class="fav-card-meta">
                  {# ── Catégorie propre à chaque type ── #}
                  {% if type == 'weapon' and e.weaponType %}
                    <span class="fav-badge cat">{{ e.weaponType.name }}</span>
                  {% elseif type == 'armor' and e.armorType %}
                    <span class="fav-badge cat">{{ e.armorType.name }}</span>
                  {% elseif type == 'item' and e.type %}
                    <span class="fav-badge cat">{{ e.type }}</span>
                  {% elseif type == 'skill' %}
                    <span class="fav-badge cat">{{ ('skill.type.' ~ e.gameId ~ '.' ~ e.skillType)|trans({}, 'game') }}</span>
                  {% elseif type == 'enemy' %}
                    {% if e.isSuperboss %}
                      <span class="fav-badge superboss">Superboss</span>
                    {% elseif e.isBoss %}
                      <span class="fav-badge boss">Boss</span>
                    {% else %}
                      <span class="fav-badge cat">Standard</span>
                    {% endif %}
                  {% endif %}
                  {# ── Jeu ── #}
                  <span class="fav-badge game">{{ ('game.id.' ~ e.gameId)|trans({}, 'game') }}</span>
                </div>
              </div>
            </a>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  {% endif %}
</div>
{% endblock %}