{% 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><a href="{{ path('admin_csiwo_quest_step_index', {id: quest.id}) }}" class="breadcrumb-link">{{ quest.name }}</a>
  <span class="sep">/</span><span class="breadcrumb-text">{{ title }}</span>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .dyn-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
  .dyn-row select.row-type { width: 190px; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
  .dyn-row .row-fields { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
  .dyn-row .row-label-w { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 100px; }
  .dyn-row .row-label-w label { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  .dyn-row .row-label-w.narrow { flex: 0 0 100px; }
  .section-title-row { display: flex; align-items: center; gap: 12px; }
</style>
{% endblock %}

{% block content %}
<form method="post" action="{{ action }}" id="stepForm">
  <input type="hidden" name="objectives" id="objectivesHidden">

  <div class="section">
    <div class="section-title">Général</div>
    <div class="grid-2">
      <div class="field">
        <label class="field-label" for="title">Titre *</label>
        <input type="text" name="title" id="title" required value="{{ step.title }}">
      </div>
      <div class="field">
        <label class="field-label" for="sortOrder">Ordre d'affichage</label>
        <input type="number" name="sortOrder" id="sortOrder" min="0" value="{{ step.sortOrder }}">
      </div>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Zone déclencheur</div>
    <div class="field">
      <select name="triggerZoneId">
        <option value="">— Aucune —</option>
        {% for zone in zones %}
          <option value="{{ zone.id }}" {{ step.triggerZone and step.triggerZone.id == zone.id ? 'selected' }}>
            {{ zone.map.name }} / {{ zone.name }}
          </option>
        {% endfor %}
      </select>
      <p style="font-size:.75rem;color:var(--muted);margin-top:4px">Entrer dans cette zone active l'étape de quête.</p>
    </div>
  </div>

  <div class="section">
    <div class="section-title">Dialogues associés</div>
    <div class="grid-2">
      <div class="field">
        <label class="field-label">À l'entrée dans la zone déclencheur</label>
        <select name="onEnterDialogId">
          <option value="">— Aucun —</option>
          {% for dialog in dialogs %}
            <option value="{{ dialog.id }}" {{ step.onEnterDialog and step.onEnterDialog.id == dialog.id ? 'selected' }}>
              {{ dialog.name }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label class="field-label">À la complétion de l'étape</label>
        <select name="onCompleteDialogId">
          <option value="">— Aucun —</option>
          {% for dialog in dialogs %}
            <option value="{{ dialog.id }}" {{ step.onCompleteDialog and step.onCompleteDialog.id == dialog.id ? 'selected' }}>
              {{ dialog.name }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  {# ── Objectifs ── #}
  <div class="section">
    <div class="section-title section-title-row">
      <span>Objectifs</span>
      <button type="button" class="btn btn-sm btn-edit" id="addObjBtn">+ Ajouter un objectif</button>
    </div>
    <div id="objList"></div>
    <p id="objEmpty" style="color:var(--muted);font-size:.82rem;font-style:italic;display:none">Aucun objectif défini pour cette étape.</p>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Enregistrer</button>
    <a href="{{ path('admin_csiwo_quest_step_index', {id: quest.id}) }}" class="btn btn-cancel">Annuler</a>
  </div>
</form>

<script>
(function () {
  /* ── Objective type definitions ── */
  var OBJ_TYPES = {
    reach_zone:    { label: 'Atteindre une zone',    fields: [{ key: 'zoneId',   type: 'number', label: 'ID zone' }] },
    talk_to_npc:   { label: 'Parler à un PNJ',       fields: [{ key: 'zoneId', type: 'number', label: 'ID de la zone (MapZone)' }, { key: 'dialogId', type: 'number', label: 'ID dialogue de quête (optionnel)' }] },
    collect_item:  { label: 'Collecter un objet',    fields: [{ key: 'itemId',   type: 'number', label: 'ID objet' }, { key: 'qty', type: 'number', label: 'Qté', def: '1', narrow: true }] },
    defeat_enemy:  { label: 'Vaincre des ennemis',   fields: [{ key: 'enemy_id', type: 'number', label: 'ID ennemi (ou laisser vide)' }, { key: 'enemy_category', type: 'text', label: 'Catégorie (ou laisser vide)' }, { key: 'count', type: 'number', label: 'Nombre', def: '1', narrow: true }] },
    interact:      { label: 'Interagir avec objet',  fields: [{ key: 'interactId', type: 'text', label: 'ID interaction' }, { key: 'description', type: 'text', label: 'Description cible' }] }
  };

  var INIT = {{ step.objectives ? step.objectives|json_encode|raw : '[]' }};
  var objs = Array.isArray(INIT) ? INIT.slice() : [];

  var objList  = document.getElementById('objList');
  var objEmpty = document.getElementById('objEmpty');
  var hidden   = document.getElementById('objectivesHidden');

  function renderObjs() {
    objList.innerHTML = '';
    objEmpty.style.display = objs.length ? 'none' : '';

    objs.forEach(function (obj, i) {
      var row = document.createElement('div');
      row.className = 'dyn-row';

      /* type select */
      var typeSelect = document.createElement('select');
      typeSelect.className = 'row-type';
      Object.keys(OBJ_TYPES).forEach(function (k) {
        var opt = document.createElement('option');
        opt.value = k; opt.textContent = OBJ_TYPES[k].label;
        if (obj.type === k) opt.selected = true;
        typeSelect.appendChild(opt);
      });
      typeSelect.addEventListener('change', function () {
        var lbl = objs[i].label || '';
        objs[i] = { type: typeSelect.value, label: lbl };
        renderObjs();
      });

      /* adaptive fields */
      var fields = document.createElement('div');
      fields.className = 'row-fields';

      /* label field (always present) */
      var lblWrap = document.createElement('div'); lblWrap.className = 'row-label-w';
      var lblLbl  = document.createElement('label'); lblLbl.textContent = 'Texte affiché';
      var lblInp  = document.createElement('input'); lblInp.type = 'text';
      lblInp.value = obj.label || ''; lblInp.placeholder = 'Ex: Rendre-vous au marché';
      lblInp.addEventListener('input', function () { objs[i].label = lblInp.value; });
      lblWrap.appendChild(lblLbl); lblWrap.appendChild(lblInp);
      fields.appendChild(lblWrap);

      /* type-specific fields */
      var def = OBJ_TYPES[obj.type] || OBJ_TYPES.reach_zone;
      def.fields.forEach(function (f) {
        var wrap = document.createElement('div');
        wrap.className = 'row-label-w' + (f.narrow ? ' narrow' : '');
        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 = obj[f.key] !== undefined ? obj[f.key] : (f.def || '');
        inp.placeholder = f.label;
        inp.addEventListener('input', function () {
          objs[i][f.key] = f.type === 'number' ? (inp.value !== '' ? parseInt(inp.value) : '') : inp.value;
        });
        wrap.appendChild(lbl); wrap.appendChild(inp);
        fields.appendChild(wrap);
      });

      /* delete */
      var del = document.createElement('button');
      del.type = 'button'; del.className = 'btn btn-sm btn-delete'; del.textContent = '✕';
      del.style.alignSelf = 'flex-start'; del.style.marginTop = '2px';
      del.addEventListener('click', function () { objs.splice(i, 1); renderObjs(); });

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

  document.getElementById('addObjBtn').addEventListener('click', function () {
    objs.push({ type: 'reach_zone', label: '', zoneId: '' });
    renderObjs();
  });

  document.getElementById('stepForm').addEventListener('submit', function () {
    hidden.value = JSON.stringify(objs);
  });

  renderObjs();
  if (!objs.length) objEmpty.style.display = '';
})();
</script>
{% endblock %}