{% 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_quest_index') }}" class="breadcrumb-link">Quêtes</a>
  <span class="sep">/</span><span class="breadcrumb-text">{{ title }}</span>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .dyn-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .dyn-row select.row-type { width: 200px; flex-shrink: 0; }
  .dyn-row .row-fields { display: flex; gap: 6px; flex: 1; align-items: center; flex-wrap: wrap; }
  .dyn-row .row-fields input { flex: 1; min-width: 90px; }
  .dyn-row .row-fields label { font-size: .72rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
  .dyn-row .row-fields .row-label-w { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 90px; }
  .reward-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .reward-items-header { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; margin-top: 4px; }
  .section-title-row { display: flex; align-items: center; gap: 12px; }
</style>
{% endblock %}

{% block content %}
<form method="post" action="{{ action }}" id="questForm">
  <input type="hidden" name="preConditions" id="preConditionsHidden">
  <input type="hidden" name="rewards"       id="rewardsHidden">

  <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="{{ quest.name }}">
      </div>
      <div class="field">
        <label class="field-label" for="slug">Slug *</label>
        <input type="text" name="slug" id="slug" required value="{{ quest.slug }}"
               pattern="[a-z0-9\-]+" title="Minuscules, chiffres et tirets uniquement">
      </div>
      <div class="field">
        <label class="field-label" for="givenBy">Donné par (PNJ)</label>
        <input type="text" name="givenBy" id="givenBy" value="{{ quest.givenBy }}" placeholder="ex: Garde Elric, Marchande Lira…">
      </div>
      <div class="field">
        <label class="field-label" for="location">Zone / lieu</label>
        <input type="text" name="location" id="location" value="{{ quest.location }}" placeholder="ex: Village de Brynn, Forêt de l'Oubli…">
      </div>
      <div class="field">
        <label class="field-label" for="introDialogId">Dialogue d'introduction</label>
        <select name="introDialogId" id="introDialogId">
          <option value="">— Aucun —</option>
          {% for dialog in dialogs %}
            <option value="{{ dialog.id }}" {{ quest.introDialog and quest.introDialog.id == dialog.id ? 'selected' }}>
              {{ dialog.name }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="field" style="display:flex;align-items:flex-end;padding-bottom:4px;flex-direction:column;align-items:flex-start;gap:4px">
        <label class="checkbox-item">
          <input type="checkbox" name="isActive" value="1" {{ quest.active ? 'checked' }}>
          Quête active
        </label>
        <label class="checkbox-item" title="Si coché, la quête doit être rendue manuellement à un tableau de quêtes (zone type quest_board avec scope = location de cette quête).">
          <input type="checkbox" name="requiresTurnIn" value="1" {{ quest.requiresTurnIn ? 'checked' }}>
          Rendu-compte explicite (tableau)
        </label>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Description</div>
    <div class="field">
      <textarea name="description" rows="4">{{ quest.description }}</textarea>
    </div>
  </div>

  {# ── Conditions préalables ── #}
  <div class="section">
    <div class="section-title section-title-row">
      <span>Conditions préalables</span>
      <button type="button" class="btn btn-sm btn-edit" id="addCondBtn">+ Ajouter une condition</button>
    </div>
    <div id="condList"></div>
    <p id="condEmpty" style="color:var(--muted);font-size:.82rem;font-style:italic;display:none">Aucune condition — la quête est accessible à tous.</p>
  </div>

  {# ── Récompenses ── #}
  <div class="section">
    <div class="section-title">Récompenses</div>
    <div class="reward-numbers">
      <div class="field">
        <label class="field-label">XP</label>
        <input type="number" id="rewardXp" min="0" value="0" placeholder="0">
      </div>
      <div class="field">
        <label class="field-label">Or</label>
        <input type="number" id="rewardGold" min="0" value="0" placeholder="0">
      </div>
      <div class="field">
        <label class="field-label">Slots d'inventaire</label>
        <input type="number" id="rewardInvExpansion" min="0" value="0" placeholder="0">
      </div>
    </div>
    <div class="reward-items-header">Objets récompensés</div>
    <div id="rewardItemList"></div>
    <button type="button" class="btn btn-sm btn-edit" id="addRewardItemBtn">+ Ajouter un objet</button>
    <div class="reward-items-header" style="margin-top:14px">
      Équipements récompensés
      <span class="field-hint"> — une instance sera générée avec affixes aléatoires</span>
    </div>
    <div id="rewardEquipList"></div>
    <button type="button" class="btn btn-sm btn-edit" id="addRewardEquipBtn">+ Ajouter un équipement</button>
  </div>

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

<script>
(function () {
  /* ── slug ── */
  var nameEl = document.getElementById('name');
  var slugEl = document.getElementById('slug');
  var slugEdited = slugEl.value !== '';
  function toSlug(s) {
    return s.normalize('NFD').replace(/[̀-ͯ]/g,'')
      .toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');
  }
  slugEl.addEventListener('input', function () { slugEdited = true; });
  nameEl.addEventListener('input', function () { if (!slugEdited) slugEl.value = toSlug(nameEl.value); });

  /* ── conditions ── */
  var COND_TYPES = {
    min_level:         { label: 'Niveau minimum',       fields: [{ key: 'value', type: 'number', label: 'Niveau' }] },
    quest_complete:    { label: 'Quête terminée',        fields: [{ key: 'questSlug', type: 'text',   label: 'Slug de quête' }] },
    item_in_inventory: { label: 'Objet en inventaire',  fields: [{ key: 'itemId', type: 'number', label: 'ID objet' }, { key: 'qty', type: 'number', label: 'Qté', def: '1' }] },
    class_is:          { label: 'Classe du personnage', fields: [{ key: 'classId', type: 'number', label: 'ID classe' }] }
  };

  var INIT_COND = {{ quest.preConditions ? quest.preConditions|json_encode|raw : 'null' }};
  var conds = Array.isArray(INIT_COND) ? INIT_COND.slice() : [];

  var condList = document.getElementById('condList');
  var condEmpty = document.getElementById('condEmpty');

  function renderConds() {
    condList.innerHTML = '';
    condEmpty.style.display = conds.length ? 'none' : '';
    conds.forEach(function (cond, i) {
      var row = document.createElement('div');
      row.className = 'dyn-row';

      var typeSelect = document.createElement('select');
      typeSelect.className = 'row-type';
      Object.keys(COND_TYPES).forEach(function (k) {
        var opt = document.createElement('option');
        opt.value = k; opt.textContent = COND_TYPES[k].label;
        if (cond.type === k) opt.selected = true;
        typeSelect.appendChild(opt);
      });
      typeSelect.addEventListener('change', function () {
        conds[i] = { type: typeSelect.value };
        renderConds();
      });

      var fields = document.createElement('div');
      fields.className = 'row-fields';
      var def = COND_TYPES[cond.type] || COND_TYPES.min_level;
      def.fields.forEach(function (f) {
        var wrap = document.createElement('div');
        wrap.className = 'row-label-w';
        var lbl = document.createElement('label');
        lbl.textContent = f.label;
        var inp = document.createElement('input');
        inp.type = f.type;
        if (f.type === 'number') inp.min = '0';
        inp.value = cond[f.key] !== undefined ? cond[f.key] : (f.def || '');
        inp.placeholder = f.label;
        inp.addEventListener('input', function () {
          conds[i][f.key] = f.type === 'number' ? (inp.value !== '' ? parseInt(inp.value) : '') : inp.value;
        });
        wrap.appendChild(lbl); wrap.appendChild(inp);
        fields.appendChild(wrap);
      });

      var del = document.createElement('button');
      del.type = 'button'; del.className = 'btn btn-sm btn-delete';
      del.textContent = '✕';
      del.addEventListener('click', function () { conds.splice(i, 1); renderConds(); });

      row.appendChild(typeSelect); row.appendChild(fields); row.appendChild(del);
      condList.appendChild(row);
    });
  }

  document.getElementById('addCondBtn').addEventListener('click', function () {
    conds.push({ type: 'min_level', value: 1 });
    renderConds();
  });

  /* ── rewards ── */
  var INIT_REW = {{ quest.rewards ? quest.rewards|json_encode|raw : 'null' }};
  var xpEl     = document.getElementById('rewardXp');
  var goldEl   = document.getElementById('rewardGold');
  var invExpEl = document.getElementById('rewardInvExpansion');
  if (INIT_REW && typeof INIT_REW === 'object') {
    xpEl.value     = INIT_REW.xp                || 0;
    goldEl.value   = INIT_REW.gold              || 0;
    invExpEl.value = INIT_REW.inventoryExpansion || 0;
  }

  var rewardItems = (INIT_REW && Array.isArray(INIT_REW.items)) ? INIT_REW.items.slice() : [];
  var rewardEquip = (INIT_REW && Array.isArray(INIT_REW.equipment)) ? INIT_REW.equipment.slice() : [];
  var rewardItemList = document.getElementById('rewardItemList');
  var rewardEquipList = document.getElementById('rewardEquipList');

  function renderRewardItems() {
    rewardItemList.innerHTML = '';
    rewardItems.forEach(function (item, i) {
      var row = document.createElement('div');
      row.className = 'dyn-row';

      var idWrap = document.createElement('div'); idWrap.className = 'row-label-w'; idWrap.style.flex = '1';
      var idLbl = document.createElement('label'); idLbl.textContent = 'ID objet';
      var idInp = document.createElement('input'); idInp.type = 'number'; idInp.min = '1';
      idInp.value = item.itemId || ''; idInp.placeholder = 'ID';
      idInp.addEventListener('input', function () { rewardItems[i].itemId = parseInt(idInp.value) || 0; });
      idWrap.appendChild(idLbl); idWrap.appendChild(idInp);

      var qtyWrap = document.createElement('div'); qtyWrap.className = 'row-label-w'; qtyWrap.style.width = '90px'; qtyWrap.style.flexShrink = '0';
      var qtyLbl = document.createElement('label'); qtyLbl.textContent = 'Quantité';
      var qtyInp = document.createElement('input'); qtyInp.type = 'number'; qtyInp.min = '1';
      qtyInp.value = item.qty || 1; qtyInp.placeholder = '1';
      qtyInp.addEventListener('input', function () { rewardItems[i].qty = parseInt(qtyInp.value) || 1; });
      qtyWrap.appendChild(qtyLbl); qtyWrap.appendChild(qtyInp);

      var del = document.createElement('button');
      del.type = 'button'; del.className = 'btn btn-sm btn-delete'; del.textContent = '✕';
      del.addEventListener('click', function () { rewardItems.splice(i, 1); renderRewardItems(); });

      row.appendChild(idWrap); row.appendChild(qtyWrap); row.appendChild(del);
      rewardItemList.appendChild(row);
    });
  }

  document.getElementById('addRewardItemBtn').addEventListener('click', function () {
    rewardItems.push({ itemId: 0, qty: 1 });
    renderRewardItems();
  });

  function renderRewardEquip() {
    rewardEquipList.innerHTML = '';
    rewardEquip.forEach(function (entry, i) {
      var row = document.createElement('div');
      row.className = 'dyn-row';

      var typeWrap = document.createElement('div'); typeWrap.className = 'row-label-w'; typeWrap.style.width = '140px'; typeWrap.style.flexShrink = '0';
      var typeLbl = document.createElement('label'); typeLbl.textContent = 'Type';
      var typeSelect = document.createElement('select');
      [['weapon', 'Arme'], ['armor', 'Armure']].forEach(function (pair) {
        var opt = document.createElement('option');
        opt.value = pair[0]; opt.textContent = pair[1];
        if (entry.type === pair[0]) opt.selected = true;
        typeSelect.appendChild(opt);
      });
      typeSelect.addEventListener('change', function () { rewardEquip[i].type = typeSelect.value; });
      typeWrap.appendChild(typeLbl); typeWrap.appendChild(typeSelect);

      var idWrap = document.createElement('div'); idWrap.className = 'row-label-w'; idWrap.style.flex = '1';
      var idLbl = document.createElement('label'); idLbl.textContent = 'ID de base';
      var idInp = document.createElement('input'); idInp.type = 'number'; idInp.min = '1';
      idInp.value = entry.baseId || ''; idInp.placeholder = 'ID';
      idInp.addEventListener('input', function () { rewardEquip[i].baseId = parseInt(idInp.value) || 0; });
      idWrap.appendChild(idLbl); idWrap.appendChild(idInp);

      var del = document.createElement('button');
      del.type = 'button'; del.className = 'btn btn-sm btn-delete'; del.textContent = '✕';
      del.addEventListener('click', function () { rewardEquip.splice(i, 1); renderRewardEquip(); });

      row.appendChild(typeWrap); row.appendChild(idWrap); row.appendChild(del);
      rewardEquipList.appendChild(row);
    });
  }

  document.getElementById('addRewardEquipBtn').addEventListener('click', function () {
    rewardEquip.push({ type: 'weapon', baseId: 0 });
    renderRewardEquip();
  });

  /* ── submit serialization ── */
  document.getElementById('questForm').addEventListener('submit', function () {
    document.getElementById('preConditionsHidden').value = conds.length ? JSON.stringify(conds) : 'null';
    var validEquip = rewardEquip.filter(function (e) { return e.baseId > 0; });
    var invExp  = parseInt(invExpEl.value) || 0;
    var rewards = {
      xp:    parseInt(xpEl.value)   || 0,
      gold:  parseInt(goldEl.value) || 0,
      items: rewardItems.filter(function (it) { return it.itemId > 0; })
    };
    if (invExp > 0) rewards.inventoryExpansion = invExp;
    if (validEquip.length) rewards.equipment = validEquip;
    document.getElementById('rewardsHidden').value = JSON.stringify(rewards);
  });

  renderConds();
  renderRewardItems();
  renderRewardEquip();
})();
</script>
{% endblock %}