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

{% block content %}
<form method="post" action="{{ action }}">

  <div class="section">
    <div class="section-title">Général</div>
    <div class="grid-2">
      <div class="field">
        <label class="field-label" for="name">Nom *</label>
        <input type="text" name="name" id="name" required value="{{ class.name }}">
      </div>
      <div class="field">
        <label class="field-label">Rôles</label>
        <div class="checkbox-group">
          {% for role in roles %}
            <label class="checkbox-item">
              <input type="checkbox" name="roles[]" value="{{ role.id }}"
                {{ class.roles and role.id in class.roles ? 'checked' }}>
              {{ role.name }}
            </label>
          {% else %}
            <span class="muted">Aucun rôle défini.</span>
          {% endfor %}
        </div>
      </div>
      <div class="field col-span-2">
        <label class="field-label">Description</label>
        <textarea name="description" rows="3" style="width:100%;resize:vertical">{{ class.description }}</textarea>
      </div>
      <div class="field col-span-2">
        <label class="field-label">Options</label>
        <label class="checkbox-item" style="margin-top:4px">
          <input type="checkbox" name="isAmbidextrous" value="1" {{ class.ambidextrous ? 'checked' }}>
          Ambidextre (peut équiper une arme en main gauche)
        </label>
        <label class="checkbox-item" style="margin-top:4px">
          <input type="checkbox" name="isAdvanced" value="1" {{ class.advanced ? 'checked' }}>
          Classe avancée (masquée à la création de personnage)
        </label>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Stats de base — Niveau 1</div>
    <div class="grid-4">
      {% set statLabels = {pvMax: 'PV Max', egMax: 'EG Max', attaque: 'Attaque', defense: 'Défense', arcane: 'Arcane', sagesse: 'Sagesse', vitesse: 'Vitesse', finesse: 'Finesse'} %}
      {% set statCss    = {pvMax: 'pv', egMax: 'eg', attaque: 'atq', defense: 'def', arcane: 'arc', sagesse: 'sag', vitesse: 'vit', finesse: 'fin'} %}
      {% for stat, label in statLabels %}
        {% set getter = 'get' ~ stat|capitalize %}
        <div class="field">
          <label class="field-label label-{{ statCss[stat] }}" for="base_{{ stat }}">{{ label }}</label>
          <input type="number" name="base_{{ stat }}" id="base_{{ stat }}" min="0"
                 value="{{ class.baseStats ? attribute(class.baseStats, getter) : 0 }}">
        </div>
      {% endfor %}
    </div>
  </div>

  <div class="section">
    <div class="section-title">Croissance par niveau</div>
    <div class="grid-4">
      {% for stat, label in statLabels %}
        <div class="field">
          <label class="field-label label-{{ statCss[stat] }}" for="growth_{{ stat }}">{{ label }}</label>
          <input type="number" name="growth_{{ stat }}" id="growth_{{ stat }}" min="0"
                 value="{{ class.statsGrowth[stat] ?? 0 }}">
        </div>
      {% endfor %}
    </div>
  </div>

  <div class="section">
    <div class="section-title">Évolution</div>
    <div class="grid-2" style="margin-bottom:14px">
      <div class="field">
        <label class="field-label" for="evolutionLevel">Niveau requis pour évoluer</label>
        <input type="number" name="evolutionLevel" id="evolutionLevel" min="1"
               value="{{ class.evolutionLevel ?? '' }}" placeholder="—">
        <span style="font-size:.75rem;color:var(--muted)">Laisser vide = pas de prérequis de niveau</span>
      </div>
    </div>
    {% if allClasses is empty %}
      <p style="color:var(--muted);font-size:.85em">Aucune autre classe disponible.</p>
    {% else %}
      <div class="field">
        <label class="field-label">Cette classe peut évoluer vers</label>
        <div class="checkbox-group" style="margin-top:6px">
          {% for other in allClasses %}
            <label class="checkbox-item">
              <input type="checkbox" name="evolvesTo[]" value="{{ other.id }}"
                     {{ other.id in class.evolvesTo ? 'checked' }}>
              {{ other.name }}{% if other.advanced %} <em style="color:var(--muted)">(avancée)</em>{% endif %}
            </label>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>

  <div class="section">
    <div class="section-title">Armes &amp; Armures utilisables</div>
    <div class="grid-2">
      <div class="field">
        <label class="field-label">Types d'armes</label>
        <div class="checkbox-group" style="margin-top:6px">
          {% for wt in weaponTypes %}
            <label class="checkbox-item">
              <input type="checkbox" name="usableWeapons[]" value="{{ wt.id }}"
                     {{ class.usableWeapons and wt.id in class.usableWeapons ? 'checked' }}>
              {{ wt.name }}
            </label>
          {% endfor %}
        </div>
      </div>
      <div class="field">
        <label class="field-label">Types d'armures</label>
        <div class="checkbox-group" style="margin-top:6px">
          {% for at in armorTypes %}
            <label class="checkbox-item">
              <input type="checkbox" name="usableArmors[]" value="{{ at.id }}"
                     {{ class.usableArmors and at.id in class.usableArmors ? 'checked' }}>
              {{ at.name }}
            </label>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Compétences apprises (niveau → compétence)</div>
    <div id="learnSpellsRows">
      {% if class.learnSpells %}
        {% for entry in class.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]">
              <option value="0">— Aucune —</option>
              {% for skill in skillMmos %}
                <option value="{{ skill.id }}" {{ skill.id == entry.skillId ? 'selected' }}>{{ skill.name }}</option>
              {% endfor %}
            </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 une compétence</button>
  </div>

  <div class="section">
    <div class="section-title">Types élémentaires</div>
    <div class="checkbox-group">
      {% for element in elements %}
        <label class="checkbox-item">
          <input type="checkbox" name="elementalTypes[]" value="{{ element.id }}"
            {{ class.elementalTypes and element.id in class.elementalTypes ? 'checked' }}>
          {{ element.name }}
        </label>
      {% else %}
        <span class="muted">Aucun élément défini.</span>
      {% endfor %}
    </div>
  </div>

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

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

<script>
(function () {
  const skillTpl = document.getElementById('tpl-skill-options');
  let rowIndex = {{ class.learnSpells ? class.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.min = '1';
    levelInput.max = '99';
    levelInput.name = `learnSpells[${rowIndex}][level]`;

    const select = document.createElement('select');
    select.name = `learnSpells[${rowIndex}][skillId]`;
    select.innerHTML = skillTpl.innerHTML;

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

    div.append(span, levelInput, select, btn);
    document.getElementById('learnSpellsRows').appendChild(div);
    rowIndex++;
  });
})();
</script>
{% endblock %}