{% extends 'admin/layout.html.twig' %}
{% block page_title %}{{ title }}{% endblock %}
{% block breadcrumb %}
  <span class="sep">/</span><a href="{{ path('admin_trading_card_index') }}" class="breadcrumb-link">Cartes</a>
  <span class="sep">/</span><span class="breadcrumb-text">{{ title }}</span>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .effect-row {
    display: grid;
    gap: 10px; align-items: end;
    padding: 10px; border: 1px solid var(--border); border-radius: 6px;
    margin-bottom: 8px; background: var(--bg);
  }
  .effect-row.passive-row { grid-template-columns: 1fr 3fr auto; }
  .effect-row.skill-row   { grid-template-columns: 1fr 120px 160px 70px 70px 2fr auto; }
  .effect-row .field { margin: 0; }
  .effect-row .field-label { font-size: .72rem; }
  .effect-remove {
    background: transparent; border: 1px solid var(--danger, #f85149);
    color: var(--danger, #f85149); border-radius: 6px; padding: 8px 10px;
    cursor: pointer; font-size: .8rem; font-weight: 600;
    align-self: end; height: 36px;
  }
  .effect-remove:hover { background: rgba(248,81,73,.15); }
  .effect-add-btn {
    padding: 8px 16px; border-radius: 6px; border: 1px dashed var(--accent2);
    background: transparent; color: var(--accent2); font-size: .82rem; font-weight: 600;
    cursor: pointer;
  }
  .effect-add-btn:hover { background: rgba(88,166,255,.08); }
  .effect-empty { color: var(--muted); font-size: .82rem; padding: 8px 0; font-style: italic; }

  /* Éditeur d'effets JSON — placé en pleine largeur sous la rangée. */
  .effects-editor {
    grid-column: 1 / -1;
    margin-top: 6px; padding-top: 8px;
    border-top: 1px dashed var(--border);
  }
  .effects-editor > summary {
    cursor: pointer; padding: 4px 6px;
    color: var(--accent2); font-size: .78rem; font-weight: 600;
    list-style: none;
  }
  .effects-editor > summary::before { content: '▸ '; font-size: .7rem; }
  .effects-editor[open] > summary::before { content: '▾ '; }
  .effects-editor-body {
    display: grid; gap: 8px;
    grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    padding: 8px 0 4px;
  }
  .effects-editor-body textarea {
    grid-column: 1 / -1;
    background: #0d1117; border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .78rem; padding: 8px 10px; min-height: 90px; resize: vertical;
  }
  .effects-editor-templates { display: flex; gap: 6px; align-items: center; }
  .effects-editor-templates select {
    background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
    color: var(--text); font-size: .78rem; padding: 4px 8px;
  }
  .effects-editor-templates button {
    background: rgba(88,166,255,.1); border: 1px solid var(--accent2);
    color: var(--accent2); border-radius: 4px; padding: 4px 10px;
    font-size: .78rem; font-weight: 600; cursor: pointer;
  }
  .effects-editor-templates button:hover { background: rgba(88,166,255,.2); }

  .drop-zone {
    border: 2px dashed var(--border); border-radius: 8px; padding: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    cursor: pointer; transition: border-color .15s, background .15s; text-align: center;
    min-height: 120px; justify-content: center;
  }
  .drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent2); background: rgba(88,166,255,.05); }
  .drop-zone-label { color: var(--muted); font-size: .85rem; }
  .drop-zone-label strong { color: var(--accent2); }
  #illustrationPreview { max-width: 200px; max-height: 200px; border-radius: 6px; object-fit: contain; background: var(--bg); display: block; }
  .drop-zone-path { color: var(--muted); font-size: .72rem; font-family: 'JetBrains Mono', ui-monospace, monospace; word-break: break-all; }

  /* ── Preview de l'illustration courante ── */
  .artwork-current { display: flex; align-items: center; gap: 16px; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
  .artwork-current-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .btn-clear-artwork { background: transparent; border: 1px solid var(--danger); color: var(--danger); border-radius: 4px; padding: 3px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; align-self: flex-start; }
  .btn-clear-artwork:hover { background: rgba(248,81,73,.12); }

  /* ── Galerie d'artworks locaux ── */
  .artwork-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px; max-height: 340px; overflow-y: auto; padding: 8px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  }
  .artwork-tile {
    position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
    cursor: pointer; border: 2px solid transparent; transition: border-color .12s, transform .12s;
    background: var(--surface);
  }
  .artwork-tile:hover { border-color: var(--accent2); transform: scale(1.05); }
  .artwork-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(240,136,62,.35); }
  .artwork-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .artwork-tile-name {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,.72); color: #e4e6ea;
    font-size: .68rem; padding: 2px 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .artwork-tile.is-hidden { display: none; }
  #artworkFilter {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    padding: 6px 10px; color: var(--text); font-size: .82rem; width: 100%;
  }
</style>
{% endblock %}

{% block content %}

<form method="post" action="{{ action }}" enctype="multipart/form-data">

  <div class="section">
    <div class="section-title">Général</div>
    <div class="grid-2">
      <div class="field col-span-2">
        <label class="field-label" for="name">Nom *</label>
        <input type="text" name="name" id="name" required value="{{ card.name }}">
      </div>
      <div class="field">
        <label class="field-label" for="number">Numéro</label>
        <input type="number" name="number" id="number" min="0" value="{{ card.number }}">
      </div>
      <div class="field">
        <label class="field-label" for="rarity">Rareté (1-12)</label>
        <input type="number" name="rarity" id="rarity" min="1" max="12" value="{{ card.rarity }}">
      </div>
      <div class="field">
        <label class="field-label" for="cardType">Type de carte</label>
        <select name="cardType" id="cardType">
          {% for value, label in {
            'creature':  'Monstre',
            'spell':     'Sort',
            'equipment': 'Équipement',
            'trap':      'Botte secrète',
            'hero':      'Héros',
          } %}
            <option value="{{ value }}" {{ card.cardType == value ? 'selected' }}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label class="field-label" for="classification">Classification</label>
        <input type="text" name="classification" id="classification" value="{{ card.classification }}" placeholder="ex: Guerrier, Rituel…">
      </div>
      <div class="field">
        <label class="field-label" for="summonCost">Coût d'invocation</label>
        <input type="number" name="summonCost" id="summonCost" min="0" value="{{ card.summonCost }}">
      </div>
      <div class="field">
        <label class="field-label" for="cardValue">Valeur (ressource pour invoquer)</label>
        <input type="number" name="cardValue" id="cardValue" min="0" value="{{ card.cardValue }}">
      </div>
      <div class="field col-span-2">
        <label class="field-label" for="description">Description / lore</label>
        <textarea name="description" id="description" rows="3">{{ card.description }}</textarea>
      </div>

      {# ── Effets uniques (Sort / Botte secrète / Équipement) ── #}
      {% set singleEffects = card.skills[0].effects ?? [] %}
      {% set trapTrigger = card.skills[0].activationTrigger ?? '' %}
      <div class="field col-span-2" id="topLevelEffectsField" style="display:none">
        <label class="field-label">Effet(s) de la carte (JSON)</label>
        {{ _self.effectsEditor('singleEffects', singleEffects) }}
      </div>

      {# ── Trigger d'activation (Botte secrète uniquement) ── #}
      <div class="field col-span-2" id="trapTriggerField" style="display:none">
        <label class="field-label" for="trapActivationTrigger">Trigger d'activation</label>
        <select name="trapActivationTrigger" id="trapActivationTrigger">
          <option value="">— Aucun (trap inerte) —</option>
          {% for value, label in {
            'opponent_attack_declared':  'Adversaire déclare une attaque (n\'importe quelle cible)',
            'opponent_direct_attack':    'Adversaire déclare une attaque DIRECTE (bouclier)',
            'opponent_summon':           'Adversaire invoque une carte',
            'opponent_draw':             'Adversaire pioche une carte',
            'opponent_skill_used':       'Adversaire utilise un sort',
          } %}
            <option value="{{ value }}" {{ trapTrigger == value ? 'selected' }}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="field col-span-2">
        <div class="checkbox-group">
          <label class="checkbox-item"><input type="checkbox" name="published" value="1" {{ card.published ? 'checked' }}> Publiée (visible côté joueur)</label>
        </div>
      </div>
    </div>
  </div>

  {# ── Illustration : galerie locale prioritaire, upload en fallback ── #}
  <div class="section">
    <div class="section-title">Illustration</div>

    {# ─── Preview + chemin courant ─── #}
    <div class="field" style="margin-bottom: 14px;">
      <div class="artwork-current" id="artworkCurrent">
        {% if card.illustration %}
          <img id="illustrationPreview" src="{{ asset(card.illustration) }}" alt="Illustration actuelle">
          <div class="artwork-current-meta">
            <span class="drop-zone-path" id="artworkCurrentPath">{{ card.illustration }}</span>
            <button type="button" class="btn-clear-artwork" id="clearArtwork" title="Retirer l'illustration">Retirer</button>
          </div>
        {% else %}
          <img id="illustrationPreview" style="display:none" alt="">
          <div class="artwork-current-meta">
            <span class="drop-zone-path" id="artworkCurrentPath" style="color: var(--muted); font-style: italic;">Aucune illustration sélectionnée</span>
          </div>
        {% endif %}
      </div>
      <input type="hidden" name="illustration_path" id="illustrationPath" value="{{ card.illustration }}">
    </div>

    {# ─── Galerie des artworks locaux ─── #}
    <div class="field">
      <label class="field-label">Choisir un artwork local ({{ artworks|length }} disponibles)</label>
      <input type="text" id="artworkFilter" placeholder="Filtrer par nom…" style="margin-bottom: 10px;">
      <div class="artwork-gallery" id="artworkGallery">
        {% for path in artworks %}
          {% set filename = path|split('/')|last %}
          <div class="artwork-tile {{ card.illustration == path ? 'is-selected' : '' }}"
               data-artwork-path="{{ path }}"
               title="{{ filename }}">
            <img src="{{ asset(path) }}" alt="{{ filename }}" loading="lazy">
            <span class="artwork-tile-name">{{ filename }}</span>
          </div>
        {% endfor %}
      </div>
    </div>

    {# ─── Upload en fallback ─── #}
    <div class="field" style="margin-top: 14px;">
      <label class="field-label">Ou téléverser un nouveau fichier</label>
      <div class="drop-zone" id="illustrationDropZone" style="min-height: 80px;">
        <div class="drop-zone-label">
          <strong>Glissez une image ici</strong> ou cliquez pour téléverser
        </div>
        <input type="file" name="illustration" id="illustrationFile" accept="image/*" style="display:none">
      </div>
    </div>
  </div>

  {# ── Éléments (1 ou 2 — double-typing autorisé) ── #}
  <div class="section">
    <div class="section-title">Types élémentaux (0 à 2)</div>
    {% set selectedTypes = card.elementalTypes ?? [] %}
    <div class="grid-2">
      {% for slot in 0..1 %}
        <div class="field">
          <label class="field-label" for="elementalTypes_{{ slot }}">Élément {{ slot + 1 }}</label>
          <select name="elementalTypes[]" id="elementalTypes_{{ slot }}">
            <option value="0">— Aucun —</option>
            {% for e in elements %}
              <option value="{{ e.id }}" {{ (selectedTypes[slot] ?? 0) == e.id ? 'selected' }}>{{ e.name }}</option>
            {% endfor %}
          </select>
        </div>
      {% endfor %}
    </div>
  </div>

  {# ── Faiblesses / Résistances élémentales ── #}
  <div class="section">
    <div class="section-title">Faiblesses & Résistances (0 à 2 chacun)</div>
    <div class="grid-2">
      {% set weakSel = card.weaknesses ?? [] %}
      {% set resistSel = card.resistances ?? [] %}
      {% for slot in 0..1 %}
        <div class="field">
          <label class="field-label" for="weaknesses_{{ slot }}">Faiblesse {{ slot + 1 }}</label>
          <select name="weaknesses[]" id="weaknesses_{{ slot }}">
            <option value="0">— Aucune —</option>
            {% for e in elements %}
              <option value="{{ e.id }}" {{ (weakSel[slot] ?? 0) == e.id ? 'selected' }}>{{ e.name }}</option>
            {% endfor %}
          </select>
        </div>
      {% endfor %}
      {% for slot in 0..1 %}
        <div class="field">
          <label class="field-label" for="resistances_{{ slot }}">Résistance {{ slot + 1 }}</label>
          <select name="resistances[]" id="resistances_{{ slot }}">
            <option value="0">— Aucune —</option>
            {% for e in elements %}
              <option value="{{ e.id }}" {{ (resistSel[slot] ?? 0) == e.id ? 'selected' }}>{{ e.name }}</option>
            {% endfor %}
          </select>
        </div>
      {% endfor %}
    </div>
  </div>

  {# ── Passifs : {name, description} ── #}
  <div class="section">
    <div class="section-title">Passifs</div>
    <div class="effect-list" id="passives-list">
      {% if card.passives|length == 0 %}
        <div class="effect-empty" data-empty="passives">Aucun passif. Cliquez sur « + Ajouter » pour en créer un.</div>
      {% else %}
        {% for i, p in card.passives %}
          <div class="effect-row passive-row">
            <div class="field">
              <label class="field-label">Nom</label>
              <input type="text" name="passives[{{ i }}][name]" value="{{ p.name }}" required>
            </div>
            <div class="field">
              <label class="field-label">Description</label>
              <input type="text" name="passives[{{ i }}][description]" value="{{ p.description ?? '' }}" placeholder="Régénère 5% des PV max à chaque tour…">
            </div>
            <button type="button" class="effect-remove" onclick="removeEffect(this)">Retirer</button>
            {{ _self.effectsEditor('passives[' ~ i ~ '][effects]', p.effects ?? []) }}
          </div>
        {% endfor %}
      {% endif %}
    </div>
    <button type="button" class="effect-add-btn" data-add="passive">+ Ajouter un passif</button>
  </div>

  {# ── Sorts : {name, elementId, cost, description} ── #}
  <div class="section" id="skills-section">
    <div class="section-title">Sorts</div>
    <div class="effect-list" id="skills-list">
      {% if card.skills|length == 0 %}
        <div class="effect-empty" data-empty="skills">Aucun sort. Cliquez sur « + Ajouter » pour en créer un.</div>
      {% else %}
        {% for i, s in card.skills %}
          <div class="effect-row skill-row">
            <div class="field">
              <label class="field-label">Nom</label>
              <input type="text" name="skills[{{ i }}][name]" value="{{ s.name }}" required>
            </div>
            <div class="field">
              <label class="field-label">Type</label>
              <select name="skills[{{ i }}][type]">
                <option value="physical" {{ (s.type ?? 'physical') == 'physical' ? 'selected' }}>Physique</option>
                <option value="magical"  {{ (s.type ?? '') == 'magical'  ? 'selected' }}>Magique</option>
                <option value="status"   {{ (s.type ?? '') == 'status'   ? 'selected' }}>Statut</option>
              </select>
            </div>
            <div class="field">
              <label class="field-label">Élément</label>
              <select name="skills[{{ i }}][elementId]">
                <option value="0">— Aucun —</option>
                {% for e in elements %}
                  <option value="{{ e.id }}" {{ (s.elementId ?? 0) == e.id ? 'selected' }}>{{ e.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="field">
              <label class="field-label">Coût</label>
              <input type="number" name="skills[{{ i }}][cost]" value="{{ s.cost ?? 0 }}" min="0">
            </div>
            <div class="field">
              <label class="field-label">Dégâts</label>
              <input type="number" name="skills[{{ i }}][damage]" value="{{ s.damage ?? 0 }}" min="0">
            </div>
            <div class="field">
              <label class="field-label">Description</label>
              <input type="text" name="skills[{{ i }}][description]" value="{{ s.description ?? '' }}" placeholder="Inflige des dégâts arcaniques…">
            </div>
            <button type="button" class="effect-remove" onclick="removeEffect(this)">Retirer</button>
            {{ _self.effectsEditor('skills[' ~ i ~ '][effects]', s.effects ?? []) }}
          </div>
        {% endfor %}
      {% endif %}
    </div>
    <button type="button" class="effect-add-btn" data-add="skill">+ Ajouter un sort</button>
  </div>

  {% include 'admin/_includes/stats_fields.html.twig' with {entity: card} %}

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Enregistrer</button>
    <a href="{{ path('admin_trading_card_index') }}" class="btn btn-cancel">Annuler</a>
  </div>
</form>

<script>
  (function () {
    // Sérialise les <option> d'un <select> en HTML (pour les rangées de sorts générées dynamiquement).
    var elementsSelect = (function () {
      var first = document.querySelector('select[name^="skills["]');
      if (!first) {
        // Pas encore de rangée de sort — on reconstruit depuis les éléments de la page
        // en cherchant dans les selects d'éléments principaux (types élémentaux).
        first = document.querySelector('select[name="elementalTypes[]"]');
      }
      if (!first) return '<option value="0">— Aucun —</option>';
      var opts = '<option value="0">— Aucun —</option>';
      first.querySelectorAll('option').forEach(function (o) {
        if (o.value === '0') return;
        opts += '<option value="' + o.value + '">' + o.textContent + '</option>';
      });
      return opts;
    })();

    function effectsEditorHtml(fieldName) {
      return '<details class="effects-editor">' +
        '<summary>Effets (0)</summary>' +
        '<div class="effects-editor-body">' +
          '<textarea name="' + fieldName + '" rows="6" placeholder="[]"></textarea>' +
          '<div class="effects-editor-templates">' +
            '<select data-template-select>' +
              '<option value="">— Insérer un template —</option>' +
              '<option value="damage_targets">Dégâts de zone</option>' +
              '<option value="heal_targets">Soins ciblés</option>' +
              '<option value="self_damage">Auto-dégâts</option>' +
              '<option value="restore_eg_targets">Restaurer EG</option>' +
              '<option value="modify_stat_targets">Modifier stat (permanent)</option>' +
              '<option value="set_stat_targets">Fixer stat (currentPv / currentEg)</option>' +
              '<option value="add_card_to_hand">Ajouter une carte (deck / cimetière)</option>' +
              '<option value="modify_shield_break_count">Double/Triple briseur (N boucliers)</option>' +
              '<option value="apply_status_no_attack">Statut : Empêcher d\'attaquer (no_attack)</option>' +
              '<option value="apply_status_disable_skill">Statut : Désactiver un sort (disable_skill)</option>' +
              '<option value="destroy_targets">Détruire des cibles</option>' +
              '<option value="return_to_hand_targets">Retour en main</option>' +
              '<option value="set_stat_delta">Modifier PV/EG (delta)</option>' +
              '<option value="summon_from_zone">Invocation programmée (main/deck/cimetière)</option>' +
              '<option value="apply_player_status_traps">Statut joueur : bloquer bottes secrètes</option>' +
              '<option value="apply_player_status_spells">Statut joueur : bloquer sorts</option>' +
              '<option value="apply_player_status_summon">Statut joueur : bloquer invocations</option>' +
              '<option value="apply_player_status_draw">Statut joueur : sauter la pioche</option>' +
              '<option value="reduce_incoming_damage_element">Réduire dégâts entrants (type)</option>' +
              '<option value="reduce_incoming_damage_others">Réduire dégâts entrants (autres monstres)</option>' +
              '<option value="modify_skill_cost">Réduire coût des sorts</option>' +
              '<option value="require_zone_all_of">Contrainte engagement (type unique ZE)</option>' +
              '<option value="periodic_every_n_turns">Effet périodique (tous les N tours)</option>' +
            '</select>' +
            '<button type="button" data-insert-template>Insérer</button>' +
          '</div>' +
        '</div>' +
      '</details>';
    }

    function makePassiveRow(index) {
      var div = document.createElement('div');
      div.className = 'effect-row passive-row';
      div.innerHTML =
        '<div class="field"><label class="field-label">Nom</label>' +
          '<input type="text" name="passives[' + index + '][name]" required></div>' +
        '<div class="field"><label class="field-label">Description</label>' +
          '<input type="text" name="passives[' + index + '][description]" placeholder="Régénère 5% des PV max à chaque tour…"></div>' +
        '<button type="button" class="effect-remove" onclick="removeEffect(this)">Retirer</button>' +
        effectsEditorHtml('passives[' + index + '][effects]');
      return div;
    }

    function makeSkillRow(index) {
      var div = document.createElement('div');
      div.className = 'effect-row skill-row';
      div.innerHTML =
        '<div class="field"><label class="field-label">Nom</label>' +
          '<input type="text" name="skills[' + index + '][name]" required></div>' +
        '<div class="field"><label class="field-label">Type</label>' +
          '<select name="skills[' + index + '][type]">' +
            '<option value="physical">Physique</option>' +
            '<option value="magical">Magique</option>' +
            '<option value="status">Statut</option>' +
          '</select></div>' +
        '<div class="field"><label class="field-label">Élément</label>' +
          '<select name="skills[' + index + '][elementId]">' + elementsSelect + '</select></div>' +
        '<div class="field"><label class="field-label">Coût</label>' +
          '<input type="number" name="skills[' + index + '][cost]" value="0" min="0"></div>' +
        '<div class="field"><label class="field-label">Dégâts</label>' +
          '<input type="number" name="skills[' + index + '][damage]" value="0" min="0"></div>' +
        '<div class="field"><label class="field-label">Description</label>' +
          '<input type="text" name="skills[' + index + '][description]" placeholder="Inflige des dégâts arcaniques…"></div>' +
        '<button type="button" class="effect-remove" onclick="removeEffect(this)">Retirer</button>' +
        effectsEditorHtml('skills[' + index + '][effects]');
      return div;
    }

    document.querySelector('[data-add="passive"]').addEventListener('click', function () {
      var list  = document.getElementById('passives-list');
      var empty = list.querySelector('[data-empty]');
      if (empty) empty.remove();
      list.appendChild(makePassiveRow(list.querySelectorAll('.effect-row').length));
    });

    document.querySelector('[data-add="skill"]').addEventListener('click', function () {
      var list  = document.getElementById('skills-list');
      var empty = list.querySelector('[data-empty]');
      if (empty) empty.remove();
      list.appendChild(makeSkillRow(list.querySelectorAll('.effect-row').length));
    });

    window.removeEffect = function (btn) {
      var row  = btn.closest('.effect-row');
      var list = row ? row.closest('.effect-list') : null;
      if (row) row.remove();
      if (list && list.querySelectorAll('.effect-row').length === 0) {
        var isSkill = list.id === 'skills-list';
        var empty = document.createElement('div');
        empty.className = 'effect-empty';
        empty.dataset.empty = isSkill ? 'skills' : 'passives';
        empty.textContent = 'Aucun ' + (isSkill ? 'sort' : 'passif') + '. Cliquez sur « + Ajouter » pour en créer un.';
        list.appendChild(empty);
      }
    };
  })();

  // ── Illustration : galerie locale + upload en fallback ────────────────
  (function () {
    var pathInput   = document.getElementById('illustrationPath');
    var pathLabel   = document.getElementById('artworkCurrentPath');
    var preview     = document.getElementById('illustrationPreview');
    var gallery     = document.getElementById('artworkGallery');
    var filter      = document.getElementById('artworkFilter');
    var clearBtn    = document.getElementById('clearArtwork');
    var zone        = document.getElementById('illustrationDropZone');
    var input       = document.getElementById('illustrationFile');
    if (!pathInput || !preview) return;

    // Chemins asset — pour reconstruire l'URL à partir d'un chemin relatif.
    var ASSET_BASE = "{{ asset('') }}";

    function setCurrent(path, isUpload) {
      pathInput.value = path || '';
      if (path) {
        preview.src = isUpload ? path : (ASSET_BASE + path);
        preview.style.display = 'block';
        pathLabel.textContent = path;
        pathLabel.style.color = '';
        pathLabel.style.fontStyle = '';
      } else {
        preview.src = '';
        preview.style.display = 'none';
        pathLabel.textContent = 'Aucune illustration sélectionnée';
        pathLabel.style.color = 'var(--muted)';
        pathLabel.style.fontStyle = 'italic';
      }
      // Retire la sélection dans la galerie sauf pour cet artwork
      if (gallery) {
        gallery.querySelectorAll('.artwork-tile').forEach(function (t) {
          t.classList.toggle('is-selected', !isUpload && t.dataset.artworkPath === path);
        });
      }
      if (clearBtn) clearBtn.style.display = path ? '' : 'none';
    }

    // ─── Clic sur une miniature de la galerie
    if (gallery) {
      gallery.addEventListener('click', function (e) {
        var tile = e.target.closest('.artwork-tile');
        if (!tile) return;
        // Réinitialise l'upload : si un fichier avait été choisi, on l'annule
        if (input) input.value = '';
        setCurrent(tile.dataset.artworkPath, false);
      });
    }

    // ─── Filtre du nom
    if (filter) {
      filter.addEventListener('input', function () {
        var q = filter.value.trim().toLowerCase();
        gallery.querySelectorAll('.artwork-tile').forEach(function (tile) {
          var name = (tile.dataset.artworkPath || '').toLowerCase();
          tile.classList.toggle('is-hidden', q && name.indexOf(q) === -1);
        });
      });
    }

    // ─── Bouton "Retirer"
    if (clearBtn) {
      clearBtn.addEventListener('click', function () {
        if (input) input.value = '';
        setCurrent('', false);
      });
    }

    // ─── Upload fallback (drag-drop + file picker)
    if (zone && input) {
      zone.addEventListener('click', function (e) { if (e.target !== input) input.click(); });
      zone.addEventListener('dragover',  function (e) { e.preventDefault(); zone.classList.add('drag-over'); });
      zone.addEventListener('dragleave', function ()  { zone.classList.remove('drag-over'); });
      zone.addEventListener('drop', function (e) {
        e.preventDefault();
        zone.classList.remove('drag-over');
        var file = e.dataTransfer.files[0];
        if (file && file.type.indexOf('image/') === 0) {
          var dt = new DataTransfer();
          dt.items.add(file);
          input.files = dt.files;
          setCurrent(URL.createObjectURL(file), true);
          pathLabel.textContent = '(nouveau fichier : ' + file.name + ')';
        }
      });
      input.addEventListener('change', function () {
        if (input.files[0]) {
          setCurrent(URL.createObjectURL(input.files[0]), true);
          pathLabel.textContent = '(nouveau fichier : ' + input.files[0].name + ')';
          // Chemin vide côté DB : le controller détectera l'upload et écrasera
          pathInput.value = '';
        }
      });
    }
  })();

  // ── Toggle top-level effects vs Sorts section selon cardType ─────────
  (function () {
    var cardTypeSelect = document.getElementById('cardType');
    var topLevelField  = document.getElementById('topLevelEffectsField');
    var skillsSection  = document.getElementById('skills-section');
    var trapTriggerFld = document.getElementById('trapTriggerField');
    if (!cardTypeSelect || !topLevelField || !skillsSection) return;

    var SINGLE_ACTION_TYPES = ['spell', 'trap', 'equipment'];

    function update() {
      var isSingle = SINGLE_ACTION_TYPES.indexOf(cardTypeSelect.value) !== -1;
      var isTrap   = cardTypeSelect.value === 'trap';
      topLevelField.style.display = isSingle ? '' : 'none';
      skillsSection.style.display = isSingle ? 'none' : '';
      if (trapTriggerFld) {
        trapTriggerFld.style.display = isTrap ? '' : 'none';
        trapTriggerFld.querySelectorAll('select, input').forEach(function (el) {
          el.disabled = !isTrap;
        });
      }
      // Désactive les inputs du bloc masqué pour éviter qu'ils ne soient soumis.
      topLevelField.querySelectorAll('textarea, select, input').forEach(function (el) {
        el.disabled = !isSingle;
      });
      skillsSection.querySelectorAll('textarea, select, input').forEach(function (el) {
        el.disabled = isSingle;
      });
    }

    cardTypeSelect.addEventListener('change', update);
    update();
  })();

  // ── Éditeur d'effets JSON : "Insérer un template" ──────────────────────
  (function () {
    const TEMPLATES = {
      damage_targets:      { action: "damage_targets",      params: { filter: { side: "opponent", zone: "monster", excludePrimaryTarget: true }, amount: 10, element: null } },
      heal_targets:        { action: "heal_targets",        params: { filter: { side: "own",      zone: "monster", elementalType: 1 },           amount: 30 } },
      self_damage:         { action: "self_damage",         params: { amount: 10 } },
      restore_eg_targets:  { action: "restore_eg_targets",  params: { filter: { side: "own",      zone: "monster" }, amount: "max" } },
      modify_stat_targets: { action: "modify_stat_targets", params: { filter: { side: "own",      zone: "monster" }, stat: "defense", delta: 5, duration: "permanent" } },
      set_stat_targets:    { action: "set_stat_targets",    params: { filter: { target: "primary" }, stat: "currentEg", value: 0 } },
      add_card_to_hand:    { action: "add_card_to_hand",    params: { source: ["deck"], cardType: ["spell", "equipment"], summonCost: null, elementalType: null } },
      modify_shield_break_count: { action: "modify_shield_break_count", params: { count: 2 } },
      apply_status_no_attack:    { action: "apply_status_targets", params: { filter: { target: "primary" }, status: { type: "no_attack", duration: 1 } } },
      apply_status_disable_skill:{ action: "apply_status_targets", params: { filter: { target: "self" },    status: { type: "disable_skill", duration: 1, skillIndex: 0 } } },
      destroy_targets:           { action: "destroy_targets",       params: { filter: { side: "opponent", zone: "trap" } } },
      return_to_hand_targets:    { action: "return_to_hand_targets",params: { filter: { target: "self" } } },
      set_stat_delta:            { action: "set_stat_targets",      params: { filter: { target: "primary" }, stat: "currentEg", delta: -1 } },
      // ─── Phase 2 : primitives avancées (paramètres à ajuster à l'usage) ───
      summon_from_zone:          { action: "summon_from_zone", params: { source: "deck", targetZone: "monster", cardType: "hero", matchSourceElement: true, ignoreSummonCost: true, energyType: 0 } },
      apply_player_status_traps: { action: "apply_player_status", params: { filter: { side: "opponent" }, status: { type: "disable_traps",  duration: 1 } } },
      apply_player_status_spells:{ action: "apply_player_status", params: { filter: { side: "opponent" }, status: { type: "disable_spells", duration: 1 } } },
      apply_player_status_summon:{ action: "apply_player_status", params: { filter: { side: "opponent" }, status: { type: "no_summon",      duration: 1 } } },
      apply_player_status_draw:  { action: "apply_player_status", params: { filter: { side: "opponent" }, status: { type: "no_draw",        duration: 1 } } },
      reduce_incoming_damage_element:  { action: "reduce_incoming_damage", params: { filter: { target: "self" }, damageElement: 5, multiplier: 0 } },
      reduce_incoming_damage_others:   { action: "reduce_incoming_damage", params: { filter: { side: "own", zone: "any", excludeSelf: true }, damageElement: 4, multiplier: 0.5 } },
      modify_skill_cost:         { action: "modify_skill_cost", params: { delta: -1 } },
      require_zone_all_of:       { action: "require_zone_all_of", params: { zone: "energy", elementalType: 5 } },
      periodic_every_n_turns:    { trigger: "on_turn_end", condition: { every_n_turns: 3 }, action: "restore_eg_targets", params: { filter: { target: "self" }, amount: 9 } }
    };

    document.addEventListener('click', function (e) {
      const btn = e.target.closest('[data-insert-template]');
      if (!btn) return;
      const wrap = btn.closest('.effects-editor-body');
      if (!wrap) return;
      const select = wrap.querySelector('[data-template-select]');
      const textarea = wrap.querySelector('textarea');
      if (!select || !textarea || !select.value) return;
      const tmpl = TEMPLATES[select.value];
      if (!tmpl) return;

      let existing = [];
      const cur = textarea.value.trim();
      if (cur) {
        try {
          const parsed = JSON.parse(cur);
          if (Array.isArray(parsed)) existing = parsed;
        } catch (_) { /* ignore, on écrase */ }
      }
      existing.push(JSON.parse(JSON.stringify(tmpl))); // clone
      textarea.value = JSON.stringify(existing, null, 2);
      textarea.dispatchEvent(new Event('input', { bubbles: true }));
    });
  })();
</script>
{% endblock %}

{# ══════════════════════════════════════════════════════════════════════
   MACRO : éditeur d'effets JSON (sous chaque skill/passive-row)
   ══════════════════════════════════════════════════════════════════════ #}
{% macro effectsEditor(name, effects) %}
  <details class="effects-editor"{% if effects|length > 0 %} open{% endif %}>
    <summary>Effets ({{ effects|length }})</summary>
    <div class="effects-editor-body">
      {# JSON flags : PRETTY_PRINT (128) | UNESCAPED_UNICODE (256) | UNESCAPED_SLASHES (64) = 448 #}
      <textarea name="{{ name }}" rows="6" placeholder="[]">{% if effects|length > 0 %}{{ effects|json_encode(448) }}{% endif %}</textarea>
      <div class="effects-editor-templates">
        <select data-template-select>
          <option value="">— Insérer un template —</option>
          <option value="damage_targets">Dégâts de zone</option>
          <option value="heal_targets">Soins ciblés</option>
          <option value="self_damage">Auto-dégâts</option>
          <option value="restore_eg_targets">Restaurer EG</option>
          <option value="modify_stat_targets">Modifier stat (permanent)</option>
          <option value="set_stat_targets">Fixer stat (currentPv / currentEg)</option>
          <option value="add_card_to_hand">Ajouter une carte (deck / cimetière)</option>
          <option value="modify_shield_break_count">Double/Triple briseur (N boucliers)</option>
          <option value="apply_status_no_attack">Statut : Empêcher d'attaquer (no_attack)</option>
          <option value="apply_status_disable_skill">Statut : Désactiver un sort (disable_skill)</option>
          <option value="destroy_targets">Détruire des cibles</option>
          <option value="return_to_hand_targets">Retour en main</option>
          <option value="set_stat_delta">Modifier PV/EG (delta)</option>
          <option value="summon_from_zone">Invocation programmée (main/deck/cimetière)</option>
          <option value="apply_player_status_traps">Statut joueur : bloquer bottes secrètes</option>
          <option value="apply_player_status_spells">Statut joueur : bloquer sorts</option>
          <option value="apply_player_status_summon">Statut joueur : bloquer invocations</option>
          <option value="apply_player_status_draw">Statut joueur : sauter la pioche</option>
          <option value="reduce_incoming_damage_element">Réduire dégâts entrants (type)</option>
          <option value="reduce_incoming_damage_others">Réduire dégâts entrants (autres monstres)</option>
          <option value="modify_skill_cost">Réduire coût des sorts</option>
          <option value="require_zone_all_of">Contrainte engagement (type unique ZE)</option>
          <option value="periodic_every_n_turns">Effet périodique (tous les N tours)</option>
        </select>
        <button type="button" data-insert-template>Insérer</button>
      </div>
    </div>
  </details>
{% endmacro %}