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

{% block title %}CSI World — {{ entityName ?? 'Détail' }}{% 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; }

  .entity-breadcrumb {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px 24px; display: flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--muted); flex-shrink: 0;
  }
  .entity-breadcrumb a { color: var(--accent2); text-decoration: none; }
  .entity-breadcrumb a:hover { text-decoration: underline; }
  .entity-breadcrumb-sep { color: var(--border); }

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

  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent2); text-decoration: none; font-size: .85rem;
    margin-bottom: 20px;
  }
  .back-link:hover { text-decoration: underline; }

  /* ── Detail card ── */
  .detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }

  .detail-header {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }

  .detail-icon {
    width: 64px; height: 64px;
    image-rendering: pixelated;
    flex-shrink: 0;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--border);
    padding: 6px;
  }
  .detail-icon-placeholder {
    width: 64px; height: 64px; flex-shrink: 0;
    background: var(--surface); border-radius: 6px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--border); font-size: 28px;
  }

  /* Vignette « icône + nom + quantité » — utilisée par les recettes et la consommation d'arme. */
  .recipe-ingredients { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .recipe-ing {
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none; color: inherit;
    padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); transition: border-color .15s, transform .1s;
  }
  .recipe-ing:hover { border-color: var(--accent); transform: translateY(-1px); }
  .recipe-ing .detail-icon, .recipe-ing .detail-icon-placeholder { border: none; padding: 0; background: transparent; }
  .recipe-ing-name { font-size: .82rem; color: var(--text); font-weight: 600; }
  .recipe-ing-qty { font-weight: 700; font-size: .82rem; color: var(--muted); }
  .recipe-cost { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: .85rem; }

  .detail-title { flex: 1; min-width: 0; }
  .detail-title h1 { font-size: 1.3rem; font-weight: 700; color: var(--text); }
  .detail-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

  .detail-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }

  .detail-section { display: flex; flex-direction: column; gap: 8px; }
  .detail-section-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted);
    border-bottom: 1px solid var(--border); padding-bottom: 6px;
  }
  .detail-desc { color: var(--muted); font-size: .9rem; line-height: 1.6; font-style: italic; }

  .detail-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: .82rem;
  }
  .card-value { color: var(--accent); font-weight: 700; display: flex; align-items: center; gap: 4px; }
  .currency-icon { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: middle; }
  .card-game { color: var(--muted); font-size: .75rem; display: flex; align-items: center; gap: 5px; }
  .game-logo { height: 18px; width: auto; object-fit: contain; opacity: .85; }

  /* ── Badges ── */
  .badge {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  }
  .badge-type    { background: #1f2d40; color: var(--accent2); border: 1px solid #2d4060; }
  .badge-key     { background: #2d2010; color: #f0a030; border: 1px solid #4a3518; }
  .badge-mat     { background: #1a2d1a; color: #3fb950; border: 1px solid #2a4a2a; }
  .badge-avail   { background: #1f1f2d; color: #9952e0; border: 1px solid #2d2a4a; }
  .badge-element { background: #2d1f1f; color: #e05252; border: 1px solid #4a2d2d; }
  .badge-utility { background: #1f2d26; color: #3fb950; border: 1px solid #2a4a34; }
  .badge-rarity { background: #1e1a2e; }

  /* ── Stats grid ── */
  .stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  }
  .stat {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg); border-radius: 4px; padding: 6px 2px;
    border: 1px solid var(--border);
  }
  .stat-label { font-size: .65rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
  .stat-value { font-size: .9rem; font-weight: 700; color: var(--muted); }
  .stat-value.pos { color: var(--success); }
  .stat-value.neg { color: var(--danger); }
  .stat.active .stat-value { color: var(--text); }
  .stat.pv  .stat-label, .stat.pv.active  .stat-value { color: var(--pv); }
  .stat.eg  .stat-label, .stat.eg.active  .stat-value { color: var(--eg); }
  .stat.atq .stat-label, .stat.atq.active .stat-value { color: var(--atq); }
  .stat.def .stat-label, .stat.def.active .stat-value { color: var(--def); }
  .stat.arc .stat-label, .stat.arc.active .stat-value { color: var(--arc); }
  .stat.sag .stat-label, .stat.sag.active .stat-value { color: var(--sag); }
  .stat.vit .stat-label, .stat.vit.active .stat-value { color: var(--vit); }
  .stat.fin .stat-label, .stat.fin.active .stat-value { color: var(--fin); }

  /* ── Info rows ── */
  .info-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; }
  .info-item { display: flex; align-items: center; gap: 5px; }
  .info-label { color: var(--muted); }
  .info-value { color: var(--text); font-weight: 600; }
  .info-value.heal  { color: var(--success); }
  .info-value.dmg   { color: var(--danger); }
  .info-value.eg    { color: var(--eg); }
  .info-value.power { color: var(--arc); }
  .info-value a { color: inherit; text-decoration: underline dotted; }
  .info-value a:hover { opacity: .8; }

  /* ── Favori ⭐ ────────────────────────────────────────────────────── */
  .detail-title h1 { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .favorite-star {
    background: transparent; border: 1px solid var(--border); border-radius: 999px;
    color: var(--muted); font-size: 1.4rem; line-height: 1;
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
    flex-shrink: 0;
  }
  .favorite-star:hover { border-color: var(--accent); color: var(--accent); }
  .favorite-star.is-favorited { color: var(--accent); border-color: var(--accent); background: rgba(240,136,62,.08); }
  .favorite-star.is-favorited:hover { background: rgba(240,136,62,.16); }
  .favorite-star-icon { display: block; font-family: 'Segoe UI Symbol', system-ui; }
</style>
{% endblock %}

{# ── Shared macros ─────────────────────────────────────────────────────── #}
{% macro stats(s) %}
<div class="stats-grid">
  <div class="stat pv  {{ s.pvMax    != 0 ? 'active' }}"><span class="stat-label">PV</span> <span class="stat-value">{{ s.pvMax    != 0 ? (s.pvMax    > 0 ? '+' : '') ~ s.pvMax    : '—' }}</span></div>
  <div class="stat eg  {{ s.egMax    != 0 ? 'active' }}"><span class="stat-label">EG</span> <span class="stat-value">{{ s.egMax    != 0 ? (s.egMax    > 0 ? '+' : '') ~ s.egMax    : '—' }}</span></div>
  <div class="stat atq {{ s.attaque  != 0 ? 'active' }}"><span class="stat-label">ATQ</span><span class="stat-value">{{ s.attaque  != 0 ? (s.attaque  > 0 ? '+' : '') ~ s.attaque  : '—' }}</span></div>
  <div class="stat def {{ s.defense  != 0 ? 'active' }}"><span class="stat-label">DEF</span><span class="stat-value">{{ s.defense  != 0 ? (s.defense  > 0 ? '+' : '') ~ s.defense  : '—' }}</span></div>
  <div class="stat arc {{ s.arcane   != 0 ? 'active' }}"><span class="stat-label">ARC</span><span class="stat-value">{{ s.arcane   != 0 ? (s.arcane   > 0 ? '+' : '') ~ s.arcane   : '—' }}</span></div>
  <div class="stat sag {{ s.sagesse  != 0 ? 'active' }}"><span class="stat-label">SAG</span><span class="stat-value">{{ s.sagesse  != 0 ? (s.sagesse  > 0 ? '+' : '') ~ s.sagesse  : '—' }}</span></div>
  <div class="stat vit {{ s.vitesse  != 0 ? 'active' }}"><span class="stat-label">VIT</span><span class="stat-value">{{ s.vitesse  != 0 ? (s.vitesse  > 0 ? '+' : '') ~ s.vitesse  : '—' }}</span></div>
  <div class="stat fin {{ s.finesse  != 0 ? 'active' }}"><span class="stat-label">FIN</span><span class="stat-value">{{ s.finesse  != 0 ? (s.finesse  > 0 ? '+' : '') ~ s.finesse  : '—' }}</span></div>
</div>
{% endmacro %}

{% macro stat_changes(entries, kind) %}
  {% if entries %}
    {% set lbl    = {pvMax: 'PV Max', egMax: 'EG Max', attaque: 'Attaque', defense: 'Défense', arcane: 'Arcane', sagesse: 'Sagesse', vitesse: 'Vitesse', finesse: 'Finesse'} %}
    {% set isBuff = kind == 'buff' %}
    {% set verb   = isBuff ? 'Augmente' : 'Diminue' %}
    {% set cls    = isBuff ? 'heal' : 'dmg' %}
    {% for entry in entries %}
      <div class="info-row">
        <span class="info-item">
          <span class="info-label"><span class="info-value {{ cls }}">{{ verb }}</span> {{ lbl[entry['stat']] ?? entry['stat'] }} :</span>
          <span class="info-value">{{ entry['turns']|default(0) }} tour{{ entry['turns']|default(0) != 1 ? 's' }}{% if entry['level'] is defined and entry['level'] > 1 %} ({{ entry['level'] }} niveaux){% endif %}</span>
        </span>
      </div>
    {% endfor %}
  {% endif %}
{% endmacro %}

{% macro rarity_stars(n, gameId) %}
  {% if n > 0 %}{% set m = {1:{r:255,g:255,b:255,l:'Commun'},2:{r:12,g:201,b:12,l:'Peu commun'},3:{r:81,g:168,b:245,l:'Rare'},4:{r:197,g:84,b:235,l:'Remarquable'},5:{r:255,g:150,b:0,l:'Légendaire'},6:{r:255,g:0,b:102,l:'Unique'},7:{r:255,g:255,b:128,l:'Héroïque'},8:{r:255,g:105,b:180,l:'Séraphin'},9:{r:0,g:255,b:255,l:'Nacré'},10:{r:189,g:135,b:255,l:'Surnaturel'},11:{r:18,g:255,b:148,l:'Fabuleux'},12:{r:235,g:52,b:128,l:'Immaculé'}} %}{% if m[n] is defined %}{% set r = m[n] %}{# Override couleur NS : Hérétique (rareté 7) en rouge #}{% if gameId == 3 and n == 7 %}{% set r = r|merge({r:220, g:40, b:50}) %}{% endif %}{% set overrideKey = 'rarity.label.' ~ (gameId ?? '_') ~ '.' ~ n %}{% set overrideLabel = overrideKey|trans({}, 'game') %}{% set label = overrideLabel != overrideKey ? overrideLabel : r.l %}<span class="badge badge-rarity" style="color:rgb({{r.r}},{{r.g}},{{r.b}});border-color:rgba({{r.r}},{{r.g}},{{r.b}},0.4)">{{label}}</span>{% endif %}{% endif %}
{% endmacro %}

{# Affiche un montant + le nom et l'icône de la monnaie principale du jeu.
   - gameId 3 (Narval Souls) → "Orbes" + /images/money_narval_souls.png (asset statique)
   - autres jeux           → "Dollawrs" + icône CSI Forever id 1246 (icône in-game) #}
{% macro currency_pill(amount, gameId) %}
  {% set name = ('currency.name.' ~ gameId)|trans({}, 'game') %}
  {{ amount }} {{ name }}
  {% if gameId == 3 %}
    <img src="{{ asset('images/money_narval_souls.png') }}" class="currency-icon" alt="">
  {% else %}
    <img src="{{ path('icon_csi_forever', {id: 1246}) }}" class="currency-icon" alt="">
  {% endif %}
{% endmacro %}

{% macro icon_img(entity, size) %}
  {% set sz = size ?? 64 %}
  {% if entity.icon is defined and entity.icon %}
    {% set route = {0: 'icon_csi_forever', 3: 'icon_narval_souls'}[entity.gameId] ?? null %}
    {% if route %}
      <img src="{{ path(route, {id: entity.icon}) }}" style="width:{{ sz }}px;height:{{ sz }}px" class="detail-icon" alt="">
    {% else %}
      <div class="detail-icon-placeholder" style="width:{{ sz }}px;height:{{ sz }}px">?</div>
    {% endif %}
  {% else %}
    <div class="detail-icon-placeholder" style="width:{{ sz }}px;height:{{ sz }}px">✦</div>
  {% endif %}
{% endmacro %}

{% block body %}
<div class="page">
  <div class="entity-breadcrumb">
    {% if backRoute is defined %}
      <a href="{{ path(backRoute, backParams ?? {}) }}">{{ backLabel ?? 'Encyclopédie' }}</a>
    {% else %}
      <a href="{{ path('search_index', {category: backCategory ?? 'item'}) }}">{{ backLabel ?? 'Encyclopédie' }}</a>
    {% endif %}
    <span class="entity-breadcrumb-sep">/</span>
    <span>{{ entityName ?? 'Détail' }}</span>
  </div>

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

{% if app.user %}
<script>
  // Handler global favoris — toggle sur clic, mise à jour visuelle + tooltip.
  document.querySelectorAll('.favorite-star').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      var type = btn.dataset.favType;
      var id   = parseInt(btn.dataset.favId, 10);
      if (!type || !id) return;
      btn.disabled = true;
      try {
        var res = await fetch('{{ path('favorite_toggle') }}', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
          credentials: 'same-origin',
          body: JSON.stringify({ type: type, entityId: id }),
        });
        if (!res.ok) throw new Error('http ' + res.status);
        var data = await res.json();
        var fav  = !!data.favorited;
        btn.classList.toggle('is-favorited', fav);
        btn.setAttribute('aria-pressed', fav ? 'true' : 'false');
        btn.title = fav ? 'Retirer des favoris' : 'Ajouter aux favoris';
        var icon = btn.querySelector('.favorite-star-icon');
        if (icon) icon.textContent = fav ? '★' : '☆';
      } catch (e) {
        console.error('Favori toggle KO', e);
      } finally {
        btn.disabled = false;
      }
    });
  });
</script>
{% endif %}
{% endblock %}