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

{% block content %}
{% set gameNames = {0: 'CSI Forever', 1: 'CSII Forever', 2: 'CSI Rogue', 3: 'Narval Souls'} %}
<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; }

  /* ── Ordered picker (rôles, types élémentaux) ────────────────────────── */
  .ordered-add-select {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 7px 10px; color: var(--text); font-size: .9rem; min-width: 240px; margin-bottom: 10px;
  }
  .ordered-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .ordered-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  }
  .ordered-list .item-order {
    color: var(--accent); font-weight: 700; font-size: .85rem;
    min-width: 22px; text-align: center;
  }
  .ordered-list .item-name { flex: 1; color: var(--text); font-size: .9rem; }
  .ordered-list button {
    background: transparent; border: 1px solid var(--border); color: var(--text);
    padding: 2px 9px; cursor: pointer; border-radius: 4px; font-size: .85rem;
    transition: background .12s, border-color .12s;
  }
  .ordered-list button:hover { background: var(--surface); border-color: var(--accent2); }
  .ordered-list button.btn-remove { color: var(--danger); border-color: rgba(248,81,73,.4); }
  .ordered-list button.btn-remove:hover { background: rgba(248,81,73,.1); border-color: var(--danger); }

  .learn-spells-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .learn-spells-row input[type="number"] { width: 80px; flex-shrink: 0; }
  .learn-spells-row select { flex: 1; min-width: 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; }
</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" {{ character.gameId == 0 ? 'selected' }}>CSI Forever</option>
          <option value="1" {{ character.gameId == 1 ? 'selected' }}>CSII Forever</option>
          <option value="2" {{ character.gameId == 2 ? 'selected' }}>CSI Rogue</option>
          <option value="3" {{ character.gameId == 3 ? 'selected' }}>Narval Souls</option>
        </select>
      </div>
      <div class="field">
        <label class="field-label" for="name">Nom *</label>
        <input type="text" name="name" id="name" required value="{{ character.name }}">
      </div>
      <div class="field">
        <label class="field-label" for="title">Titre</label>
        <input type="text" name="title" id="title" value="{{ character.title }}">
      </div>
      <div class="field">
        <label class="field-label" for="height">Taille</label>
        <input type="text" name="height" id="height" value="{{ character.height }}" placeholder="ex: 1m72">
      </div>
      <div class="field">
        <label class="field-label" for="weight">Poids</label>
        <input type="text" name="weight" id="weight" value="{{ character.weight }}" placeholder="ex: 65 kg">
      </div>
      <div class="field col-span-2">
        <label class="field-label" for="biography">Biographie</label>
        <textarea name="biography" id="biography">{{ character.biography }}</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 character.appearance %}
          <img id="appearancePreview" src="{{ asset(character.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: character} %}
  {% include 'admin/_includes/caracteristics_fields.html.twig' with {entity: character} %}

  <div class="section">
    <div class="section-title">Rôles <span style="color:var(--muted);font-size:.78rem;font-weight:400;text-transform:none;letter-spacing:0">(ordre primaire → secondaire)</span></div>
    {% if characterRoles is empty %}
      <span style="color:var(--muted);font-size:.85rem">Aucun rôle défini. <a href="{{ path('admin_character_role_new') }}" style="color:var(--accent2)">Créer des rôles →</a></span>
    {% else %}
      <select id="addRole" class="ordered-add-select">
        <option value="">+ Ajouter un rôle…</option>
        {% for role in characterRoles %}
          <option value="{{ role.id }}">{{ role.name }}</option>
        {% endfor %}
      </select>
      <ul id="selectedRoles" class="ordered-list" data-field-name="roles">
        {% if character.roles %}
          {% for rid in character.roles %}
            {% for r in characterRoles|filter(r => r.id == rid) %}
              <li>
                <span class="item-order"></span>
                <span class="item-name">{{ r.name }}</span>
                <button type="button" class="btn-up" title="Monter">↑</button>
                <button type="button" class="btn-down" title="Descendre">↓</button>
                <button type="button" class="btn-remove" title="Retirer">✕</button>
                <input type="hidden" name="roles[]" value="{{ r.id }}">
              </li>
            {% endfor %}
          {% endfor %}
        {% endif %}
      </ul>
    {% endif %}
  </div>

  <div class="section">
    <div class="section-title">Armes utilisables</div>
    <div class="checkbox-group" id="weaponTypesGroup">
      {% for wt in weaponTypes %}
        <label class="checkbox-item" data-game="{{ wt.gameId }}">
          <input type="checkbox" name="usableWeapons[]" value="{{ wt.id }}"
            {{ character.usableWeapons and wt.id in character.usableWeapons ? 'checked' }}>
          {{ wt.name }}
        </label>
      {% else %}
        <span style="color:var(--muted);font-size:.85rem">Aucun type d'arme défini.</span>
      {% endfor %}
    </div>
  </div>

  <div class="section">
    <div class="section-title">Armures utilisables</div>
    <div class="checkbox-group" id="armorTypesGroup">
      {% for at in armorTypes %}
        <label class="checkbox-item" data-game="{{ at.gameId }}">
          <input type="checkbox" name="usableArmors[]" value="{{ at.id }}"
            {{ character.usableArmors and at.id in character.usableArmors ? 'checked' }}>
          {{ at.name }}
        </label>
      {% else %}
        <span style="color:var(--muted);font-size:.85rem">Aucun type d'armure défini.</span>
      {% endfor %}
    </div>
  </div>

  <div class="section" id="elementalTypesSection" {% if character.gameId == 0 %}style="display:none"{% endif %}>
    <div class="section-title">Types élémentaux <span style="color:var(--muted);font-size:.78rem;font-weight:400;text-transform:none;letter-spacing:0">(ordre primaire → secondaire)</span></div>
    <select id="addElement" class="ordered-add-select">
      <option value="">+ Ajouter un type…</option>
      {% for element in elements %}
        <option value="{{ element.id }}" data-game="{{ element.gameId }}">{{ element.name }}</option>
      {% endfor %}
    </select>
    <ul id="selectedElements" class="ordered-list" data-field-name="elementalTypes">
      {% if character.elementalTypes %}
        {% for eid in character.elementalTypes %}
          {% for e in elements|filter(e => e.id == eid) %}
            <li>
              <span class="item-order"></span>
              <span class="item-name">{{ e.name }}</span>
              <button type="button" class="btn-up" title="Monter">↑</button>
              <button type="button" class="btn-down" title="Descendre">↓</button>
              <button type="button" class="btn-remove" title="Retirer">✕</button>
              <input type="hidden" name="elementalTypes[]" value="{{ e.id }}">
            </li>
          {% endfor %}
        {% endfor %}
      {% endif %}
    </ul>
  </div>

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

  <div class="section" id="attributesSection">
    <div class="section-title">Valeurs d'attributs</div>
    <p style="color:var(--muted);font-size:.83rem;margin:0 0 12px">Gain de stat par point d'attribut investi (à partir du niveau 2).</p>
    <div class="grid-2">
      {% set attrLabels = {pvMax: 'PV Max', egMax: 'EG Max', attaque: 'Attaque', defense: 'Défense', arcane: 'Arcane', sagesse: 'Sagesse', vitesse: 'Vitesse', finesse: 'Finesse'} %}
      {% for key, label in attrLabels %}
        <div class="field">
          <label class="field-label" for="attributeValues_{{ key }}">{{ label }}</label>
          <input type="number" name="attributeValues_{{ key }}" id="attributeValues_{{ key }}" min="0"
            value="{{ character.attributeValues and key in character.attributeValues|keys ? character.attributeValues[key] : '' }}">
        </div>
      {% endfor %}
    </div>
  </div>

  <div class="section">
    <div class="section-title">Sorts appris (niveau → sort)</div>
    {% macro skill_options(skills, gameNames, selectedId) %}
      <option value="0">— Aucun —</option>
      {% set currentGameId = -1 %}
      {% for skill in skills %}
        {% if skill.gameId != currentGameId %}
          {% if currentGameId != -1 %}</optgroup>{% endif %}
          <optgroup label="{{ gameNames[skill.gameId] ?? ('Jeu #' ~ skill.gameId) }}" data-game="{{ skill.gameId }}">
          {% set currentGameId = skill.gameId %}
        {% endif %}
        <option value="{{ skill.id }}" data-game="{{ skill.gameId }}"{% if skill.id == selectedId %} selected{% endif %}>{{ skill.name }}</option>
      {% endfor %}
      {% if currentGameId != -1 %}</optgroup>{% endif %}
    {% endmacro %}
    {% import _self as macros %}

    <div id="learnSpellsRows">
      {% if character.learnSpells %}
        {% for entry in character.learnSpells %}
          <div class="learn-spells-row">
            <span style="color:var(--muted);font-size:.8rem;white-space:nowrap">Niv.</span>
            <input type="number" name="learnSpells[{{ loop.index0 }}][level]" min="1" max="99" value="{{ entry.level }}">
            <select name="learnSpells[{{ loop.index0 }}][skillId]">
              {{ macros.skill_options(skills, gameNames, entry.skillId) }}
            </select>
            <button type="button" class="btn-remove-row" onclick="this.closest('.learn-spells-row').remove()">✕</button>
          </div>
        {% endfor %}
      {% endif %}
    </div>
    <button type="button" class="btn-add-row" id="addLearnSpellRow">+ Ajouter un sort</button>
  </div>

  <div class="section">
    <div class="section-title">Apprentissage par Atouts</div>
    <p style="color:var(--muted);font-size:.83rem;margin:0 0 12px">Sorts appris via les Atouts (compteur D.D. et associés). Sans niveau.</p>
    <div id="learnByAtoutsRows">
      {% if character.learnByAtoutsSpells %}
        {% for skillId in character.learnByAtoutsSpells %}
          <div class="learn-spells-row">
            <select name="learnByAtoutsSpells[]">
              {{ macros.skill_options(skills, gameNames, skillId) }}
            </select>
            <button type="button" class="btn-remove-row" onclick="this.closest('.learn-spells-row').remove()">✕</button>
          </div>
        {% endfor %}
      {% endif %}
    </div>
    <button type="button" class="btn-add-row" id="addAtoutsRow">+ Ajouter un sort</button>
  </div>

  <div class="section">
    <div class="section-title">Passifs natifs</div>
    <p style="color:var(--muted);font-size:.83rem;margin:0 0 12px">Aptitudes passives innées du personnage (skills de type Passif). Un perso peut en cumuler plusieurs.</p>
    {% macro passive_options(skills, gameNames, selectedId) %}
      <option value="0">— Aucun —</option>
      {% set currentGameId = -1 %}
      {% for skill in skills %}
        {% if skill.gameId != currentGameId %}
          {% if currentGameId != -1 %}</optgroup>{% endif %}
          <optgroup label="{{ gameNames[skill.gameId] ?? ('Jeu #' ~ skill.gameId) }}" data-game="{{ skill.gameId }}">
          {% set currentGameId = skill.gameId %}
        {% endif %}
        <option value="{{ skill.id }}" data-game="{{ skill.gameId }}"{% if skill.id == selectedId %} selected{% endif %}>{{ skill.name }}</option>
      {% endfor %}
      {% if currentGameId != -1 %}</optgroup>{% endif %}
    {% endmacro %}
    {% import _self as passiveMacros %}
    <div id="nativePassivesRows">
      {% if character.nativePassives %}
        {% for passiveId in character.nativePassives %}
          <div class="learn-spells-row">
            <select name="nativePassives[]">
              {{ passiveMacros.passive_options(passiveSkills, gameNames, passiveId) }}
            </select>
            <button type="button" class="btn-remove-row" onclick="this.closest('.learn-spells-row').remove()">✕</button>
          </div>
        {% endfor %}
      {% endif %}
    </div>
    <button type="button" class="btn-add-row" id="addNativePassiveRow">+ Ajouter un passif</button>
  </div>

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

<template id="tpl-skill-options">
  {{ macros.skill_options(skills, gameNames, null) }}
</template>
<template id="tpl-passive-options">
  {{ passiveMacros.passive_options(passiveSkills, gameNames, null) }}
</template>

<script>
(function () {
  // ── Auto-suffix height/weight fields
  document.getElementById('height').addEventListener('blur', function () {
    const v = this.value.trim();
    if (v && !v.endsWith('m')) this.value = v + 'm';
  });
  document.getElementById('weight').addEventListener('blur', function () {
    const v = this.value.trim();
    if (v && !v.endsWith('kg')) this.value = v + 'kg';
  });

  // ── Filtrage dynamique par jeu sélectionné ──────────────────────────────
  const gameSelect = document.getElementById('gameId');

  /**
   * Met à jour la visibilité des éléments game-scoped.
   * @param {boolean} resetSelections  Si true, décoche/reset les valeurs orphelines (sur change).
   */
  function updateGameFiltering(resetSelections) {
    const gid = gameSelect.value;

    // Sections game-spécifiques
    const elemSection = document.getElementById('elementalTypesSection');
    if (elemSection) elemSection.style.display = (gid === '0') ? 'none' : '';
    const attrSection = document.getElementById('attributesSection');
    if (attrSection) attrSection.style.display = (gid === '3') ? 'none' : '';

    // Checkboxes (élément / weapon_type / armor_type) — affiche uniquement le bon jeu
    document.querySelectorAll('label.checkbox-item[data-game]').forEach(el => {
      const matches = el.dataset.game === gid;
      el.style.display = matches ? '' : 'none';
      if (resetSelections && !matches) {
        const cb = el.querySelector('input[type="checkbox"]');
        if (cb && cb.checked) cb.checked = false;
      }
    });

    // Optgroups + options (passive select + learnSpells selects)
    document.querySelectorAll('optgroup[data-game]').forEach(og => {
      og.style.display = (og.dataset.game === gid) ? '' : 'none';
    });
    document.querySelectorAll('option[data-game]').forEach(opt => {
      opt.style.display = (opt.dataset.game === gid) ? '' : 'none';
    });

    if (resetSelections) {
      document.querySelectorAll('select[name="nativePassives[]"], select[name^="learnSpells"], select[name="learnByAtoutsSpells[]"]').forEach(sel => {
        const opt = sel.selectedOptions[0];
        if (opt && opt.dataset.game && opt.dataset.game !== gid) {
          sel.value = opt.value === '0' ? '0' : ''; // '0' pour learnSpells (— Aucun —), '' pour passive
        }
      });
      // Vide la liste ordonnée des types élémentaux : leur jeu d'origine n'est plus le bon
      const selectedElements = document.getElementById('selectedElements');
      if (selectedElements) selectedElements.innerHTML = '';
      if (typeof refreshOrderedPickers === 'function') refreshOrderedPickers();
    }
  }

  gameSelect.addEventListener('change', () => updateGameFiltering(true));
  updateGameFiltering(false); // état initial sans toucher aux données chargées

  // ── Picker ordonné réutilisable (rôles, types élémentaux) ────────────────
  /**
   * Branche un picker "select + ordered list" :
   *  - le dropdown ajoute l'option sélectionnée à la fin de la liste
   *  - chaque item porte des boutons ↑↓✕ pour reordonner / retirer
   *  - les options déjà présentes dans la liste sont cachées du dropdown
   */
  function setupOrderedPicker(selectId, listId, fieldName) {
    const sel  = document.getElementById(selectId);
    const list = document.getElementById(listId);
    if (!sel || !list) return null;

    function refresh() {
      // Renumérote les items
      list.querySelectorAll('.item-order').forEach((el, i) => el.textContent = (i + 1));
      // Cache les options déjà ajoutées + celles d'un autre jeu (pour element)
      const taken = new Set();
      list.querySelectorAll('input[type="hidden"]').forEach(i => taken.add(i.value));
      Array.from(sel.options).forEach(opt => {
        if (opt.value === '') return;
        const wrongGame = opt.dataset.game && opt.dataset.game !== gameSelect.value;
        const already   = taken.has(opt.value);
        opt.hidden   = already || wrongGame;
        opt.disabled = already || wrongGame;
      });
    }

    sel.addEventListener('change', () => {
      const value = sel.value;
      if (!value) return;
      const opt = sel.options[sel.selectedIndex];
      const label = opt.textContent.trim();

      const li = document.createElement('li');
      li.innerHTML = `
        <span class="item-order"></span>
        <span class="item-name"></span>
        <button type="button" class="btn-up" title="Monter">↑</button>
        <button type="button" class="btn-down" title="Descendre">↓</button>
        <button type="button" class="btn-remove" title="Retirer">✕</button>
        <input type="hidden" name="${fieldName}[]" value="">
      `;
      li.querySelector('.item-name').textContent = label;
      li.querySelector('input').value = value;
      list.appendChild(li);

      sel.value = '';
      refresh();
    });

    list.addEventListener('click', (e) => {
      const btn = e.target.closest('button');
      if (!btn) return;
      const li = btn.closest('li');
      if (!li) return;
      if (btn.classList.contains('btn-up')) {
        const prev = li.previousElementSibling;
        if (prev) li.parentNode.insertBefore(li, prev);
      } else if (btn.classList.contains('btn-down')) {
        const next = li.nextElementSibling;
        if (next) li.parentNode.insertBefore(next, li);
      } else if (btn.classList.contains('btn-remove')) {
        li.remove();
      }
      refresh();
    });

    refresh();
    return refresh;
  }

  const refreshRoles    = setupOrderedPicker('addRole',    'selectedRoles',    'roles');
  const refreshElements = setupOrderedPicker('addElement', 'selectedElements', 'elementalTypes');
  function refreshOrderedPickers() {
    if (refreshRoles)    refreshRoles();
    if (refreshElements) refreshElements();
  }
  refreshOrderedPickers();

  // ── 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 learn-spells rows
  const skillTpl = document.getElementById('tpl-skill-options');
  let rowIndex = {{ character.learnSpells ? character.learnSpells|length : 0 }};

  document.getElementById('addLearnSpellRow').addEventListener('click', () => {
    const div = document.createElement('div');
    div.className = 'learn-spells-row';

    const span = document.createElement('span');
    span.style.cssText = 'color:var(--muted);font-size:.8rem;white-space:nowrap';
    span.textContent = 'Niv.';

    const levelInput = document.createElement('input');
    levelInput.type = 'number';
    levelInput.name = `learnSpells[${rowIndex}][level]`;
    levelInput.min = '1';
    levelInput.max = '99';

    const select = document.createElement('select');
    select.name = `learnSpells[${rowIndex}][skillId]`;
    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(span, levelInput, select, removeBtn);
    document.getElementById('learnSpellsRows').appendChild(div);
    rowIndex++;
    updateGameFiltering(false);
  });

  // ── Dynamic learn-by-atouts rows (skill picker seul, sans niveau)
  document.getElementById('addAtoutsRow').addEventListener('click', () => {
    const div = document.createElement('div');
    div.className = 'learn-spells-row';

    const select = document.createElement('select');
    select.name = 'learnByAtoutsSpells[]';
    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('learnByAtoutsRows').appendChild(div);
    updateGameFiltering(false);
  });

  // ── Dynamic native-passive rows (skill de type Passif, multi)
  const passiveTpl = document.getElementById('tpl-passive-options');
  document.getElementById('addNativePassiveRow').addEventListener('click', () => {
    const div = document.createElement('div');
    div.className = 'learn-spells-row';

    const select = document.createElement('select');
    select.name = 'nativePassives[]';
    select.innerHTML = passiveTpl.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('nativePassivesRows').appendChild(div);
    updateGameFiltering(false);
  });
})();
</script>
{% endblock %}