{# ══════════════════════════════════════════════════════════════════════
   MACROS partagées entre match.html.twig et _match_body.html.twig
   ══════════════════════════════════════════════════════════════════════ #}

{% macro renderCamp(pState, pid, cardMap, elementsMap, matchId, activePid, matchStatus, typeBudget) %}
  {% import _self as helpers %}
  {% set isActive = (pid == activePid) and (matchStatus != 'finished') %}
  {% set typeBudget = typeBudget ?? {} %}

  <div class="gm-camp" data-camp-player="{{ pid }}">

    {# ── Colonne latérale gauche : zone énergétique verticale ── #}
    <div class="gm-energy-col">
      <span class="gm-energy-label">Énergie · {{ (pState.energyZone ?? [])|length }}</span>

      {# Résumé du budget par type (précalculé côté controller pour éviter le renumérotage
         des clés entières par array_merge dans Twig). #}
      {% if typeBudget|length > 0 %}
        <div class="gm-energy-budget">
          {% for tid, avail in typeBudget %}
            {% set elLabel = tid == 0 ? 'Sans type' : (elementsMap[tid].name ?? '#' ~ tid) %}
            <div class="gm-energy-budget-row" title="{{ elLabel }}">
              {% if tid == 0 %}
                <span style="width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#a8cf3a;font-weight:800">✻</span>
              {% elseif elementsMap[tid] is defined and elementsMap[tid].iconUrl %}
                <img src="{{ elementsMap[tid].iconUrl }}" alt="">
              {% endif %}
              <span class="gm-energy-budget-val {{ avail <= 0 ? 'is-empty' : '' }}">{{ avail }}</span>
            </div>
          {% endfor %}
        </div>
      {% endif %}

      <div class="gm-energy-cards">
        {% if (pState.energyZone ?? [])|length == 0 %}
          <span class="gm-energy-empty">Vide</span>
        {% else %}
          {% for e in pState.energyZone %}
            {% set card = cardMap[e.cardId] ?? null %}
            {% set energyIdx = loop.index0 %}
            <div class="gm-energy-card {{ e.engaged ? 'gm-energy-card--engaged' : '' }}"
                 data-card-id="{{ e.cardId }}"
                 data-slot-role="energy"
                 data-slot-index="{{ energyIdx }}"
                 title="{{ card ? card.name : '?' }} — valeur {{ e.cardValue }}">
              <span class="gm-energy-card-value">{{ e.cardValue }}</span>
              <div class="gm-energy-card-elements">
                {% for eid in e.elementalTypes ?? [] %}
                  {% if elementsMap[eid] is defined and elementsMap[eid].iconUrl %}
                    <img src="{{ elementsMap[eid].iconUrl }}" alt="">
                  {% endif %}
                {% endfor %}
              </div>
              <span class="gm-energy-card-name">{{ card ? card.name : '?' }}</span>
              {% if isActive and not e.engaged %}
                <form method="POST" action="{{ path('admin_tcg_action', {id: matchId}) }}" style="margin:0" data-gm-ajax>
                  <input type="hidden" name="action" value="engage_energy">
                  <input type="hidden" name="energyIndex" value="{{ energyIdx }}">
                  <button type="submit" class="gm-energy-engage">Engager</button>
                </form>
              {% elseif e.engaged %}
                <span class="gm-energy-engaged-tag">Engagée</span>
              {% endif %}
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </div>

    {# ── Colonne principale : monstres, sorts, boucliers ── #}
    <div class="gm-camp-main">

      {# Rangée 1 : 4 monstres + 1 héros central #}
      <div class="gm-row">
        <div class="gm-row-grid">
          {% set mZone = pState.monsterZone ?? [null, null, null, null] %}
          {% for i in [0, 1] %}
            {{ helpers.renderZoneSlot(mZone[i] ?? null, 'monster', 'Monstre', i, cardMap, elementsMap) }}
          {% endfor %}
          {{ helpers.renderZoneSlot(pState.heroZone ?? null, 'hero', 'Héros', 4, cardMap, elementsMap) }}
          {% for i in [2, 3] %}
            {{ helpers.renderZoneSlot(mZone[i] ?? null, 'monster', 'Monstre', i, cardMap, elementsMap) }}
          {% endfor %}
        </div>
      </div>

      {# Rangée 2 : 2 sorts + 1 terrain + 2 bottes #}
      <div class="gm-row">
        <div class="gm-row-grid">
          {% set sZone = pState.spellZone ?? [null, null] %}
          {% set tZone = pState.trapZone  ?? [null, null] %}
          {{ helpers.renderZoneSlot(sZone[0] ?? null, 'spell', 'Sort', 0, cardMap, elementsMap) }}
          {{ helpers.renderZoneSlot(sZone[1] ?? null, 'spell', 'Sort', 1, cardMap, elementsMap) }}
          {{ helpers.renderZoneSlot(pState.terrainZone ?? null, 'terrain', 'Terrain', 0, cardMap, elementsMap) }}
          {{ helpers.renderZoneSlot(tZone[0] ?? null, 'trap',  'Botte secrète', 0, cardMap, elementsMap) }}
          {{ helpers.renderZoneSlot(tZone[1] ?? null, 'trap',  'Botte secrète', 1, cardMap, elementsMap) }}
        </div>
      </div>

      {# Rangée 3 : 5 boucliers #}
      <div class="gm-row" style="border-top: 1px solid #1e2129; padding-top: 12px;">
        <div class="gm-row-grid">
          {% set shields = pState.shields ?? [] %}
          {% for s in shields %}
            {{ helpers.renderShieldSlot(s, loop.index0, cardMap, elementsMap) }}
          {% endfor %}
          {% set brokenCount = 5 - shields|length %}
          {% if brokenCount > 0 %}
            {% for _ in range(1, brokenCount) %}
              <div class="gm-slot gm-slot--shield" style="opacity:.25">Brisé</div>
            {% endfor %}
          {% endif %}
        </div>
      </div>
    </div>

    {# ── Colonne latérale droite : Deck + Cimetière ── #}
    <div class="gm-side-stack">

      {# Deck : dos de carte + compteur #}
      <div class="gm-side-col">
        <div class="gm-side-col-slot">
          {% if (pState.deck ?? [])|length > 0 %}
            {{ helpers.renderCardBack() }}
          {% else %}
            <span class="gm-side-col-empty">Vide</span>
          {% endif %}
        </div>
        <div class="gm-side-col-meta">
          <span class="gm-side-count">{{ (pState.deck ?? [])|length }}</span>
          <span class="gm-side-label">Deck</span>
        </div>
      </div>

      {# Cimetière : dernière carte envoyée face visible + compteur ; cliquable pour ouvrir la grille complète #}
      {% set graveyard = pState.graveyard ?? [] %}
      <div class="gm-side-col {{ graveyard|length > 0 ? 'gm-side-col--clickable' : '' }}"
           {% if graveyard|length > 0 %}
             data-graveyard-owner="{{ pid }}"
             data-graveyard-cardids="{{ graveyard|join(',') }}"
             title="Cliquer pour ouvrir le cimetière"
           {% endif %}>
        <div class="gm-side-col-slot">
          {% if graveyard|length > 0 %}
            {% set lastCardId = graveyard|last %}
            {% set lastCard   = cardMap[lastCardId] ?? null %}
            {% if lastCard %}
              <div class="gm-card-mini" style="cursor: inherit">
                <div class="gm-card-mini-cost">{{ lastCard.summonCost }}</div>
                <div class="gm-card-mini-elements">
                  {% for eid in lastCard.elementalTypes ?? [] %}
                    {% if elementsMap[eid] is defined and elementsMap[eid].iconUrl %}
                      <img src="{{ elementsMap[eid].iconUrl }}" alt="">
                    {% endif %}
                  {% endfor %}
                </div>
                <div class="gm-card-mini-name" style="margin-top:20px">{{ lastCard.name }}</div>
                <div class="gm-card-mini-portrait"
                     {% if lastCard.illustration %}style="background-image: url('{{ asset(lastCard.illustration) }}')"{% endif %}></div>
              </div>
            {% endif %}
          {% else %}
            <span class="gm-side-col-empty">Vide</span>
          {% endif %}
        </div>
        <div class="gm-side-col-meta">
          <span class="gm-side-count">{{ graveyard|length }}</span>
          <span class="gm-side-label">Cimetière</span>
        </div>
      </div>

    </div>

  </div>
{% endmacro %}

{% macro renderZoneSlot(slot, kind, label, slotIndex, cardMap, elementsMap) %}
  {% import _self as helpers %}
  {% if slot is null %}
    <div class="gm-slot gm-slot--{{ kind }}" data-slot-role="{{ kind }}" data-slot-index="{{ slotIndex }}">{{ label }}</div>
  {% else %}
    <div class="gm-slot gm-slot--{{ kind }}" style="padding:0" data-slot-role="{{ kind }}" data-slot-index="{{ slotIndex }}">
      {# Bottes secrètes non-déclenchées : face cachée #}
      {% if kind == 'trap' and not (slot.triggered ?? false) %}
        {{ helpers.renderCardBack() }}
      {% else %}
        {% set card = cardMap[slot.cardId] ?? null %}
        {{ helpers.renderCardInSlot(card, slot, kind, slotIndex, elementsMap) }}
      {% endif %}
    </div>
  {% endif %}
{% endmacro %}

{% macro renderShieldSlot(shield, slotIndex, cardMap, elementsMap) %}
  {% import _self as helpers %}
  {% if shield.broken %}
    <div class="gm-slot gm-slot--shield" style="opacity:.25" data-slot-role="shield" data-slot-index="{{ slotIndex }}" data-broken="true">Brisé</div>
  {% else %}
    <div class="gm-slot gm-slot--shield" style="padding:0" data-slot-role="shield" data-slot-index="{{ slotIndex }}">
      {{ helpers.renderCardBack() }}
    </div>
  {% endif %}
{% endmacro %}

{% macro renderCardBack() %}
  <div class="gm-card-back">
    <div class="gm-card-back-inner">
      <img class="gm-card-back-logo" src="{{ asset('images/tcg/logo.png') }}" alt="Guidoune Masters">
    </div>
  </div>
{% endmacro %}

{% macro renderCardInSlot(card, slot, kind, slotIndex, elementsMap) %}
  {% set engaged = slot.engaged ?? false %}
  {% if card is null %}
    <div class="gm-card-mini" data-card-id="{{ slot.cardId ?? '' }}" data-slot-role="{{ kind }}" data-slot-index="{{ slotIndex }}">
      <span style="margin:auto;color:#8a9099">Carte #{{ slot.cardId ?? '?' }}</span>
    </div>
  {% else %}
    <div class="gm-card-mini {{ engaged ? 'gm-card-mini--engaged' : '' }}"
         data-card-id="{{ card.id }}"
         data-slot-role="{{ kind }}"
         data-slot-index="{{ slotIndex }}"
         {% if engaged %}data-engaged="true"{% endif %}
         {% if slot.currentEg is defined %}data-current-eg="{{ slot.currentEg }}"{% endif %}>
      <div class="gm-card-mini-cost">{{ card.summonCost }}</div>
      <div class="gm-card-mini-elements">
        {% for eid in card.elementalTypes ?? [] %}
          {% if elementsMap[eid] is defined and elementsMap[eid].iconUrl %}
            <img src="{{ elementsMap[eid].iconUrl }}" alt="">
          {% endif %}
        {% endfor %}
      </div>
      <div class="gm-card-mini-name" style="margin-top:20px">{{ card.name }}</div>
      <div class="gm-card-mini-portrait"
           {% if card.illustration %}style="background-image: url('{{ asset(card.illustration) }}')"{% endif %}></div>
      {% if slot.currentPv is defined %}
        <div class="gm-card-mini-stats">
          <span class="gm-card-mini-stat--pv">PV {{ slot.currentPv }}</span>
          <span class="gm-card-mini-stat--eg">EG {{ slot.currentEg }}</span>
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endmacro %}

{% macro renderCard(card, elementsMap, handIndex) %}
  {% if card is null %}
    <div class="gm-card-mini" style="height:160px" data-slot-role="hand" data-slot-index="{{ handIndex }}"><span style="margin:auto;color:#8a9099">?</span></div>
  {% else %}
    <div class="gm-card-mini" style="height:160px" data-card-id="{{ card.id }}" data-slot-role="hand" data-slot-index="{{ handIndex }}">
      <div class="gm-card-mini-cost">{{ card.summonCost }}</div>
      <div class="gm-card-mini-elements">
        {% for eid in card.elementalTypes ?? [] %}
          {% if elementsMap[eid] is defined and elementsMap[eid].iconUrl %}
            <img src="{{ elementsMap[eid].iconUrl }}" alt="">
          {% endif %}
        {% endfor %}
      </div>
      <div class="gm-card-mini-name" style="margin-top:20px">{{ card.name }}</div>
      <div class="gm-card-mini-portrait"
           {% if card.illustration %}style="background-image: url('{{ asset(card.illustration) }}')"{% endif %}></div>
      <div class="gm-card-mini-stats">
        <span class="gm-card-mini-stat--pv">PV {{ card.stats.pvMax }}</span>
        <span class="gm-card-mini-stat--eg">EG {{ card.stats.egMax }}</span>
      </div>
    </div>
  {% endif %}
{% endmacro %}