<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tree Structure with Recursive Cleanup</title>
<style>
  body { font-family: Arial, sans-serif; margin: 20px; }
  #tree { max-width: 400px; }
  .node { margin: 4px 0; }
  .children { margin-left: 20px; }
  .hidden { display: none; }
  .toggle { cursor: pointer; user-select: none; margin-right: 6px; font-weight: bold; }
  .delete-btn {
    margin-left: 10px; cursor: pointer; color: white; background-color: #e74c3c;
    border: none; padding: 2px 6px; border-radius: 3px;
  }
  .delete-btn:hover { background-color: #c0392b; }
</style>
</head>
<body>

<h2>Document Tree</h2>

<div id="tree">
  <div class="node category" data-id="moa_aoa">
    <span class="toggle">▼</span> MOA & AOA
    <div class="children">
      <div class="node year" data-id="2025">
        <span class="toggle">▼</span> 2025
        <div class="children">
          <div class="node month" data-id="february">
            <span class="toggle">▼</span> February
            <div class="children">
              <div class="node document" data-id="agreement">
                Agreement <button class="delete-btn">Delete</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="node category" data-id="moa_aoa_addendum">
    <span class="toggle">▶</span> MOA & AOA - Addendum
  </div>
</div>

<script>
  // Expand/collapse toggling
  document.querySelectorAll('.toggle').forEach(toggle => {
    toggle.addEventListener('click', () => {
      const children = toggle.parentElement.querySelector('.children');
      if (!children) return;
      if (children.classList.contains('hidden')) {
        children.classList.remove('hidden');
        toggle.textContent = '▼';
      } else {
        children.classList.add('hidden');
        toggle.textContent = '▶';
      }
    });
  });

  // Delete button handler
  document.getElementById('tree').addEventListener('click', e => {
    if (e.target.classList.contains('delete-btn')) {
      const docNode = e.target.closest('.node.document');
      if (!docNode) return;

      console.log('Deleting document:', docNode.dataset.id);

      // Start cleanup from parent node
      const parentNode = docNode.parentElement.closest('.node');
      docNode.remove();

      cleanupEmptyParents(parentNode);
    }
  });

  // Recursive cleanup function
  function cleanupEmptyParents(node) {
    if (!node || node.id === 'tree') return;

    const childrenContainer = node.querySelector(':scope > .children');

    // If no .children or no child .node elements, remove this node
    if (!childrenContainer || childrenContainer.querySelectorAll(':scope > .node').length === 0) {
      console.log('Removing empty node:', node.dataset.id);
      const parentNode = node.parentElement.closest('.node');
      node.remove();

      // Recurse upward
      cleanupEmptyParents(parentNode);
    }
  }
</script>

</body>
</html>
