/**
 * TreeManager - คลาสจัดการโครงสร้างต้นไม้
 */
class TreeManager {
  /**
   * สร้าง TreeManager instance ใหม่
   * @param {Object} config - การตั้งค่าต้นไม้
   * @param {string} config.containerId - ID ของ element ที่จะแสดงต้นไม้
   * @param {boolean} config.limitedDepth - บ่งชี้ว่าจำกัดความลึกของระดับชั้นหรือไม่
   * @param {number} config.maxDepth - จำนวนระดับชั้นสูงสุด (เมื่อ limitedDepth เป็น true)
   * @param {Object} config.levelNames - ชื่อของแต่ละระดับชั้น {1: 'Level 1', 2: 'Level 2', ...}
   * @param {string} config.outputId - ID ของ element ที่จะแสดง JSON output
   */
  constructor(config) {
    this.containerId = config.containerId || 'tree';
    this.container = document.getElementById(this.containerId);
    this.limitedDepth = config.limitedDepth !== undefined ? config.limitedDepth : true;
    this.maxDepth = config.maxDepth || 3;
    this.levelNames = config.levelNames || {
      1: 'Stage',
      2: 'Area',
      3: 'Zone'
    };
    this.outputId = config.outputId || 'json-output';
    this.outputElement = document.getElementById(this.outputId);
    this.data = [];
    this.nextId = 1;
    this.draggedItem = null;
    this.dropTarget = null;
    this.dropPosition = null; // 'before', 'after', 'inside'
    this.dragGhost = null;
    this.dropBeforeIndicator = null;
    this.dropAfterIndicator = null;
    this.dropChildIndicator = null;
    this._createDropIndicators();
    this._setupDragAndDrop();
  }

  /**
   * สร้างตัวชี้บอกตำแหน่งการวาง
   * @private
   */
  _createDropIndicators() {
    this.dropBeforeIndicator = document.createElement('div');
    this.dropBeforeIndicator.className = 'drop-indicator drop-before';
    this.dropAfterIndicator = document.createElement('div');
    this.dropAfterIndicator.className = 'drop-indicator drop-after';
    this.dropChildIndicator = document.createElement('div');
    this.dropChildIndicator.className = 'drop-indicator-child';
    this.dropChildIndicator.textContent = 'Place as child';
    this.indentIndicator = document.createElement('div');
    this.indentIndicator.className = 'drop-indicator-level indent';
    this.indentIndicator.innerHTML = '<span>Increase level</span>';
    this.outdentIndicator = document.createElement('div');
    this.outdentIndicator.className = 'drop-indicator-level outdent';
    this.outdentIndicator.innerHTML = '<span>Decrease level</span>';
  }

  /**
   * กำหนด event listeners สำหรับการลากวาง
   * @private
   */
  _setupDragAndDrop() {
    document.addEventListener('dragstart', (e) => {
      if (e.target.classList.contains('tree-content')) {
        const itemId = parseInt(e.target.closest('.tree-item').dataset.id);
        this.draggedItem = this._findNodeById(itemId, this.data);
        if (!this.draggedItem) return;
        e.dataTransfer.setData('text/plain', itemId);
        const ghost = this._createDragGhost(e.target);
        document.body.appendChild(ghost);
        const offsetX = e.clientX - e.target.getBoundingClientRect().left;
        const offsetY = e.clientY - e.target.getBoundingClientRect().top;
        e.dataTransfer.setDragImage(ghost, offsetX, offsetY);
        this.dragGhost = ghost;
        e.target.classList.add('dragging');
        this._createDropZones();
        this._highlightValidDropTargets();
      }
    });

    document.addEventListener('dragover', (e) => {
      if (!this.draggedItem) return;
      e.preventDefault();
      const targetItem = e.target.closest('.tree-item');
      if (!targetItem) {
        this._hideDropHighlights();
        return;
      }
      const targetId = parseInt(targetItem.dataset.id);
      const targetNode = this._findNodeById(targetId, this.data);
      if (!targetNode) {
        this._hideDropHighlights();
        return;
      }
      if (this.draggedItem.id === targetNode.id || this._isDescendantOf(targetNode.id, this.draggedItem)) {
        this._hideDropHighlights();
        return;
      }
      const targetRect = targetItem.getBoundingClientRect();
      const mouseY = e.clientY;
      const topZone = targetRect.top + (targetRect.height * 0.3);
      const bottomZone = targetRect.bottom - (targetRect.height * 0.3);
      let position;
      if (mouseY < topZone) {
        position = 'before';
      } else if (mouseY > bottomZone) {
        position = 'after';
      } else {
        position = 'inside';
      }
      let canDrop = false;
      if (position === 'inside') {
        canDrop = this._canDropAsChild(this.draggedItem, targetNode);
      } else {
        canDrop = this._canDropInSameLevel(this.draggedItem, targetNode);
      }
      if (!canDrop) {
        this._hideDropHighlights();
        return;
      }
      this.dropTarget = targetNode;
      this.dropPosition = position;
      this._showDropHighlight(targetItem, position);
    });

    document.addEventListener('dragleave', (e) => {
      if (!e.target.closest('.tree-item') && !e.relatedTarget?.closest('.tree-item')) {
        this._hideDropHighlights();
      }
    });

    document.addEventListener('drop', (e) => {
      e.preventDefault();
      if (!this.draggedItem || !this.dropTarget || !this.dropPosition) {
        this._cleanupDrag();
        return;
      }
      this.moveNode(this.draggedItem.id, this.dropTarget.id, this.dropPosition);
      this._cleanupDrag();
    });

    document.addEventListener('dragend', () => {
      this._cleanupDrag();
    });
  }

  /**
   * สร้าง dropzones เมื่อเริ่มต้นลาก
   * @private
   */
  _createDropZones() {
    this.dropZonesContainer = document.createElement('div');
    this.dropZonesContainer.className = 'drop-zones-container';
    this.dropZonesContainer.style.position = 'absolute';
    this.dropZonesContainer.style.pointerEvents = 'none';
    this.dropZonesContainer.style.zIndex = '1000';
    document.body.appendChild(this.dropZonesContainer);
    this.beforeDropZone = document.createElement('div');
    this.beforeDropZone.className = 'drop-zone drop-before';
    this.beforeDropZone.style.height = '4px';
    this.beforeDropZone.style.background = 'transparent';
    this.beforeDropZone.style.position = 'absolute';
    this.beforeDropZone.style.display = 'none';
    this.dropZonesContainer.appendChild(this.beforeDropZone);
    this.afterDropZone = document.createElement('div');
    this.afterDropZone.className = 'drop-zone drop-after';
    this.afterDropZone.style.height = '4px';
    this.afterDropZone.style.background = 'transparent';
    this.afterDropZone.style.position = 'absolute';
    this.afterDropZone.style.display = 'none';
    this.dropZonesContainer.appendChild(this.afterDropZone);
    this.insideDropZone = document.createElement('div');
    this.insideDropZone.className = 'drop-zone drop-inside';
    this.insideDropZone.style.background = 'transparent';
    this.insideDropZone.style.position = 'absolute';
    this.insideDropZone.style.display = 'none';
    this.dropZonesContainer.appendChild(this.insideDropZone);
  }

  /**
   * เพิ่ม highlight ให้กับโหนดทั้งหมดที่สามารถรับการวางได้
   * @private
   */
  _highlightValidDropTargets() {
    const allItems = document.querySelectorAll('.tree-item');
    allItems.forEach(item => {
      item.classList.remove('valid-drop-target');
    });
    allItems.forEach(item => {
      const itemId = parseInt(item.dataset.id);
      if (itemId !== this.draggedItem.id) {
        const node = this._findNodeById(itemId, this.data);
        if (node && !this._isDescendantOf(node.id, this.draggedItem)) {
          item.classList.add('valid-drop-target');
        }
      }
    });
  }

  /**
   * แสดงตำแหน่งวางโดยไม่มีการสร้าง/ลบ DOM elements
   * @param {HTMLElement} targetElement - Element เป้าหมายที่จะวาง
   * @param {string} position - ตำแหน่งที่จะวาง ('before', 'after', 'inside')
   * @private
   */
  _showDropHighlight(targetElement, position) {
    this._hideDropHighlights();
    const rect = targetElement.getBoundingClientRect();
    if (position === 'before') {
      this.beforeDropZone.style.display = 'block';
      this.beforeDropZone.style.top = (rect.top - 2) + 'px';
      this.beforeDropZone.style.left = rect.left + 'px';
      this.beforeDropZone.style.width = rect.width + 'px';
      this.beforeDropZone.style.background = 'var(--primary-color)';
      this.beforeDropZone.style.animation = 'pulse 1.5s infinite';
    } else if (position === 'after') {
      this.afterDropZone.style.display = 'block';
      this.afterDropZone.style.top = (rect.bottom - 2) + 'px';
      this.afterDropZone.style.left = rect.left + 'px';
      this.afterDropZone.style.width = rect.width + 'px';
      this.afterDropZone.style.background = 'var(--primary-color)';
      this.afterDropZone.style.animation = 'pulse 1.5s infinite';
    } else if (position === 'inside') {
      this.insideDropZone.style.display = 'block';
      this.insideDropZone.style.top = rect.top + 'px';
      this.insideDropZone.style.left = rect.left + 'px';
      this.insideDropZone.style.width = rect.width + 'px';
      this.insideDropZone.style.height = rect.height + 'px';
      this.insideDropZone.style.border = '2px dashed var(--primary-color)';
      this.insideDropZone.style.backgroundColor = 'rgba(52, 152, 219, 0.1)';
      this.insideDropZone.style.borderRadius = '4px';
      this.insideDropZone.style.animation = 'glow 1.5s infinite alternate';
    }
    targetElement.querySelector('.tree-content').classList.add('over-' + position);
  }

  /**
   * ซ่อน highlight ทั้งหมด
   * @private
   */
  _hideDropHighlights() {
    if (this.beforeDropZone) this.beforeDropZone.style.display = 'none';
    if (this.afterDropZone) this.afterDropZone.style.display = 'none';
    if (this.insideDropZone) this.insideDropZone.style.display = 'none';
    const highlightedElements = document.querySelectorAll('.over-before, .over-after, .over-inside');
    highlightedElements.forEach(el => {
      el.classList.remove('over-before', 'over-after', 'over-inside');
    });
  }

  /**
   * ล้างข้อมูลการลากและซ่อนตัวชี้ทั้งหมด
   * @private
   */
  _cleanupDrag() {
    this._hideDropHighlights();
    if (this.dropZonesContainer && this.dropZonesContainer.parentNode) {
      this.dropZonesContainer.parentNode.removeChild(this.dropZonesContainer);
      this.dropZonesContainer = null;
      this.beforeDropZone = null;
      this.afterDropZone = null;
      this.insideDropZone = null;
    }
    const validTargets = document.querySelectorAll('.valid-drop-target');
    validTargets.forEach(item => {
      item.classList.remove('valid-drop-target');
    });
    if (this.dragGhost && this.dragGhost.parentNode) {
      this.dragGhost.parentNode.removeChild(this.dragGhost);
    }
    const draggingItems = document.querySelectorAll('.dragging');
    draggingItems.forEach(item => item.classList.remove('dragging'));
    this.draggedItem = null;
    this.dropTarget = null;
    this.dropPosition = null;
  }

  /**
   * สร้างธีมของ element ที่ถูกลาก
   * @param {HTMLElement} original - Element ต้นฉบับ
   * @returns {HTMLElement} - Element สำหรับแสดงขณะลาก
   * @private
   */
  _createDragGhost(original) {
    const ghost = original.cloneNode(true);
    ghost.classList.add('drag-ghost');
    ghost.style.position = 'absolute';
    ghost.style.top = '-1000px';
    ghost.style.opacity = '0.7';
    return ghost;
  }

  /**
   * ซ่อนตัวชี้ตำแหน่งการวางทั้งหมด
   * @private
   */
  _hideDropIndicator() {
    [
      this.dropBeforeIndicator,
      this.dropAfterIndicator,
      this.dropChildIndicator,
      this.indentIndicator,
      this.outdentIndicator
    ].forEach(indicator => {
      if (indicator && indicator.parentNode) {
        indicator.parentNode.removeChild(indicator);
      }
      if (indicator) {
        indicator.style.display = 'none';
      }
    });
  }

  /**
   * ตรวจสอบว่าสามารถวางเป็นลูกของโหนดเป้าหมายได้หรือไม่
   * @param {Object} dragNode - โหนดที่ถูกลาก
   * @param {Object} targetNode - โหนดเป้าหมาย
   * @returns {boolean} - สามารถวางได้หรือไม่
   * @private
   */
  _canDropAsChild(dragNode, targetNode) {
    if (this.limitedDepth) {
      const newLevel = targetNode.level + 1;
      if (newLevel > this.maxDepth) {
        return false;
      }
    }
    return true;
  }

  /**
   * ตรวจสอบว่าสามารถวางในระดับเดียวกับโหนดเป้าหมายได้หรือไม่
   * @param {Object} dragNode - โหนดที่ถูกลาก
   * @param {Object} targetNode - โหนดเป้าหมาย
   * @returns {boolean} - สามารถวางได้หรือไม่
   * @private
   */
  _canDropInSameLevel(dragNode, targetNode) {
    if (targetNode.level === 1 && !targetNode.parentId) {
      return true;
    }
    const targetParent = this._findParentNode(targetNode.id);
    if (!targetParent) {
      return true;
    }
    return true;
  }

  /**
   * ตรวจสอบว่าโหนด A เป็นลูกหลานของโหนด B หรือไม่
   * @param {number} nodeAId - ID ของโหนด A
   * @param {Object} nodeB - โหนด B
   * @returns {boolean} - เป็นลูกหลานหรือไม่
   * @private
   */
  _isDescendantOf(nodeAId, nodeB) {
    if (!nodeB.children || nodeB.children.length === 0) {
      return false;
    }
    for (const child of nodeB.children) {
      if (child.id === nodeAId || this._isDescendantOf(nodeAId, child)) {
        return true;
      }
    }
    return false;
  }

  /**
   * หาโหนดตาม ID
   * @param {number} id - ID ของโหนดที่ต้องการหา
   * @param {Array} nodes - อาร์เรย์ของโหนดที่จะค้นหา (default: this.data)
   * @returns {Object|null} - โหนดที่พบ หรือ null ถ้าไม่พบ
   * @private
   */
  _findNodeById(id, nodes = this.data) {
    for (const node of nodes) {
      if (node.id === id) {
        return node;
      }
      if (node.children && node.children.length > 0) {
        const found = this._findNodeById(id, node.children);
        if (found) {
          return found;
        }
      }
    }
    return null;
  }

  /**
       * หาโหนดพ่อของโหนดที่กำหนด
       * @param {number} nodeId - ID ของโหนดที่ต้องการหาพ่อ
       * @param {Array} nodes - อาร์เรย์ของโหนดที่จะค้นหา (default: this.data)
       * @returns {Object|null} - โหนดพ่อที่พบ หรือ null ถ้าไม่พบ
       * @private
       */
  _findParentNode(nodeId, nodes = this.data) {
    for (const node of nodes) {
      if (node.children && node.children.length > 0) {
        for (const child of node.children) {
          if (child.id === nodeId) {
            return node;
          }
        }
        const found = this._findParentNode(nodeId, node.children);
        if (found) {
          return found;
        }
      }
    }
    return null;
  }

  /**
  * คำนวณความลึกสูงสุดของโหนด
  * @param {Object} node - โหนดที่ต้องการคำนวณความลึก
  * @returns {number} - ความลึกสูงสุด
  * @private
  */
  _getMaxDepth(node) {
    if (!node.children || node.children.length === 0) {
      return node.level;
    }
    let maxChildDepth = 0;
    for (const child of node.children) {
      const childDepth = this._getMaxDepth(child);
      if (childDepth > maxChildDepth) {
        maxChildDepth = childDepth;
      }
    }
    return maxChildDepth;
  }

  /**
  * อัพเดตระดับของโหนดและลูกหลานทั้งหมด
  * @param {Object} node - โหนดที่ต้องการอัพเดตระดับ
  * @param {number} newLevel - ระดับใหม่
  * @private
  */
  _updateNodeLevel(node, newLevel) {
    node.level = newLevel;
    if (node.children && node.children.length > 0) {
      for (const child of node.children) {
        this._updateNodeLevel(child, newLevel + 1);
      }
    }
  }

  /**
  * เพิ่มโหนดระดับบนสุด
  * @param {string} name - ชื่อของโหนด
  * @returns {Object} - โหนดที่ถูกสร้าง
  */
  addRootNode(name = 'New item') {
    const newNode = {
      id: this.nextId++,
      name: name,
      level: 1,
      children: []
    };
    this.data.push(newNode);
    this._renderTree();
    this._updateResult();
    return newNode;
  }

  /**
  * เพิ่มโหนดลูก
  * @param {number} parentId - ID ของโหนดพ่อ
  * @param {string} name - ชื่อของโหนด
  * @returns {Object|null} - โหนดที่ถูกสร้าง หรือ null ถ้าไม่สามารถสร้างได้
  */
  addChildNode(parentId, name = 'Child item') {
    const parent = this._findNodeById(parentId);
    if (!parent) {
      return null;
    }
    if (this.limitedDepth && parent.level >= this.maxDepth) {
      console.warn('Cannot add: Exceeds maximum depth limit');
      return null;
    }
    const newNode = {
      id: this.nextId++,
      name: name,
      level: parent.level + 1,
      parentId: parent.id,
      children: []
    };
    if (!parent.children) {
      parent.children = [];
    }
    parent.children.push(newNode);
    this._renderTree();
    this._updateResult();
    return newNode;
  }

  /**
  * ลบโหนด
  * @param {number} nodeId - ID ของโหนดที่ต้องการลบ
  * @returns {boolean} - สำเร็จหรือไม่
  */
  deleteNode(nodeId) {
    const node = this._findNodeById(nodeId);
    if (!node) {
      return false;
    }
    if (!node.parentId) {
      const index = this.data.findIndex(item => item.id === nodeId);
      if (index !== -1) {
        this.data.splice(index, 1);
      }
    } else {
      const parent = this._findParentNode(nodeId);
      if (parent && parent.children) {
        const index = parent.children.findIndex(item => item.id === nodeId);
        if (index !== -1) {
          parent.children.splice(index, 1);
        }
      }
    }
    this._renderTree();
    this._updateResult();
    return true;
  }

  /**
  * อัพเดตชื่อของโหนด
  * @param {number} nodeId - ID ของโหนดที่ต้องการอัพเดต
  * @param {string} newName - ชื่อใหม่
  * @returns {boolean} - สำเร็จหรือไม่
  * @private
  */
  _updateNodeName(nodeId, newName) {
    const node = this._findNodeById(nodeId);
    if (!node) {
      return false;
    }
    node.name = newName;
    this._updateResult();
    return true;
  }

  /**
   * ย้ายโหนด
   * @param {number} nodeId - ID ของโหนดที่ต้องการย้าย
   * @param {number} targetId - ID ของโหนดเป้าหมาย
   * @param {string} position - ตำแหน่งที่จะวาง ('before', 'after', 'inside', 'indent', 'outdent')
   * @returns {boolean} - สำเร็จหรือไม่
   */
  moveNode(nodeId, targetId, position) {
    const node = this._findNodeById(nodeId);
    const target = this._findNodeById(targetId);
    if (!node || !target) {
      return false;
    }
    if (!node.parentId) {
      const index = this.data.findIndex(item => item.id === nodeId);
      if (index !== -1) {
        this.data.splice(index, 1);
      }
    } else {
      const parent = this._findParentNode(nodeId);
      if (parent && parent.children) {
        const index = parent.children.findIndex(item => item.id === nodeId);
        if (index !== -1) {
          parent.children.splice(index, 1);
        }
      }
    }
    if (position === 'indent') {
      const previous = this._findPreviousSibling(targetId);
      if (previous) {
        node.parentId = previous.id;
        node.level = previous.level + 1;
        if (!previous.children) {
          previous.children = [];
        }
        previous.children.push(node);
      } else {
        node.parentId = target.id;
        node.level = target.level + 1;
        if (!target.children) {
          target.children = [];
        }
        target.children.push(node);
      }
    } else if (position === 'outdent') {
      const targetParent = this._findParentNode(targetId);
      if (targetParent) {
        node.parentId = targetParent.parentId;
        node.level = targetParent.level;
        if (!targetParent.parentId) {
          const index = this.data.findIndex(item => item.id === targetParent.id);
          this.data.splice(index + 1, 0, node);
        } else {
          const grandParent = this._findParentNode(targetParent.id);
          const index = grandParent.children.findIndex(item => item.id === targetParent.id);
          grandParent.children.splice(index + 1, 0, node);
        }
      } else {
        node.parentId = null;
        node.level = 1;
        const index = this.data.findIndex(item => item.id === targetId);
        this.data.splice(index + 1, 0, node);
      }
    } else if (position === 'inside') {
      node.parentId = target.id;
      node.level = target.level + 1;
      if (!target.children) {
        target.children = [];
      }
      target.children.push(node);
    } else {
      if (!target.parentId) {
        node.parentId = null;
        node.level = 1;
        const index = this.data.findIndex(item => item.id === targetId);
        if (position === 'before') {
          this.data.splice(index, 0, node);
        } else {
          this.data.splice(index + 1, 0, node);
        }
      } else {
        const parent = this._findParentNode(targetId);
        if (parent && parent.children) {
          node.parentId = parent.id;
          node.level = target.level;
          const index = parent.children.findIndex(item => item.id === targetId);
          if (position === 'before') {
            parent.children.splice(index, 0, node);
          } else {
            parent.children.splice(index + 1, 0, node);
          }
        }
      }
    }
    if (node.children && node.children.length > 0) {
      for (const child of node.children) {
        this._updateNodeLevel(child, node.level + 1);
      }
    }
    this._renderTree();
    this._updateResult();
    return true;
  }

  /**
   * หาโหนดพี่น้องก่อนหน้าของโหนดที่กำหนด
   * @param {number} nodeId - ID ของโหนดที่ต้องการหาพี่น้องก่อนหน้า
   * @returns {Object|null} - โหนดพี่น้องก่อนหน้าที่พบ หรือ null ถ้าไม่พบ
   * @private
   */
  _findPreviousSibling(nodeId) {
    const node = this._findNodeById(nodeId);
    if (!node) return null;
    if (!node.parentId) {
      const index = this.data.findIndex(item => item.id === nodeId);
      if (index > 0) {
        return this.data[index - 1];
      }
    } else {
      const parent = this._findParentNode(nodeId);
      if (parent && parent.children) {
        const index = parent.children.findIndex(item => item.id === nodeId);
        if (index > 0) {
          return parent.children[index - 1];
        }
      }
    }
    return null;
  }

  /**
  * สลับสถานะการยุบ/ขยายของโหนด
  * @param {number} nodeId - ID ของโหนดที่ต้องการสลับสถานะ
  * @private
  */
  _toggleCollapse(nodeId) {
    const itemElement = document.querySelector(`.tree-item[data-id="${nodeId}"]`);
    if (itemElement) {
      itemElement.classList.toggle('collapsed');
    }
  }

  /**
  * ยุบโหนดทั้งหมด
  */
  collapseAll() {
    const items = document.querySelectorAll('.tree-item');
    items.forEach(item => {
      if (item.querySelector('.tree-children')) {
        item.classList.add('collapsed');
      }
    });
  }

  /**
  * ขยายโหนดทั้งหมด
  */
  expandAll() {
    const items = document.querySelectorAll('.tree-item');
    items.forEach(item => {
      item.classList.remove('collapsed');
    });
  }

  /**
  * สร้าง DOM element สำหรับรายการ
  * @param {Object} node - ข้อมูลโหนด
  * @returns {HTMLElement} - Element ที่สร้าง
  * @private
  */
  _createTreeItemElement(node) {
    const item = document.createElement('div');
    item.className = 'tree-item';
    item.dataset.id = node.id;
    const content = document.createElement('div');
    content.className = 'tree-content';
    content.draggable = true;
    content.classList.add(`level-${node.level}`);
    const hasChildren = node.children && node.children.length > 0;
    const collapseBtn = document.createElement('span');
    collapseBtn.className = 'collapse-btn';
    collapseBtn.innerHTML = hasChildren ? '▼' : '&nbsp;';
    collapseBtn.addEventListener('click', () => {
      if (hasChildren) {
        this._toggleCollapse(node.id);
        collapseBtn.innerHTML = item.classList.contains('collapsed') ? '►' : '▼';
      }
    });
    content.appendChild(collapseBtn);
    const label = document.createElement('div');
    label.className = 'tree-label';
    const levelTag = document.createElement('span');
    levelTag.className = 'tree-level-tag';
    const levelName = this.levelNames[node.level] || `Level ${node.level}`;
    levelTag.textContent = levelName;
    label.appendChild(levelTag);
    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.className = 'tree-name';
    nameInput.value = node.name;
    nameInput.addEventListener('change', () => {
      this._updateNodeName(node.id, nameInput.value);
    });
    nameInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        nameInput.blur();
      }
    });
    label.appendChild(nameInput);
    content.appendChild(label);
    const actionsMenu = document.createElement('div');
    actionsMenu.className = 'tree-actions-menu';
    const moveUpBtn = document.createElement('button');
    moveUpBtn.className = 'tree-action-btn';
    moveUpBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19V5M12 5L5 12M12 5L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    moveUpBtn.title = 'Move up';
    moveUpBtn.addEventListener('click', () => {
      this.moveNodeUp(node.id);
    });
    actionsMenu.appendChild(moveUpBtn);
    const moveDownBtn = document.createElement('button');
    moveDownBtn.className = 'tree-action-btn';
    moveDownBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    moveDownBtn.title = 'Move down';
    moveDownBtn.addEventListener('click', () => {
      this.moveNodeDown(node.id);
    });
    actionsMenu.appendChild(moveDownBtn);
    const moveLeftBtn = document.createElement('button');
    moveLeftBtn.className = 'tree-action-btn';
    moveLeftBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M5 12L12 5M5 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    moveLeftBtn.title = 'Move out (up one level)';
    moveLeftBtn.addEventListener('click', () => {
      this.moveNodeLeft(node.id);
    });
    actionsMenu.appendChild(moveLeftBtn);
    const moveRightBtn = document.createElement('button');
    moveRightBtn.className = 'tree-action-btn';
    moveRightBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    moveRightBtn.title = 'Move in (down one level)';
    moveRightBtn.addEventListener('click', () => {
      this.moveNodeRight(node.id);
    });
    actionsMenu.appendChild(moveRightBtn);
    const addBtn = document.createElement('button');
    addBtn.className = 'tree-action-btn';
    addBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4V20M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    addBtn.title = 'Add child item';
    addBtn.addEventListener('click', () => {
      if (this.limitedDepth && node.level >= this.maxDepth) {
        alert(`Cannot add child item: Exceeds maximum depth limit (${this.maxDepth} levels)`);
        return;
      }
      this.addChildNode(node.id);
    });
    actionsMenu.appendChild(addBtn);
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'tree-action-btn';
    deleteBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 7L18.1327 19.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224C6.81296 21 5.94208 20.1891 5.86732 19.1425L5 7M10 11V17M14 11V17M15 7V4C15 3.44772 14.5523 3 14 3H10C9.44772 3 9 3.44772 9 4V7M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    deleteBtn.title = 'Delete this item';
    deleteBtn.addEventListener('click', () => {
      if (confirm('Are you sure you want to delete this item and all its children?')) {
        this.deleteNode(node.id);
      }
    });
    actionsMenu.appendChild(deleteBtn);
    content.appendChild(actionsMenu);
    item.appendChild(content);
    if (hasChildren) {
      const children = document.createElement('div');
      children.className = 'tree-children';
      node.children.forEach(child => {
        children.appendChild(this._createTreeItemElement(child));
      });
      item.appendChild(children);
    }
    return item;
  }

  /**
   * เลื่อนโหนดขึ้นหนึ่งตำแหน่งในระดับเดียวกัน
   * @param {number} nodeId - ID ของโหนดที่ต้องการเลื่อน
   * @returns {boolean} - สำเร็จหรือไม่
   */
  moveNodeUp(nodeId) {
    const node = this._findNodeById(nodeId);
    if (!node) return false;
    let siblings;
    let nodeIndex;
    if (!node.parentId) {
      siblings = this.data;
      nodeIndex = siblings.findIndex(item => item.id === nodeId);
    } else {
      const parent = this._findParentNode(nodeId);
      if (!parent || !parent.children) return false;
      siblings = parent.children;
      nodeIndex = siblings.findIndex(item => item.id === nodeId);
    }
    if (nodeIndex <= 0) return false;
    const temp = siblings[nodeIndex];
    siblings[nodeIndex] = siblings[nodeIndex - 1];
    siblings[nodeIndex - 1] = temp;
    this._renderTree();
    this._updateResult();
    return true;
  }

  /**
   * เลื่อนโหนดลงหนึ่งตำแหน่งในระดับเดียวกัน
   * @param {number} nodeId - ID ของโหนดที่ต้องการเลื่อน
   * @returns {boolean} - สำเร็จหรือไม่
   */
  moveNodeDown(nodeId) {
    const node = this._findNodeById(nodeId);
    if (!node) return false;
    let siblings;
    let nodeIndex;
    if (!node.parentId) {
      siblings = this.data;
      nodeIndex = siblings.findIndex(item => item.id === nodeId);
    } else {
      const parent = this._findParentNode(nodeId);
      if (!parent || !parent.children) return false;
      siblings = parent.children;
      nodeIndex = siblings.findIndex(item => item.id === nodeId);
    }
    if (nodeIndex >= siblings.length - 1) return false;
    const temp = siblings[nodeIndex];
    siblings[nodeIndex] = siblings[nodeIndex + 1];
    siblings[nodeIndex + 1] = temp;
    this._renderTree();
    this._updateResult();
    return true;
  }

  /**
   * เลื่อนโหนดไปทางซ้าย (เลื่อนระดับขึ้น)
   * @param {number} nodeId - ID ของโหนดที่ต้องการเลื่อน
   * @returns {boolean} - สำเร็จหรือไม่
   */
  moveNodeLeft(nodeId) {
    const node = this._findNodeById(nodeId);
    if (!node) return false;
    if (!node.parentId) return false;
    const parent = this._findParentNode(nodeId);
    if (!parent) return false;
    const grandparent = this._findParentNode(parent.id);
    const parentIndex = !grandparent
      ? this.data.findIndex(item => item.id === parent.id)
      : grandparent.children.findIndex(item => item.id === parent.id);
    const nodeIndex = parent.children.findIndex(item => item.id === nodeId);
    if (nodeIndex === -1) return false;
    const movedNode = parent.children.splice(nodeIndex, 1)[0];
    movedNode.level = parent.level;
    movedNode.parentId = parent.parentId;
    if (movedNode.children && movedNode.children.length > 0) {
      for (const child of movedNode.children) {
        this._updateNodeLevel(child, movedNode.level + 1);
      }
    }
    if (!grandparent) {
      this.data.splice(parentIndex + 1, 0, movedNode);
    } else {
      grandparent.children.splice(parentIndex + 1, 0, movedNode);
    }
    this._renderTree();
    this._updateResult();
    return true;
  }

  /**
   * เลื่อนโหนดไปทางขวา (เลื่อนระดับลง) - จะเป็นลูกของโหนดที่อยู่ข้างบน
   * @param {number} nodeId - ID ของโหนดที่ต้องการเลื่อน
   * @returns {boolean} - สำเร็จหรือไม่
   */
  moveNodeRight(nodeId) {
    const node = this._findNodeById(nodeId);
    if (!node) return false;
    let siblings;
    let nodeIndex;
    if (!node.parentId) {
      siblings = this.data;
      nodeIndex = siblings.findIndex(item => item.id === nodeId);
    } else {
      const parent = this._findParentNode(nodeId);
      if (!parent || !parent.children) return false;
      siblings = parent.children;
      nodeIndex = siblings.findIndex(item => item.id === nodeId);
    }
    if (nodeIndex <= 0) return false;
    if (this.limitedDepth) {
      const potentialNewLevel = node.level + 1;
      if (potentialNewLevel > this.maxDepth) {
        alert(`Cannot indent: Exceeds maximum depth limit (${this.maxDepth} levels)`);
        return false;
      }
    }
    const newParent = siblings[nodeIndex - 1];
    if (this._isDescendantOf(newParent.id, node)) {
      return false;
    }
    siblings.splice(nodeIndex, 1);
    node.parentId = newParent.id;
    node.level = newParent.level + 1;
    if (node.children && node.children.length > 0) {
      for (const child of node.children) {
        this._updateNodeLevel(child, node.level + 1);
      }
    }
    if (!newParent.children) {
      newParent.children = [];
    }
    newParent.children.push(node);
    this._renderTree();
    this._updateResult();
    return true;
  }

  /**
  * แสดงผลต้นไม้
  * @private
  */
  _renderTree() {
    this.container.innerHTML = '';
    this.data.forEach(node => {
      this.container.appendChild(this._createTreeItemElement(node));
    });
  }

  /**
  * อัพเดตผลลัพธ์ JSON
  * @private
  */
  _updateResult() {
    if (this.outputElement) {
      this.outputElement.textContent = JSON.stringify(this.data, null, 2);
    }
  }

  /**
  * สร้างโครงสร้างเริ่มต้น
  */
  generateInitialStructure() {
    this.data = [
      {
        id: this.nextId++,
        name: 'Item 1',
        level: 1,
        children: [
          {
            id: this.nextId++,
            name: 'Child item 1.1',
            level: 2,
            parentId: 1,
            children: [
              {
                id: this.nextId++,
                name: 'Child item 1.1.1',
                level: 3,
                parentId: 2,
                children: []
              }
            ]
          },
          {
            id: this.nextId++,
            name: 'Child item 1.2',
            level: 2,
            parentId: 1,
            children: []
          }
        ]
      },
      {
        id: this.nextId++,
        name: 'Item 2',
        level: 1,
        children: []
      }
    ];
    this._renderTree();
    this._updateResult();
  }

  /**
  * รับข้อมูลต้นไม้ในรูปแบบ JSON
  * @returns {Array} - ข้อมูลต้นไม้
  */
  getTreeData() {
    return JSON.parse(JSON.stringify(this.data));
  }

  /**
  * กำหนดข้อมูลต้นไม้จาก JSON
  * @param {Array} data - ข้อมูลต้นไม้
  */
  setTreeData(data) {
    this.data = JSON.parse(JSON.stringify(data));
    const findMaxId = (nodes) => {
      let maxId = 0;
      for (const node of nodes) {
        if (node.id > maxId) {
          maxId = node.id;
        }
        if (node.children && node.children.length > 0) {
          const childMaxId = findMaxId(node.children);
          if (childMaxId > maxId) {
            maxId = childMaxId;
          }
        }
      }
      return maxId;
    };
    this.nextId = findMaxId(this.data) + 1;
    this._renderTree();
    this._updateResult();
  }

  /**
  * อัพเดตการตั้งค่า
  * @param {Object} config - การตั้งค่าใหม่
  */
  updateConfig(config) {
    if (config.limitedDepth !== undefined) {
      this.limitedDepth = config.limitedDepth;
    }
    if (config.maxDepth !== undefined) {
      this.maxDepth = config.maxDepth;
    }
    if (config.levelNames !== undefined) {
      this.levelNames = config.levelNames;
    }
    this._renderTree();
  }
}