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

{% block content %}
<style>
  .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); }
  #appearancePreview { max-width: 160px; max-height: 160px; border-radius: 6px; object-fit: contain; background: var(--bg); display: block; }

  .dyn-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .dyn-row select { flex: 1; min-width: 0; }
  .dyn-row input[type="number"] { width: 80px; flex-shrink: 0; }
  .dyn-row .prob-input { width: 90px; flex-shrink: 0; }
  .btn-remove-row { background: var(--danger); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: .8rem; flex-shrink: 0; }
  .btn-add-row { background: transparent; color: var(--accent2); border: 1px solid var(--accent2); border-radius: 6px; padding: 5px 14px; cursor: pointer; font-size: .82rem; font-weight: 600; margin-top: 6px; }
  .row-label { color: var(--muted); font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
</style>

<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="gameId">Jeu</label>
        <select name="gameId" id="gameId" style="max-width:260px">
          <option value="0" {{ enemy.gameId == 0 ? 'selected' }}>CSI Forever</option>
          <option value="1" {{ enemy.gameId == 1 ? 'selected' }}>CSII Forever</option>
          <option value="2" {{ enemy.gameId == 2 ? 'selected' }}>CSI Rogue</option>
          <option value="3" {{ enemy.gameId == 3 ? 'selected' }}>Narval Souls</option>
        </select>
      </div>
      <div class="field col-span-2">
        <label class="field-label" for="name">Nom *</label>
        <input type="text" name="name" id="name" required value="{{ enemy.name }}">
      </div>
      <div class="field col-span-2">
        <label class="field-label" for="description">Description</label>
        <textarea name="description" id="description">{{ enemy.description }}</textarea>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Apparence</div>
    <div class="field">
      <label class="field-label">Image</label>
      <div class="drop-zone" id="appearanceDropZone">
        {% if enemy.appearance %}
          <img id="appearancePreview" src="{{ asset(enemy.appearance) }}" alt="Apparence actuelle">
        {% else %}
          <img id="appearancePreview" style="display:none" alt="">
        {% endif %}
        <div class="drop-zone-label">
          <strong>Glissez une image ici</strong> ou cliquez pour sélectionner
        </div>
        <input type="file" name="appearance" id="appearanceFile" accept="image/*" style="display:none">
      </div>
    </div>
  </div>

  {% include 'admin/_includes/stats_fields.html.twig' with {entity: enemy} %}
  {% include 'admin/_includes/caracteristics_fields.html.twig' with {entity: enemy, noXpGain: true} %}

  <div class="section">
    <div class="section-title">Type</div>
    <div class="checkbox-group">
      <label class="checkbox-item"><input type="checkbox" name="isBoss" value="1" {{ enemy.isBoss ? 'checked' }}> Boss</label>
      <label class="checkbox-item"><input type="checkbox" name="isSuperboss" value="1" {{ enemy.isSuperboss ? 'checked' }}> Superboss</label>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Récompenses</div>
    <div class="grid-4">
      <div class="field">
        <label class="field-label" for="xpGainBase">XP</label>
        <input type="number" name="xpGainBase" id="xpGainBase" min="0" value="{{ enemy.xpGainBase ?? '' }}">
      </div>
      <div class="field">
        <label class="field-label" for="moneyGain">Argent</label>
        <input type="number" name="moneyGain" id="moneyGain" min="0" value="{{ enemy.moneyGain ?? '' }}">
      </div>
    </div>
  </div>

  {% include 'admin/_includes/elemental_resistance_field.html.twig' with {fieldName: 'elementalResistance', sectionTitle: 'Résistances élémentales', currentValue: enemy.elementalResistance, elements: elements} %}
  {% include 'admin/_includes/status_immunity_field.html.twig' with {fieldName: 'statusImmunity', sectionTitle: 'Immunités aux statuts', currentValue: enemy.statusImmunity, statuses: statuses} %}
  {% include 'admin/_includes/grants_skills_field.html.twig' with {fieldName: 'grantsSkills', sectionTitle: 'Compétences débloquées', currentValue: enemy.grantsSkills, skills: skills} %}

  <div class="section">
    <div class="section-title">Sorts utilisés</div>
    <div id="learnSpellsRows">
      {% if enemy.learnSpells %}
        {% for skillId in enemy.learnSpells %}
          <div class="dyn-row">
            <select name="learnSpells[]">
              <option value="0">— Aucun —</option>
              {% for skill in skills %}
                <option value="{{ skill.id }}" {{ skill.id == skillId ? 'selected' }}>{{ skill.name }}</option>
              {% endfor %}
            </select>
            <button type="button" class="btn-remove-row" onclick="this.closest('.dyn-row').remove()">✕</button>
          </div>
        {% endfor %}
      {% endif %}
    </div>
    <button type="button" class="btn-add-row" id="addSpellRow">+ Ajouter un sort</button>
  </div>

  <div class="section">
    <div class="section-title">Drops</div>
    <div id="dropsRows">
      {% if enemy.drops %}
        {% for i, drop in enemy.drops %}
          <div class="dyn-row">
            <select name="drops[{{ i }}][type]">
              <option value="weapon" {{ drop.type == 'weapon' ? 'selected' }}>Arme</option>
              <option value="item"   {{ drop.type == 'item'   ? 'selected' }}>Objet</option>
              <option value="armor"  {{ drop.type == 'armor'  ? 'selected' }}>Armure</option>
            </select>
            <span class="row-label">ID</span>
            <input type="number" name="drops[{{ i }}][id]" min="1" value="{{ drop.id }}">
            <span class="row-label">Prob.</span>
            <input type="number" class="prob-input" name="drops[{{ i }}][probability]"
                   min="0" max="1" step="0.01" value="{{ drop.probability }}">
            <button type="button" class="btn-remove-row" onclick="this.closest('.dyn-row').remove()">✕</button>
          </div>
        {% endfor %}
      {% endif %}
    </div>
    <button type="button" class="btn-add-row" id="addDropRow">+ Ajouter un drop</button>
  </div>

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

<template id="tpl-skill-options">
  <option value="0">— Aucun —</option>
  {% for skill in skills %}
    <option value="{{ skill.id }}">{{ skill.name }}</option>
  {% endfor %}
</template>

<script>
(function () {
  // ── Drag-and-drop appearance upload
  const zone    = document.getElementById('appearanceDropZone');
  const input   = document.getElementById('appearanceFile');
  const preview = document.getElementById('appearancePreview');

  zone.addEventListener('click', (e) => { if (e.target !== input) input.click(); });
  zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('drag-over'); });
  zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
  zone.addEventListener('drop', (e) => {
    e.preventDefault();
    zone.classList.remove('drag-over');
    const file = e.dataTransfer.files[0];
    if (file && file.type.startsWith('image/')) {
      setPreview(file);
      const dt = new DataTransfer();
      dt.items.add(file);
      input.files = dt.files;
    }
  });
  input.addEventListener('change', () => { if (input.files[0]) setPreview(input.files[0]); });
  function setPreview(file) { preview.src = URL.createObjectURL(file); preview.style.display = 'block'; }

  // ── Dynamic spell rows
  const skillTpl = document.getElementById('tpl-skill-options');

  document.getElementById('addSpellRow').addEventListener('click', () => {
    const div = document.createElement('div');
    div.className = 'dyn-row';

    const select = document.createElement('select');
    select.name = 'learnSpells[]';
    select.innerHTML = skillTpl.innerHTML;

    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'btn-remove-row';
    removeBtn.textContent = '✕';
    removeBtn.addEventListener('click', () => div.remove());

    div.append(select, removeBtn);
    document.getElementById('learnSpellsRows').appendChild(div);
  });

  // ── Dynamic drop rows
  let dropIndex = {{ enemy.drops ? enemy.drops|length : 0 }};

  document.getElementById('addDropRow').addEventListener('click', () => {
    const div = document.createElement('div');
    div.className = 'dyn-row';
    div.innerHTML = `
      <select name="drops[${dropIndex}][type]">
        <option value="weapon">Arme</option>
        <option value="item">Objet</option>
        <option value="armor">Armure</option>
      </select>
      <span class="row-label">ID</span>
      <input type="number" name="drops[${dropIndex}][id]" min="1" value="">
      <span class="row-label">Prob.</span>
      <input type="number" class="prob-input" name="drops[${dropIndex}][probability]" min="0" max="1" step="0.01" value="">
      <button type="button" class="btn-remove-row" onclick="this.closest('.dyn-row').remove()">✕</button>
    `;
    document.getElementById('dropsRows').appendChild(div);
    dropIndex++;
  });
})();
</script>
{% endblock %}