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

{% block stylesheets %}
{{ parent() }}
<style>
  .dialog-node {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px 16px; margin-bottom: 10px; position: relative;
  }
  .dialog-node-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .node-id-badge {
    font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--surface);
    border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
  }
  .dialog-node .node-speaker { flex: 1; }
  .mode-toggle { display: flex; gap: 4px; margin: 8px 0 10px; }
  .mode-btn {
    padding: 4px 13px; border-radius: 5px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-size: .8rem; cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
  }
  .mode-btn.active { background: rgba(88,166,255,.1); border-color: var(--accent2); color: var(--accent2); font-weight: 600; }
  .choice-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .choice-row .choice-label { flex: 1; }
  .choice-row .choice-goto { width: 200px; flex-shrink: 0; }
  .next-row { display: flex; align-items: center; gap: 8px; }
  .next-row label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
  .next-row select { width: 240px; }
  .node-list-empty { color: var(--muted); font-style: italic; font-size: .85rem; padding: 10px 0; }
  .section-title-row { display: flex; align-items: center; gap: 12px; }

  /* Portrait picker */
  .portrait-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
  .portrait-thumb {
    width: 56px; height: 56px; border-radius: 4px; border: 2px solid var(--border);
    object-fit: cover; flex-shrink: 0; background: var(--surface);
  }
  .portrait-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.4rem; }
  .btn-portrait-pick { font-size: .8rem; }

  /* Portrait picker modal */
  #portraitPickerModal {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
  }
  #portraitPickerModal[hidden] { display: none; }
  #portraitPickerBox {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    width: 560px; max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
  }
  .picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  }
  .picker-header h3 { margin: 0; font-size: .95rem; }
  .picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px; padding: 16px; overflow-y: auto; flex: 1;
  }
  .picker-thumb {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;
    border: 2px solid transparent; cursor: pointer; transition: border-color .12s;
  }
  .picker-thumb:hover, .picker-thumb.selected { border-color: var(--accent2); }
  .picker-empty { color: var(--muted); font-style: italic; font-size: .85rem; padding: 20px; grid-column: 1/-1; }
  .picker-footer {
    padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  }
  .picker-upload-label {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 6px 14px; border-radius: 5px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: .82rem;
    transition: border-color .12s;
  }
  .picker-upload-label:hover { border-color: var(--accent2); }
  #pickerUploadInput { display: none; }
  .picker-upload-status { font-size: .78rem; color: var(--muted); }
</style>
{% endblock %}

{% block content %}
<form method="post" action="{{ action }}" id="dialogForm">
  <input type="hidden" name="entries" id="entriesHidden">

  <div class="section">
    <div class="section-title">Général</div>
    <div class="field">
      <label class="field-label" for="name">Nom *</label>
      <input type="text" name="name" id="name" required value="{{ dialog.name }}">
    </div>
  </div>

  <div class="section">
    <div class="section-title section-title-row">
      <span>Nœuds de dialogue</span>
      <button type="button" id="addNodeBtn" class="btn btn-sm btn-edit">+ Ajouter un nœud</button>
    </div>
    <div id="nodeList"></div>
    <p id="nodeListEmpty" class="node-list-empty" style="display:none">Aucun nœud. Cliquez « + Ajouter un nœud » pour commencer.</p>
  </div>

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

{# Portrait picker modal (shared, one instance) #}
<div id="portraitPickerModal" hidden>
  <div id="portraitPickerBox">
    <div class="picker-header">
      <h3>Choisir un portrait</h3>
      <button type="button" class="btn btn-sm btn-cancel" id="pickerCloseBtn">✕ Fermer</button>
    </div>
    <div class="picker-grid" id="pickerGrid">
      <p class="picker-empty">Chargement…</p>
    </div>
    <div class="picker-footer">
      <label class="picker-upload-label">
        ⬆ Uploader un nouveau portrait
        <input type="file" id="pickerUploadInput" accept="image/png,image/jpeg,image/webp,image/gif">
      </label>
      <span class="picker-upload-status" id="pickerUploadStatus"></span>
      <button type="button" class="btn btn-sm btn-primary" id="pickerConfirmBtn" style="margin-left:auto">Choisir</button>
    </div>
  </div>
</div>

<script>
(function () {
  var PORTRAIT_LIST_URL   = '{{ path('admin_csiwo_portrait_list') }}';
  var PORTRAIT_UPLOAD_URL = '{{ path('admin_csiwo_portrait_upload') }}';
  var PORTRAIT_BASE_URL   = '/uploads/portraits/';

  var INIT = {{ dialog.entries|json_encode|raw }};
  if (!Array.isArray(INIT)) INIT = [];

  var nodes = INIT.map(function (n) {
    return {
      id:          n.id,
      speaker:     n.speaker     || '',
      speakerIcon: n.speakerIcon || '',
      text:        n.text        || '',
      next:        (n.next !== null && n.next !== undefined) ? n.next : null,
      choices: Array.isArray(n.choices) ? n.choices.map(function (c) {
        return { label: c.label || '', goto: (c.goto !== null && c.goto !== undefined) ? c.goto : null };
      }) : null
    };
  });
  var nextId = nodes.length ? Math.max.apply(null, nodes.map(function (n) { return n.id; })) + 1 : 1;

  var form    = document.getElementById('dialogForm');
  var hidden  = document.getElementById('entriesHidden');
  var listEl  = document.getElementById('nodeList');
  var emptyEl = document.getElementById('nodeListEmpty');

  /* ── helpers ── */
  function esc(s) {
    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function gotoOpts(excludeId, current) {
    var h = '<option value=""' + (current === null ? ' selected' : '') + '>↩ Fermer le dialogue</option>';
    nodes.forEach(function (n) {
      if (n.id === excludeId) return;
      var lbl = 'Nœud #' + n.id + (n.speaker ? ' — ' + n.speaker : '');
      h += '<option value="' + n.id + '"' + (current === n.id ? ' selected' : '') + '>' + esc(lbl) + '</option>';
    });
    return h;
  }

  /* ── sync text fields DOM → nodes ── */
  function syncText() {
    listEl.querySelectorAll('.dialog-node').forEach(function (card) {
      var id = parseInt(card.dataset.nid);
      var n  = nodes.find(function (x) { return x.id === id; });
      if (!n) return;
      var sp = card.querySelector('.node-speaker'); if (sp) n.speaker = sp.value;
      var tx = card.querySelector('.node-text');    if (tx) n.text    = tx.value;
      if (n.choices) {
        card.querySelectorAll('.choice-row').forEach(function (row, ci) {
          if (!n.choices[ci]) return;
          var lbl = row.querySelector('.choice-label'); if (lbl) n.choices[ci].label = lbl.value;
        });
      }
    });
  }

  /* ── full re-render ── */
  function render() {
    emptyEl.style.display = nodes.length ? 'none' : '';
    listEl.innerHTML = '';

    nodes.forEach(function (node) {
      var isChoices = Array.isArray(node.choices);
      var card = document.createElement('div');
      card.className = 'dialog-node';
      card.dataset.nid = node.id;

      var h = '';
      h += '<div class="dialog-node-header">';
      h += '<span class="node-id-badge">#' + node.id + '</span>';
      h += '<input class="node-speaker" type="text" placeholder="Interlocuteur (ex: Garde, Roi...)" value="' + esc(node.speaker) + '">';
      h += '<button type="button" class="btn btn-sm btn-delete node-del" data-id="' + node.id + '">✕ Supprimer</button>';
      h += '</div>';

      /* portrait row */
      var iconSrc = node.speakerIcon ? PORTRAIT_BASE_URL + esc(node.speakerIcon) : '';
      h += '<div class="portrait-row">';
      if (iconSrc) {
        h += '<img class="portrait-thumb" src="' + iconSrc + '" alt="portrait">';
      } else {
        h += '<div class="portrait-thumb empty" title="Aucun portrait">👤</div>';
      }
      h += '<div style="display:flex;flex-direction:column;gap:4px">';
      h += '<button type="button" class="btn btn-sm btn-edit btn-portrait-pick" data-id="' + node.id + '">🖼 Choisir un portrait</button>';
      if (iconSrc) {
        h += '<button type="button" class="btn btn-sm btn-delete btn-portrait-clear" data-id="' + node.id + '">✕ Retirer le portrait</button>';
      }
      h += '</div>';
      h += '</div>';

      h += '<textarea class="node-text" rows="3" placeholder="Texte affiché dans la boîte de dialogue...">' + esc(node.text) + '</textarea>';

      h += '<div class="mode-toggle">';
      h += '<button type="button" class="mode-btn' + (!isChoices ? ' active' : '') + '" data-id="' + node.id + '" data-mode="next">↪ Suite automatique</button>';
      h += '<button type="button" class="mode-btn' + ( isChoices ? ' active' : '') + '" data-id="' + node.id + '" data-mode="choices">☰ Choix du joueur</button>';
      h += '</div>';

      if (!isChoices) {
        h += '<div class="next-row">';
        h += '<label>Nœud suivant</label>';
        h += '<select class="node-next" data-id="' + node.id + '">' + gotoOpts(node.id, node.next) + '</select>';
        h += '</div>';
      } else {
        h += '<div class="choice-list">';
        (node.choices || []).forEach(function (c, ci) {
          h += '<div class="choice-row">';
          h += '<input class="choice-label" type="text" placeholder="Texte du choix..." value="' + esc(c.label) + '" data-nid="' + node.id + '" data-ci="' + ci + '">';
          h += '<span style="color:var(--muted);font-size:.85rem;flex-shrink:0">→</span>';
          h += '<select class="choice-goto" data-nid="' + node.id + '" data-ci="' + ci + '">' + gotoOpts(node.id, c.goto) + '</select>';
          h += '<button type="button" class="btn btn-sm btn-delete choice-del" data-nid="' + node.id + '" data-ci="' + ci + '">✕</button>';
          h += '</div>';
        });
        h += '<button type="button" class="btn btn-sm btn-edit add-choice" data-id="' + node.id + '" style="margin-top:4px">+ Ajouter un choix</button>';
        h += '</div>';
      }

      card.innerHTML = h;
      listEl.appendChild(card);
    });

    bindEvents();
  }

  /* ── event wiring ── */
  function bindEvents() {
    listEl.querySelectorAll('.node-speaker').forEach(function (el) {
      var id = parseInt(el.closest('.dialog-node').dataset.nid);
      el.addEventListener('input', function () {
        var n = nodes.find(function (x) { return x.id === id; });
        if (n) n.speaker = el.value;
        listEl.querySelectorAll('[class*="goto"], .node-next').forEach(function (sel) {
          var cur = sel.value ? parseInt(sel.value) : null;
          var excludeId = parseInt(sel.dataset.id || sel.dataset.nid);
          sel.innerHTML = gotoOpts(excludeId, cur);
        });
      });
    });

    listEl.querySelectorAll('.node-text').forEach(function (el) {
      var id = parseInt(el.closest('.dialog-node').dataset.nid);
      el.addEventListener('input', function () {
        var n = nodes.find(function (x) { return x.id === id; });
        if (n) n.text = el.value;
      });
    });

    listEl.querySelectorAll('.choice-label').forEach(function (el) {
      el.addEventListener('input', function () {
        var nid = parseInt(el.dataset.nid), ci = parseInt(el.dataset.ci);
        var n = nodes.find(function (x) { return x.id === nid; });
        if (n && n.choices && n.choices[ci]) n.choices[ci].label = el.value;
      });
    });

    listEl.querySelectorAll('.node-next').forEach(function (el) {
      el.addEventListener('change', function () {
        var id = parseInt(el.dataset.id);
        var n  = nodes.find(function (x) { return x.id === id; });
        if (n) n.next = el.value ? parseInt(el.value) : null;
      });
    });

    listEl.querySelectorAll('.choice-goto').forEach(function (el) {
      el.addEventListener('change', function () {
        var nid = parseInt(el.dataset.nid), ci = parseInt(el.dataset.ci);
        var n = nodes.find(function (x) { return x.id === nid; });
        if (n && n.choices && n.choices[ci]) n.choices[ci].goto = el.value ? parseInt(el.value) : null;
      });
    });

    listEl.querySelectorAll('.node-del').forEach(function (el) {
      el.addEventListener('click', function () {
        syncText();
        var id = parseInt(el.dataset.id);
        nodes = nodes.filter(function (n) { return n.id !== id; });
        nodes.forEach(function (n) {
          if (n.next === id) n.next = null;
          if (n.choices) n.choices.forEach(function (c) { if (c.goto === id) c.goto = null; });
        });
        render();
      });
    });

    listEl.querySelectorAll('.mode-btn').forEach(function (el) {
      el.addEventListener('click', function () {
        syncText();
        var id   = parseInt(el.dataset.id);
        var mode = el.dataset.mode;
        var n = nodes.find(function (x) { return x.id === id; });
        if (!n) return;
        if (mode === 'choices') { n.next = null; if (!Array.isArray(n.choices)) n.choices = []; }
        else                    { n.choices = null; }
        render();
      });
    });

    listEl.querySelectorAll('.add-choice').forEach(function (el) {
      el.addEventListener('click', function () {
        syncText();
        var id = parseInt(el.dataset.id);
        var n  = nodes.find(function (x) { return x.id === id; });
        if (n) { if (!Array.isArray(n.choices)) n.choices = []; n.choices.push({ label: '', goto: null }); }
        render();
      });
    });

    listEl.querySelectorAll('.choice-del').forEach(function (el) {
      el.addEventListener('click', function () {
        syncText();
        var nid = parseInt(el.dataset.nid), ci = parseInt(el.dataset.ci);
        var n = nodes.find(function (x) { return x.id === nid; });
        if (n && n.choices) { n.choices.splice(ci, 1); render(); }
      });
    });

    /* portrait pick button */
    listEl.querySelectorAll('.btn-portrait-pick').forEach(function (el) {
      el.addEventListener('click', function () {
        syncText();
        openPortraitPicker(parseInt(el.dataset.id));
      });
    });

    /* portrait clear button */
    listEl.querySelectorAll('.btn-portrait-clear').forEach(function (el) {
      el.addEventListener('click', function () {
        var id = parseInt(el.dataset.id);
        var n  = nodes.find(function (x) { return x.id === id; });
        if (n) { n.speakerIcon = ''; render(); }
      });
    });
  }

  /* ── Add node ── */
  document.getElementById('addNodeBtn').addEventListener('click', function () {
    syncText();
    nodes.push({ id: nextId++, speaker: '', speakerIcon: '', text: '', choices: null, next: null });
    render();
    listEl.lastElementChild && listEl.lastElementChild.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  });

  /* ── Submit ── */
  form.addEventListener('submit', function () {
    syncText();
    hidden.value = JSON.stringify(nodes);
  });

  render();
  if (!nodes.length) emptyEl.style.display = '';

  /* ════════════════════════════════════════════
     Portrait picker
  ════════════════════════════════════════════ */
  var pickerModal    = document.getElementById('portraitPickerModal');
  var pickerGrid     = document.getElementById('pickerGrid');
  var pickerConfirm  = document.getElementById('pickerConfirmBtn');
  var pickerClose    = document.getElementById('pickerCloseBtn');
  var pickerUploadInput  = document.getElementById('pickerUploadInput');
  var pickerUploadStatus = document.getElementById('pickerUploadStatus');

  var targetNodeId   = null;
  var selectedFile   = null;
  var portraitsCache = null;

  function openPortraitPicker(nodeId) {
    targetNodeId = nodeId;
    selectedFile = null;
    pickerModal.hidden = false;
    loadPortraits();
  }

  function closePicker() {
    pickerModal.hidden = true;
    targetNodeId = null;
    selectedFile = null;
    pickerUploadStatus.textContent = '';
  }

  function loadPortraits(highlightFilename) {
    pickerGrid.innerHTML = '<p class="picker-empty">Chargement…</p>';
    fetch(PORTRAIT_LIST_URL)
      .then(function (r) { return r.json(); })
      .then(function (files) {
        portraitsCache = files;
        renderPickerGrid(files, highlightFilename);
      })
      .catch(function () {
        pickerGrid.innerHTML = '<p class="picker-empty" style="color:var(--danger)">Erreur de chargement.</p>';
      });
  }

  function renderPickerGrid(files, highlightFilename) {
    if (!files.length) {
      pickerGrid.innerHTML = '<p class="picker-empty">Aucun portrait. Uploadez-en un ci-dessous.</p>';
      return;
    }
    pickerGrid.innerHTML = '';
    files.forEach(function (filename) {
      var img = document.createElement('img');
      img.className = 'picker-thumb';
      img.src = PORTRAIT_BASE_URL + filename;
      img.alt = filename;
      img.title = filename;
      if (filename === highlightFilename) img.classList.add('selected');
      img.addEventListener('click', function () {
        pickerGrid.querySelectorAll('.picker-thumb').forEach(function (t) { t.classList.remove('selected'); });
        img.classList.add('selected');
        selectedFile = filename;
      });
      pickerGrid.appendChild(img);
    });
    if (highlightFilename) selectedFile = highlightFilename;
  }

  pickerClose.addEventListener('click', closePicker);
  pickerModal.addEventListener('click', function (e) {
    if (e.target === pickerModal) closePicker();
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !pickerModal.hidden) closePicker();
  });

  pickerConfirm.addEventListener('click', function () {
    if (selectedFile === null) { closePicker(); return; }
    var n = nodes.find(function (x) { return x.id === targetNodeId; });
    if (n) { n.speakerIcon = selectedFile; render(); }
    closePicker();
  });

  /* upload */
  pickerUploadInput.addEventListener('change', function () {
    var file = pickerUploadInput.files[0];
    if (!file) return;
    pickerUploadStatus.textContent = 'Upload en cours…';
    var fd = new FormData();
    fd.append('portrait', file);
    fetch(PORTRAIT_UPLOAD_URL, { method: 'POST', body: fd })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (data.error) {
          pickerUploadStatus.textContent = '✕ ' + data.error;
          return;
        }
        pickerUploadStatus.textContent = '✓ Uploadé';
        pickerUploadInput.value = '';
        portraitsCache = null;
        loadPortraits(data.filename);
        selectedFile = data.filename;
      })
      .catch(function () {
        pickerUploadStatus.textContent = '✕ Erreur réseau';
      });
  });

})();
</script>
{% endblock %}