path: root/internal/admin/static/talktree.js

// talktree.js — Full-featured conversation tree editor.
// Inline editing for all TalkNode and TalkOption fields.
// No prompt() dialogs. Clause-based condition editor, action forms.

(function() {
  'use strict';

  // ---- Path helpers ----

  function talkRoot() { return window._talkData && window._talkData.talk; }
  function talkNodes() { var r = talkRoot(); return r && r.nodes; }
  function talkSync() { if (typeof window.onTalkTreeChange === 'function') window.onTalkTreeChange(window._talkData); }

  function talkGet(path) {
    var parts = path.split('.'), obj = talkRoot();
    for (var i = 0; i < parts.length; i++) {
      if (obj == null) return undefined;
      var k = parts[i];
      obj = /^\d+$/.test(k) ? obj[parseInt(k, 10)] : obj[k];
    }
    return obj;
  }

  function talkSet(path, value) {
    var parts = path.split('.'), root = talkRoot();
    for (var i = 0; i < parts.length - 1; i++) {
      var k = parts[i];
      if (/^\d+$/.test(k)) {
        var idx = parseInt(k, 10);
        if (root[idx] == null) root[idx] = /^\d+$/.test(parts[i + 1]) ? [] : {};
        root = root[idx];
      } else {
        if (root[k] == null) root[k] = /^\d+$/.test(parts[i + 1]) ? [] : {};
        root = root[k];
      }
    }
    var lk = parts[parts.length - 1];
    if (/^\d+$/.test(lk)) { root[parseInt(lk, 10)] = value; }
    else { root[lk] = value; }
  }

  function talkDel(path) {
    var parts = path.split('.'), root = talkRoot();
    for (var i = 0; i < parts.length - 1; i++) {
      if (root == null) return;
      var k = parts[i];
      root = /^\d+$/.test(k) ? root[parseInt(k, 10)] : root[k];
    }
    if (!root) return;
    var lk = parts[parts.length - 1];
    if (/^\d+$/.test(lk)) { root.splice(parseInt(lk, 10), 1); }
    else { delete root[lk]; }
  }

  // ---- Clause types ----

  var CLAUSE_TYPES = [
    { key: 'flag', label: 'Flag', hasValue: true },
    { key: 'player_flag', label: 'Player Flag', hasValue: true },
    { key: 'has_item', label: 'Has Item', hasValue: false },
    { key: 'min_credits', label: 'Min Credits', hasValue: false }
  ];

  function clauseTypeLabel(key) {
    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
      if (CLAUSE_TYPES[i].key === key) return CLAUSE_TYPES[i].label;
    }
    return key;
  }

  function clauseTypeHasValue(key) {
    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
      if (CLAUSE_TYPES[i].key === key) return CLAUSE_TYPES[i].hasValue;
    }
    return false;
  }

  // Extract clauses from a condition object
  function extractClauses(cond) {
    if (!cond || typeof cond !== 'object' || Array.isArray(cond)) return { mode: 'none', clauses: [], groupKey: null };
    if (cond.all_of && Array.isArray(cond.all_of) && cond.all_of.length > 0) {
      return { mode: 'multi', clauses: cond.all_of.slice(), groupKey: 'all_of' };
    }
    if (cond.any_of && Array.isArray(cond.any_of) && cond.any_of.length > 0) {
      return { mode: 'multi', clauses: cond.any_of.slice(), groupKey: 'any_of' };
    }
    // Single clause from flat fields
    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
      if (cond[CLAUSE_TYPES[i].key] !== undefined) {
        var c = {};
        c[CLAUSE_TYPES[i].key] = cond[CLAUSE_TYPES[i].key];
        if (cond.not) c.not = cond.not;
        if (cond.value !== undefined) c.value = cond.value;
        if (cond.has_item && CLAUSE_TYPES[i].key !== 'has_item') c.has_item = cond.has_item;
        if (cond.player_flag && CLAUSE_TYPES[i].key !== 'player_flag') c.player_flag = cond.player_flag;
        if (cond.flag && CLAUSE_TYPES[i].key !== 'flag') c.flag = cond.flag;
        return { mode: 'single', clauses: [c], groupKey: null };
      }
    }
    // Check for has_item or min_credits as the only key
    for (var j = 0; j < CLAUSE_TYPES.length; j++) {
      var ck = CLAUSE_TYPES[j].key;
      if (cond[ck] !== undefined) {
        var cc = {};
        cc[ck] = cond[ck];
        if (cond.not) cc.not = cond.not;
        if (cond.value !== undefined) cc.value = cond.value;
        return { mode: 'single', clauses: [cc], groupKey: null };
      }
    }
    return { mode: 'none', clauses: [], groupKey: null };
  }

  // Determine the type key for a clause object
  function clauseObjType(clause) {
    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
      var k = CLAUSE_TYPES[i].key;
      if (clause[k] !== undefined) return k;
    }
    return null;
  }

  // Build a full condition object from clauses
  function buildCondition(clauses, groupKey) {
    if (!clauses || clauses.length === 0) return null;
    if (clauses.length === 1) {
      var flat = {};
      var c = clauses[0];
      for (var k in c) { if (c[k] !== undefined) flat[k] = c[k]; }
      return flat;
    }
    var cond = {};
    cond[groupKey || 'all_of'] = clauses.map(function(c) {
      var sub = {};
      for (var k in c) { if (c[k] !== undefined) sub[k] = c[k]; }
      return sub;
    });
    return cond;
  }

  // ---- Action field definitions ----

  var ACTION_FIELDS = [
    { key: 'give_item', label: 'Give Item', type: 'item_search' },
    { key: 'take_item', label: 'Take Item', type: 'item_search' },
    { key: 'credits', label: 'Credits (+/-)', type: 'number' },
    { key: 'teleport', label: 'TP Room', type: 'number' },
    { key: 'heal', label: 'Heal HP', type: 'number' },
  ];

  var ACTION_BOOLS = [];

  // ---- Event delegation ----

  function talkEvent(e) {
    var el = e.target;
    var path = el.getAttribute('data-tp');
    if (!path) return;

    var tag = el.tagName;
    var type = el.type;

    if (tag === 'INPUT' || tag === 'TEXTAREA') {
      var val;
      if (type === 'checkbox') { val = el.checked; }
      else if (type === 'number') { var n = parseFloat(el.value); val = isNaN(n) ? 0 : n; }
      else { val = el.value; }
      talkSyncPath(path, val);
      if (path.endsWith('.goto')) renderTalkTree(window._talkData);
    } else if (tag === 'SELECT') {
      talkSyncPath(path, el.value);
    }
  }

  function talkSyncPath(path, val) {
    talkSet(path, val);
    talkSync();
  }

  function talkHandleClick(e) {
    var el = e.target;
    var action = el.getAttribute('data-action');
    if (!action) return;

    var nodeKey = el.getAttribute('data-nk');
    var optIdx = el.getAttribute('data-oi');
    var subIdx = el.getAttribute('data-si');
    var subKey = el.getAttribute('data-sk');
    var condGroupKey = el.getAttribute('data-cgk');

    switch (action) {
      case 'delete-node':
        deleteNode(nodeKey);
        break;
      case 'add-option':
        addOption(nodeKey);
        break;
      case 'delete-option':
        deleteOption(nodeKey, parseInt(optIdx, 10));
        break;
      case 'add-node':
        addNode();
        break;
      case 'add-message':
        addMessageLine(nodeKey);
        break;
      case 'delete-message':
        deleteMessageLine(nodeKey, parseInt(optIdx, 10));
        break;
      case 'add-condition':
        toggleCondition(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
        break;
      case 'remove-condition':
        removeCondition(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
        break;
      case 'add-action':
        addAction(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
        break;
      case 'remove-action':
        removeAction(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
        break;
      case 'add-clause':
        addClause(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, el.getAttribute('data-ct'));
        break;
      case 'remove-clause':
        removeClause(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, parseInt(subIdx, 10));
        break;
      case 'set-cond-group':
        setCondGroup(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, condGroupKey);
        break;
      case 'add-kv':
        addKVPair(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, el.getAttribute('data-kvk'));
        break;
      case 'remove-kv':
        removeKVPair(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, el.getAttribute('data-kvk'), subKey);
        break;
    }
  }

  // ---- Render entry point ----

  window.renderTalkTree = function(data) {
    var container = document.getElementById('talktree');
    if (!container) return;
    window._talkData = data;
    window._talkOpenNodes = window._talkOpenNodes || new Set();
    window._talkOpenNodes.add('start');
    if (!data || !data.talk || !data.talk.nodes) {
      container.innerHTML = '<p style="color:#888">No conversation tree defined.</p>';
      return;
    }
    var nodes = data.talk.nodes;
    var visited = {};
    var html = '<div class="talk-tree" id="talkTreeRoot">';
    html += '<datalist id="talkNodeKeys">';
    Object.keys(nodes).forEach(function(k) { html += '<option value="' + escAttr(k) + '">'; });
    html += '</datalist>';
    html += renderTreeNodes(nodes, 'start', visited);

    var allKeys = Object.keys(nodes);
    var orphanKeys = [];
    for (var i = 0; i < allKeys.length; i++) {
      if (!visited[allKeys[i]]) orphanKeys.push(allKeys[i]);
    }
    if (orphanKeys.length > 0) {
      html += '<div class="talk-orphans">';
      html += '<div class="talk-orphans-label">Unreferenced Nodes</div>';
      html += '<div class="talk-orphans-hint">These nodes are not reachable from start. Add a goto to them from another node\'s option.</div>';
      for (var j = 0; j < orphanKeys.length; j++) {
        html += renderOrphanNode(orphanKeys[j], nodes[orphanKeys[j]], nodes);
      }
      html += '</div>';
    }

    html += renderAddNodeRow();
    html += '</div>';
    container.innerHTML = html;
    if (typeof ced_setupSearchFields === 'function') {
      setTimeout(function() { ced_setupSearchFields(); }, 10);
    }
  };

  // ---- Add/Delete Node ----

  function renderAddNodeRow() {
    return '<div class="talk-add-node-row">' +
      '<input class="talk-input talk-input-sm" id="talkNewNodeKey" placeholder="New node key (unique name)">' +
      '<button class="talk-add-btn" data-action="add-node">Add Node</button>' +
      '</div>';
  }

  function addNode() {
    var input = document.getElementById('talkNewNodeKey');
    if (!input) return;
    var key = input.value.trim();
    if (!key) return;
    if (talkNodes()[key]) { notify('Node "' + key + '" already exists.', 'error'); return; }
    talkNodes()[key] = { messages: [], options: [] };
    input.value = '';
    renderTalkTree(window._talkData);
    talkSync();
  }

  function deleteNode(nodeKey) {
    if (nodeKey === 'start') { notify('Cannot delete the start node.', 'error'); return; }
    var nodes = talkNodes();
    if (!nodes || !nodes[nodeKey]) return;
    delete nodes[nodeKey];
    Object.keys(nodes).forEach(function(k) {
      var n = nodes[k];
      if (n.goto === nodeKey) delete n.goto;
      if (n.options) {
        n.options.forEach(function(opt) { if (opt.goto === nodeKey) opt.goto = ''; });
      }
    });
    renderTalkTree(window._talkData);
    talkSync();
  }

  // ---- Orphan node ----

  function renderOrphanNode(key, node, nodes) {
    var h = '<div class="talk-node">';
    h += '<div class="talk-node-header" onclick="if(!event.target.closest(\'[data-action]\'))talkToggleNode(\'' + escAttr(key) + '\',this.parentElement.parentElement)">';
    h += '<span class="talk-node-arrow"></span>';
    h += '<span class="talk-node-key">' + esc(key) + '</span>';
    h += '<span class="talk-node-preview">' + esc((getNodePreview(node) || '').substring(0, 60)) + '</span>';
    h += '<span class="talk-node-spacer"></span>';
    h += '<button class="talk-node-btn talk-node-del" data-action="delete-node" data-nk="' + escAttr(key) + '">Delete</button>';
    h += '</div>';
    h += '<div class="talk-node-body">';
    h += renderNodeBody(key, node, nodes);
    h += '</div>';
    h += '</div>';
    return h;
  }

  // ---- Recursive tree render ----

  function renderTreeNodes(nodes, rootKey, seen, indent) {
    indent = indent || 0;
    var node = nodes[rootKey];
    if (!node) return '';
    if (seen[rootKey]) {
      return '<div class="talk-node ref"><span class="talk-node-key">' + esc(rootKey) + '</span> <a href="javascript:void(0)" onclick="document.getElementById(\'node-' + escAttr(rootKey) + '\').scrollIntoView({behavior:\'smooth\',block:\'center\'});return false" style="color:inherit;text-decoration:underline">(see above)</a></div>';
    }
    seen[rootKey] = true;

    var previewText = getNodePreview(node);
    var isOpen = window._talkOpenNodes.has(rootKey);

    var html = '<div class="talk-node' + (isOpen ? ' open' : '') + '" id="node-' + escAttr(rootKey) + '">';

    // Header — fix: check for data-action before toggling
    html += '<div class="talk-node-header" onclick="if(!event.target.closest(\'[data-action]\'))talkToggleNode(\'' + escAttr(rootKey) + '\',this.parentElement)">';
    html += '<span class="talk-node-arrow"></span>';
    html += '<span class="talk-node-key">' + esc(rootKey) + '</span>';
    html += '<span class="talk-node-preview">' + esc((previewText || '').substring(0, 60)) + '</span>';
    html += '<span class="talk-node-spacer"></span>';
    html += '<button class="talk-node-btn talk-node-del" data-action="delete-node" data-nk="' + escAttr(rootKey) + '">Delete</button>';
    html += '</div>';

    // Body
    html += '<div class="talk-node-body">';
    html += renderNodeBody(rootKey, node, nodes);
    html += '</div>'; // .talk-node-body

    // Children
    var childKeys = [];
    if (node.goto && nodes[node.goto]) childKeys.push(node.goto);
    if (node.options) {
      node.options.forEach(function(opt) {
        if (opt.goto && nodes[opt.goto] && childKeys.indexOf(opt.goto) < 0) childKeys.push(opt.goto);
      });
    }
    if (childKeys.length > 0) {
      html += '<div class="talk-children">';
      childKeys.forEach(function(k) { html += renderTreeNodes(nodes, k, seen, indent + 1); });
      html += '</div>';
    }

    html += '</div>'; // .talk-node
    return html;
  }

  function getNodePreview(node) {
    if (node.messages && node.messages.length) return node.messages[0];
    return '';
  }

  // ---- Node body: condition-gated content ----

  // Track open node state across re-renders
  window._talkOpenNodes = window._talkOpenNodes || new Set();

  function renderNodeBody(nodeKey, node, nodes) {
    var ec = extractClauses(node.condition);
    var hasCond = ec.mode !== 'none' || (node.condition && typeof node.condition === 'object' && !Array.isArray(node.condition));
    var hasOpts = node.options && node.options.length > 0;

    var html = '';

    if (hasCond) {
      html += '<div class="talk-cond-card">';
      html += '<div class="talk-cond-card-header">' +
        'Condition' +
        '<button class="talk-section-remove" data-action="remove-condition" data-nk="' + escAttr(nodeKey) + '">Remove</button>' +
        '</div>';
      html += '<div class="talk-cond-card-body">';
      html += renderConditionClauses(ec, nodeKey, null);
      html += '<div class="talk-cond-card-sep"></div>';
      html += renderMessagesSection(nodeKey, node);
      html += renderOptionsSection(nodeKey, node);
      html += '<div class="talk-cond-card-sep"></div>';

      var nodeAction = node.action;
      var actionPrefix = 'nodes.' + escAttr(nodeKey) + '.action';
      if (nodeAction && typeof nodeAction === 'object' && !Array.isArray(nodeAction)) {
        html += '<div class="talk-cond-card" style="margin-top:4px">';
        html += '<div class="talk-cond-card-header">' +
          '<span class="talk-prop-label">Action</span>' +
          '<button class="talk-section-remove" data-action="remove-action" data-nk="' + escAttr(nodeKey) + '">Remove</button></div>';
        html += '<div class="talk-cond-card-body">';
        html += renderActionForm(nodeAction, actionPrefix, nodeKey, null);
        html += '</div>';
        html += '</div>';
      } else {
        html += '<button class="talk-add-act-btn" style="margin-top:4px" data-action="add-action" data-nk="' + escAttr(nodeKey) + '">+ Add Action</button>';
      }

      html += '<div class="talk-cond-card-sep"></div>';
      html += renderGotoFallback(nodeKey, node, 'If condition fails, go to');
      html += '</div>'; // .talk-cond-card-body
      html += '</div>'; // .talk-cond-card
    } else {
      html += '<button class="talk-add-cond-btn" data-action="add-condition" data-nk="' + escAttr(nodeKey) + '">+ Add Condition</button>';
      html += renderMessagesSection(nodeKey, node);
      html += renderOptionsSection(nodeKey, node);
      html += '<div class="talk-cond-card-sep"></div>';
      html += renderActionSection(nodeKey, null, node.action);
      if (!hasOpts) {
        html += renderGotoFallback(nodeKey, node, 'Auto-advance to');
      }
    }

    return html;
  }

  // ---- Goto fallback ----

  function renderGotoFallback(nodeKey, node, label) {
    label = label || 'Auto-advance to';
    return '<div class="talk-goto-fallback">' +
      '<span class="talk-prop-label">' + esc(label) + '</span>' +
      '<input class="talk-input talk-input-sm" data-tp="nodes.' + escAttr(nodeKey) + '.goto" list="talkNodeKeys" value="' + escAttr(node.goto || '') + '" placeholder="Fallback node...">' +
      '</div>';
  }

  // ---- Messages section ----

  function renderMessagesSection(nodeKey, node) {
    var msgs = node.messages || [];
    var html = '<div class="talk-section">';
    html += '<div class="talk-section-header"><span class="talk-prop-label">Messages</span></div>';
    msgs.forEach(function(line, i) {
      html += '<div class="talk-seq-line">' +
        '<span class="talk-opt-arrow">&#10132;</span>' +
        '<input class="talk-input" data-tp="nodes.' + escAttr(nodeKey) + '.messages.' + i + '" value="' + escAttr(line) + '" placeholder="Message line...">' +
        '<button class="talk-seq-del" data-action="delete-message" data-nk="' + escAttr(nodeKey) + '" data-oi="' + i + '">x</button>' +
        '</div>';
    });
    html += '<div class="talk-seq-add-row">' +
      '<span class="talk-opt-arrow">&#10132;</span>' +
      '<input class="talk-input" id="talkMsgAdd_' + escAttr(nodeKey) + '" placeholder="Add message line...">' +
      '<button class="talk-add-btn" data-action="add-message" data-nk="' + escAttr(nodeKey) + '">Add</button>' +
      '</div>';
    html += '</div>';
    return html;
  }

  // ---- Condition clauses ----

  function renderConditionClauses(ec, nodeKey, optIdx) {
    var clauses = ec.clauses;
    var groupKey = ec.groupKey || 'all_of';
    var html = '';

    // AND/OR mode selector (only when 2+ clauses)
    if (clauses.length >= 2) {
      html += '<div class="talk-cond-mode-row">' +
        '<span class="talk-prop-label">Combine with</span>' +
        '<select class="talk-select" data-action="set-cond-group" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + ' data-cgk="' + escAttr(groupKey) + '" onchange="event.stopPropagation(); talkCondGroupChange(this)">' +
        '<option value="all_of"' + (groupKey === 'all_of' ? ' selected' : '') + '>All of (AND)</option>' +
        '<option value="any_of"' + (groupKey === 'any_of' ? ' selected' : '') + '>Any of (OR)</option>' +
        '</select>' +
        '</div>';
    }

    // Clause rows
    for (var i = 0; i < clauses.length; i++) {
      var typeKey = clauseObjType(clauses[i]) || 'flag';
      var pathPrefix = clauses.length === 1 ?
        'nodes.' + escAttr(nodeKey) + (optIdx !== null ? '.options.' + optIdx : '') + '.condition' :
        'nodes.' + escAttr(nodeKey) + (optIdx !== null ? '.options.' + optIdx : '') + '.condition.' + groupKey + '.' + i;
      html += renderClauseRow(clauses[i], pathPrefix, typeKey, nodeKey, optIdx, i);
    }

    // Add clause buttons
    html += '<div class="talk-clause-add-bar">';
    CLAUSE_TYPES.forEach(function(ct) {
      html += '<button class="talk-clause-add-btn" data-action="add-clause" data-nk="' + escAttr(nodeKey) + '"' +
        (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + ' data-ct="' + escAttr(ct.key) + '">+ ' + esc(ct.label) + '</button>';
    });
    html += '</div>';

    return html;
  }

  function renderClauseRow(clause, pathPrefix, typeKey, nodeKey, optIdx, clauseIdx) {
    var hasValue = clauseTypeHasValue(typeKey);
    var html = '<div class="talk-clause-row">';
    html += '<span class="talk-clause-type">' + esc(clauseTypeLabel(typeKey)) + '</span>';

    if (typeKey === 'flag' || typeKey === 'player_flag') {
      var notLabel = (clause.value !== undefined && clause.value !== '') ? 'Not' : 'Not Exists';
      html += '<span class="talk-clause-label">key:</span>';
      html += '<input class="talk-input talk-input-sm" data-tp="' + escAttr(pathPrefix + '.' + typeKey) + '" value="' + escAttr(clause[typeKey] || '') + '" placeholder="Flag name...">';
      html += '<label class="talk-check-label"><input type="checkbox" data-tp="' + escAttr(pathPrefix + '.not') + '"' + (clause.not ? ' checked' : '') + '> ' + notLabel + '</label>';
      html += '<span class="talk-clause-label">val:</span>';
      html += '<input class="talk-input talk-input-sm" data-tp="' + escAttr(pathPrefix + '.value') + '" value="' + escAttr(clause.value || '') + '" placeholder="Value match..." style="max-width:80px">';
    } else if (typeKey === 'has_item') {
      html += '<span class="talk-clause-label">item:</span>';
      html += '<input class="talk-input talk-input-sm" data-tp="' + escAttr(pathPrefix + '.has_item') + '" value="' + escAttr(clause.has_item || '') + '" placeholder="Item ID...">';
      html += '<label class="talk-check-label"><input type="checkbox" data-tp="' + escAttr(pathPrefix + '.not') + '"' + (clause.not ? ' checked' : '') + '> Not Exists</label>';
    } else if (typeKey === 'min_credits') {
      html += '<span class="talk-clause-label">cr:</span>';
      html += '<input class="talk-input-num" data-tp="' + escAttr(pathPrefix + '.min_credits') + '" type="number" value="' + (clause.min_credits || 0) + '" placeholder="0">';
      html += '<label class="talk-check-label"><input type="checkbox" data-tp="' + escAttr(pathPrefix + '.not') + '"' + (clause.not ? ' checked' : '') + '> Not</label>';
    }

    html += '<button class="talk-clause-del" data-action="remove-clause" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + ' data-si="' + clauseIdx + '" title="Remove clause">x</button>';
    html += '</div>';
    return html;
  }

  // ---- Clause add/remove/migrate ----

  function getConditionFor(nodeKey, optIdx) {
    var node = talkNodes()[nodeKey];
    if (!node) return null;
    if (optIdx !== null) {
      if (!node.options || !node.options[optIdx]) return null;
      return node.options[optIdx];
    }
    return node;
  }

  function condAddClause(target, typeKey, optIdx, nodeKey) {
    var ec = extractClauses(target.condition);
    var newClause = {};
    newClause[typeKey] = '';
    ec.clauses.push(newClause);

    if (ec.clauses.length === 1) {
      // First clause: use flat fields
      target.condition = buildCondition(ec.clauses, null);
    } else {
      ec.groupKey = ec.groupKey || 'all_of';
      target.condition = buildCondition(ec.clauses, ec.groupKey);
    }
  }

  function addClause(nodeKey, optIdx, typeKey) {
    var target = getConditionFor(nodeKey, optIdx);
    if (!target) return;
    if (!target.condition || typeof target.condition !== 'object' || Array.isArray(target.condition)) {
      target.condition = {};
    }
    condAddClause(target, typeKey, optIdx, nodeKey);
    renderTalkTree(window._talkData);
    talkSync();
  }

  function removeClause(nodeKey, optIdx, clauseIdx) {
    var target = getConditionFor(nodeKey, optIdx);
    if (!target) return;
    var ec = extractClauses(target.condition);
    if (clauseIdx < 0 || clauseIdx >= ec.clauses.length) return;

    ec.clauses.splice(clauseIdx, 1);

    if (ec.clauses.length === 0) {
      delete target.condition;
    } else {
      target.condition = buildCondition(ec.clauses, ec.groupKey);
    }
    renderTalkTree(window._talkData);
    talkSync();
  }

  function setCondGroup(nodeKey, optIdx, newGroupKey) {
    var target = getConditionFor(nodeKey, optIdx);
    if (!target) return;
    var ec = extractClauses(target.condition);
    if (ec.clauses.length < 2) return;
    ec.groupKey = newGroupKey;
    target.condition = buildCondition(ec.clauses, ec.groupKey);
    renderTalkTree(window._talkData);
    talkSync();
  }

  // Called from onchange on the AND/OR select
  window.talkCondGroupChange = function(select) {
    var nodeKey = select.getAttribute('data-nk');
    var optIdx = select.getAttribute('data-oi');
    setCondGroup(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, select.value);
  };

  // ---- Add/Remove whole Condition ----

  function toggleCondition(nodeKey, optIdx) {
    var target = getConditionFor(nodeKey, optIdx);
    if (!target) return;
    if (target.condition && typeof target.condition === 'object' && !Array.isArray(target.condition)) {
      delete target.condition;
    } else {
      target.condition = {};
      if (optIdx !== null) {
        window._talkAutoOpenDetails = new Set();
        window._talkAutoOpenDetails.add('cond_' + optIdx + '_' + escAttr(nodeKey));
      }
    }
    renderTalkTree(window._talkData);
    talkSync();
  }

  function removeCondition(nodeKey, optIdx) {
    var target = getConditionFor(nodeKey, optIdx);
    if (!target) return;
    delete target.condition;
    renderTalkTree(window._talkData);
    talkSync();
  }

  // ---- Action editor ----

  function renderActionSection(nodeKey, optIdx, action) {
    var prefix = optIdx !== null ? 'nodes.' + escAttr(nodeKey) + '.options.' + optIdx + '.action' : 'nodes.' + escAttr(nodeKey) + '.action';
    var hasAct = action && typeof action === 'object' && !Array.isArray(action);

    if (!hasAct) {
      return '<div class="talk-section">' +
        '<button class="talk-add-act-btn" data-action="add-action" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + '>+ Add Action</button>' +
        '</div>';
    }

    return '<div class="talk-section">' +
      '<div class="talk-cond-card-header">' +
        '<span class="talk-prop-label">Action</span>' +
        '<button class="talk-section-remove" data-action="remove-action" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + '>Remove</button>' +
      '</div>' +
      renderActionForm(action, prefix, nodeKey, optIdx) +
      '</div>';
  }

  function renderActionForm(action, prefix, nodeKey, optIdx) {
    var html = '<div class="talk-action-block">';

    html += '<div class="talk-action-grid">';
    ACTION_FIELDS.forEach(function(f) {
      var fpath = prefix + '.' + f.key;
      var val = (action && action[f.key] !== undefined) ? action[f.key] : '';
      if (f.type === 'item_search') {
        html += '<div class="talk-field-row">' +
          '<span class="talk-prop-label">' + esc(f.label) + '</span>' +
          '<div style="position:relative">' +
          '<input class="talk-input talk-input-sm search-input" data-tp="' + escAttr(fpath) + '" data-search-type="items" value="' + escAttr(String(val)) + '" placeholder="Search items...">' +
          '<div class="search-results" style="display:none"></div>' +
          '</div>' +
          '</div>';
      } else {
        var narrowStyle = (f.key === 'teleport' || f.key === 'heal') ? ' style="max-width:70px"' : '';
        html += '<div class="talk-field-row">' +
          '<span class="talk-prop-label">' + esc(f.label) + '</span>' +
          '<input class="talk-input talk-input-sm"' + narrowStyle + ' data-tp="' + escAttr(fpath) + '" type="' + f.type + '" value="' + escAttr(String(val)) + '">' +
          '</div>';
      }
    });
    html += '</div>';

    html += '<div style="margin-top:4px">';
    ACTION_BOOLS.forEach(function(b) {
      html += '<label class="talk-check-label">' +
        '<input type="checkbox" data-tp="' + escAttr(prefix + '.' + b.key) + '"' + (action && action[b.key] ? ' checked' : '') + '> ' + esc(b.label) +
        '</label>';
    });
    html += '</div>';

    html += renderKVEditor(action, prefix, 'set_flags', 'Set Flags', nodeKey, optIdx);
    html += renderKVEditor(action, prefix, 'set_player_flags', 'Set Player Flags', nodeKey, optIdx);

    html += '</div>'; // .talk-action-block
    return html;
  }

  function renderKVEditor(action, prefix, key, label, nodeKey, optIdx) {
    var kv = (action && action[key]) || {};
    var keys = Object.keys(kv);
    var fcID = prefix.replace(/\./g, '_') + '_' + key;
    var addKeyID = 'kvAddKey_' + fcID;
    var nkAttr = escAttr(nodeKey);
    var oiAttr = optIdx !== null ? ' data-oi="' + optIdx + '"' : '';
    var html = '<div class="talk-kv-section">';
    html += '<div class="talk-kv-header">';
    html += '<span class="talk-prop-label">' + esc(label) + '</span>';
    html += '</div>';
    keys.forEach(function(k) {
      html += '<div class="talk-kv-row">' +
        '<input class="talk-input" data-nk="' + nkAttr + '"' + oiAttr + ' data-kvk="' + escAttr(key) + '" data-oldkey="' + escAttr(k) + '" onchange="talkRenameKV(this)" value="' + escAttr(k) + '" placeholder="key" style="max-width:150px">' +
        '<input class="talk-input" data-tp="' + escAttr(prefix + '.' + key + '.' + k) + '" value="' + escAttr(String(kv[k])) + '" placeholder="value">' +
        '<button class="talk-kv-del" data-action="remove-kv" data-nk="' + nkAttr + '"' + oiAttr + ' data-kvk="' + escAttr(key) + '" data-sk="' + escAttr(k) + '">x</button>' +
        '</div>';
    });
    html += '<div class="talk-kv-row">' +
      '<input class="talk-input" id="' + escAttr(addKeyID) + '" placeholder="New key name" style="max-width:150px" data-nk="' + nkAttr + '"' + oiAttr + ' data-kvk="' + escAttr(key) + '">' +
      '<input class="talk-input" id="' + escAttr(addKeyID) + '_val" placeholder="value" style="flex:1">' +
      '<span style="font-size:9px;color:#888;white-space:nowrap;min-width:60px"></span>' +
      '<button class="talk-kv-add" data-action="add-kv" data-nk="' + nkAttr + '"' + oiAttr + ' data-kvk="' + escAttr(key) + '">Add</button>' +
      '</div>';
    html += '</div>';
    return html;
  }

  // ---- Options section ----

  function renderOptionsSection(nodeKey, node) {
    var options = node.options || [];
    var html = '<div class="talk-options">';
    html += '<span class="talk-options-label">Options</span>';

    if (options.length > 0) {
      options.forEach(function(opt, idx) {
        html += '<div class="talk-opt-edit-row">';
        html += '<span class="talk-seq-num">' + (idx + 1) + '</span>';
        html += '<input class="talk-input talk-opt-text" data-tp="nodes.' + escAttr(nodeKey) + '.options.' + idx + '.text" value="' + escAttr(opt.text || '') + '" placeholder="Option text...">';
        html += '<input class="talk-input talk-opt-goto" data-tp="nodes.' + escAttr(nodeKey) + '.options.' + idx + '.goto" list="talkNodeKeys" value="' + escAttr(opt.goto || '') + '" placeholder="Goto...">';

        html += '<div class="talk-opt-edit-actions">';
        if (opt.condition && typeof opt.condition === 'object' && !Array.isArray(opt.condition)) {
          html += '<span class="talk-opt-tag talk-opt-tag-cond" title="Has condition" onclick="toggleOptionDetail(event,\'cond\',' + idx + ',\'' + escAttr(nodeKey) + '\')">cond</span>';
        } else {
          html += '<button class="talk-add-cond-btn" style="margin:0;margin-bottom:0" data-action="add-condition" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '" title="Add condition">cond</button>';
        }
        if (opt.action) {
          html += '<span class="talk-opt-tag talk-opt-tag-act" title="Has action" onclick="toggleOptionDetail(event,\'act\',' + idx + ',\'' + escAttr(nodeKey) + '\')">act</span>';
        } else {
          html += '<button class="talk-add-act-btn" style="margin:0;margin-bottom:0" data-action="add-action" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '" title="Add action">act</button>';
        }
        html += '</div>';

        html += '<button class="talk-opt-del" data-action="delete-option" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '" title="Delete option">x</button>';
        html += '</div>';

        if (opt.condition && typeof opt.condition === 'object' && !Array.isArray(opt.condition)) {
          var condDetailKey = 'cond_' + idx + '_' + escAttr(nodeKey);
          var condOpen = window._talkAutoOpenDetails && window._talkAutoOpenDetails.has(condDetailKey) ? 'block' : 'none';
          html += '<div class="talk-opt-detail" id="optDetail_' + condDetailKey + '" style="display:' + condOpen + ';margin-left:18px">';
          html += '<div class="talk-cond-card" style="margin-top:2px">';
          html += '<div class="talk-cond-card-header">Condition' +
            '<button class="talk-section-remove" data-action="remove-condition" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '">Remove</button></div>';
          html += '<div class="talk-cond-card-body">';
          html += renderConditionClauses(extractClauses(opt.condition), nodeKey, idx);
          html += '</div>';
          html += '</div>';
          html += '</div>';
        }
        if (opt.action) {
          var actDetailKey = 'act_' + idx + '_' + escAttr(nodeKey);
          var actOpen = window._talkAutoOpenDetails && window._talkAutoOpenDetails.has(actDetailKey) ? 'block' : 'none';
          html += '<div class="talk-opt-detail" id="optDetail_' + actDetailKey + '" style="display:' + actOpen + ';margin-left:18px">';
          html += '<div class="talk-cond-card" style="margin-top:2px">';
          html += '<div class="talk-cond-card-header">' +
            '<span class="talk-prop-label">Action</span>' +
            '<button class="talk-section-remove" data-action="remove-action" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '">Remove</button></div>';
          html += '<div class="talk-cond-card-body">';
          html += renderActionForm(opt.action, 'nodes.' + escAttr(nodeKey) + '.options.' + idx + '.action', nodeKey, idx);
          html += '</div>';
          html += '</div>';
          html += '</div>';
        }
      });
    } else {
      html += '<div class="talk-option-empty">none</div>';
    }

    html += '<div class="talk-add-opt-row">' +
      '<span class="talk-seq-num" style="color:#555">' + (options.length + 1) + '</span>' +
      '<input class="talk-input talk-opt-text" id="talkOptText_' + escAttr(nodeKey) + '" placeholder="Option text...">' +
      '<input class="talk-input talk-opt-goto" id="talkOptGoto_' + escAttr(nodeKey) + '" list="talkNodeKeys" placeholder="Goto...">' +
      '<span class="talk-opt-gap"></span>' +
      '<button class="talk-add-btn" data-action="add-option" data-nk="' + escAttr(nodeKey) + '">Add</button>' +
      '</div>';

    html += '</div>'; // .talk-options
    return html;
  }

  window.toggleOptionDetail = function(e, type, idx, nodeKey) {
    e.stopPropagation();
    var el = document.getElementById('optDetail_' + type + '_' + idx + '_' + nodeKey);
    if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
  };

  window.talkToggleNode = function(nodeKey, nodeEl) {
    var open = nodeEl.classList.toggle('open');
    if (open) {
      window._talkOpenNodes.add(nodeKey);
    } else {
      window._talkOpenNodes.delete(nodeKey);
    }
  };

  // ---- Add/Delete Option ----

  function addOption(nodeKey) {
    var textInput = document.getElementById('talkOptText_' + nodeKey);
    var gotoInput = document.getElementById('talkOptGoto_' + nodeKey);
    var text = textInput ? textInput.value.trim() : '';
    var dest = gotoInput ? gotoInput.value.trim() : '';
    var node = talkNodes()[nodeKey];
    if (!node) return;
    if (!node.options) node.options = [];
    node.options.push({ text: text, goto: dest });
    if (textInput) textInput.value = '';
    if (gotoInput) gotoInput.value = '';
    renderTalkTree(window._talkData);
    talkSync();
  }

  function deleteOption(nodeKey, idx) {
    var node = talkNodes()[nodeKey];
    if (!node || !node.options || idx < 0 || idx >= node.options.length) return;
    node.options.splice(idx, 1);
    renderTalkTree(window._talkData);
    talkSync();
  }

  // ---- Add/Delete Sequence Line ----

  function addMessageLine(nodeKey) {
    var input = document.getElementById('talkMsgAdd_' + nodeKey);
    var text = input ? input.value.trim() : '';
    var node = talkNodes()[nodeKey];
    if (!node) return;
    if (!node.messages) node.messages = [];
    node.messages.push(text);
    renderTalkTree(window._talkData);
    talkSync();
  }

  function deleteMessageLine(nodeKey, idx) {
    var node = talkNodes()[nodeKey];
    if (!node || !node.messages) return;
    node.messages.splice(idx, 1);
    if (node.messages.length === 0) delete node.messages;
    renderTalkTree(window._talkData);
    talkSync();
  }

  // ---- Add/Remove Action ----

  function addAction(nodeKey, optIdx) {
    var target = getConditionFor(nodeKey, optIdx);
    if (!target) return;
    target.action = {};
    if (optIdx !== null) {
      window._talkAutoOpenDetails = new Set();
      window._talkAutoOpenDetails.add('act_' + optIdx + '_' + escAttr(nodeKey));
    }
    renderTalkTree(window._talkData);
    talkSync();
  }

  function removeAction(nodeKey, optIdx) {
    var target = getConditionFor(nodeKey, optIdx);
    if (!target) return;
    delete target.action;
    renderTalkTree(window._talkData);
    talkSync();
  }

  // ---- Add/Remove KV Pairs (set_flags/set_player_flags) ----

  function kvPath(nodeKey, optIdx, kvKey, flagKey) {
    var base = optIdx !== null ?
      'nodes.' + nodeKey + '.options.' + optIdx + '.action.' + kvKey :
      'nodes.' + nodeKey + '.action.' + kvKey;
    return flagKey ? base + '.' + flagKey : base;
  }

  function addKVPair(nodeKey, optIdx, kvKey) {
    var prefixBase = optIdx !== null ?
      'nodes.' + nodeKey + '.options.' + optIdx + '.action' :
      'nodes.' + nodeKey + '.action';
    var fcID = prefixBase.replace(/\./g, '_') + '_' + kvKey;
    var addKeyID = 'kvAddKey_' + fcID;
    var input = document.getElementById(addKeyID);
    var key = input ? input.value.trim() : '';
    if (!key) return;
    var valInput = document.getElementById(addKeyID + '_val');
    var rawVal = valInput ? valInput.value.trim() : 'true';
    var val = rawVal === 'true' ? true : rawVal === 'false' ? false : rawVal;
    var numVal = parseFloat(rawVal);
    if (!isNaN(numVal) && String(numVal) === rawVal) val = numVal;
    var basePath = kvPath(nodeKey, optIdx, kvKey);
    var obj = talkGet(basePath);
    if (!obj || typeof obj !== 'object') {
      talkSet(basePath, {});
      obj = talkGet(basePath);
    }
    if (obj[key] !== undefined) { notify('Flag "' + key + '" already exists.', 'error'); return; }
    obj[key] = val;
    renderTalkTree(window._talkData);
    talkSync();
  }

  function removeKVPair(nodeKey, optIdx, kvKey, flagKey) {
    var fullPath = kvPath(nodeKey, optIdx, kvKey, flagKey);
    talkDel(fullPath);
    var basePath = kvPath(nodeKey, optIdx, kvKey);
    var obj = talkGet(basePath);
    if (obj && typeof obj === 'object' && Object.keys(obj).length === 0) {
      talkDel(basePath);
    }
    renderTalkTree(window._talkData);
    talkSync();
  }

  window.talkRenameKV = function(el) {
    var nodeKey = el.getAttribute('data-nk');
    var optIdxStr = el.getAttribute('data-oi');
    var optIdx = optIdxStr !== null ? parseInt(optIdxStr, 10) : null;
    var kvKey = el.getAttribute('data-kvk');
    var oldKey = el.getAttribute('data-oldkey');
    var newKey = el.value.trim();
    if (!newKey || newKey === oldKey) return;
    var basePath = optIdx !== null ?
        'nodes.' + nodeKey + '.options.' + optIdx + '.action.' + kvKey :
        'nodes.' + nodeKey + '.action.' + kvKey;
    var obj = talkGet(basePath);
    if (!obj || obj[newKey] !== undefined) {
      el.value = oldKey;
      if (obj && obj[newKey] !== undefined) notify('Key "' + newKey + '" already exists.', 'error');
      return;
    }
    obj[newKey] = obj[oldKey];
    delete obj[oldKey];
    renderTalkTree(window._talkData);
    talkSync();
  };

  // ---- Global event listeners ----

  document.addEventListener('input', function(e) {
    var el = e.target;
    if (!el.closest || !el.closest('#talktree')) return;
    if (!el.getAttribute('data-tp')) return;
    talkEvent(e);
  });

  document.addEventListener('change', function(e) {
    var el = e.target;
    if (!el.closest || !el.closest('#talktree')) return;
    talkEvent(e);
  });

  document.addEventListener('click', function(e) {
    var el = e.target;
    if (!el.closest || !el.closest('#talktree')) return;
    talkHandleClick(e);
  });

  document.addEventListener('keydown', function(e) {
    if (e.key !== 'Enter') return;
    var el = e.target;
    if (!el.closest || !el.closest('#talktree')) return;

    if (el.id === 'talkNewNodeKey') {
      e.preventDefault();
      addNode();
      return;
    }

    if (el.id && (el.id.startsWith('talkOptText_') || el.id.startsWith('talkOptGoto_'))) {
      e.preventDefault();
      var nodeKey = el.id.replace('talkOptText_', '').replace('talkOptGoto_', '');
      addOption(nodeKey);
      return;
    }

    if (el.id && el.id.startsWith('talkMsgAdd_')) {
      e.preventDefault();
      var nk = el.id.replace('talkMsgAdd_', '');
      addMessageLine(nk);
      return;
    }

    if (el.id && el.id.startsWith('kvAddKey_')) {
      e.preventDefault();
      var nk = el.getAttribute('data-nk');
      var oi = el.getAttribute('data-oi');
      var kvk = el.getAttribute('data-kvk');
      addKVPair(nk, oi !== null ? parseInt(oi, 10) : null, kvk);
      return;
    }
  });

})();