function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir }) {
  container.innerHTML = `
        <div class="explorer-panel">
            <div class="explorer-toolbar">
                <input type="text" class="explorer-path" id="explorer-path" value="${currentDir || ''}" placeholder="Open a folder..." readonly>
                <button class="explorer-browse-btn" id="explorer-browse" title="Browse folder">&#x1F4C2;</button>
            </div>
            <div class="explorer-tree" id="explorer-tree"></div>
        </div>
    `;

  document.getElementById('explorer-browse')?.addEventListener('click', async () => {
    const dir = await listDirectory(null); // null means open folder dialog
    if (dir) {
      document.getElementById('explorer-path').value = dir.path;
      renderTree(
        document.getElementById('explorer-tree'),
        dir.entries,
        listDirectory,
        onFileOpen,
        dir.path
      );
    }
  });

  if (currentDir) {
    listDirectory(currentDir).then((dir) => {
      if (dir)
        renderTree(
          document.getElementById('explorer-tree'),
          dir.entries,
          listDirectory,
          onFileOpen,
          currentDir
        );
    });
  }
}

function renderTree(container, entries, listDirectory, onFileOpen, _basePath) {
  container.innerHTML = entries
    .map((entry) => {
      if (entry.isDirectory) {
        return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}">
                <span class="tree-icon">&#x25B6;</span>
                <span class="tree-name">${entry.name}</span>
                <div class="tree-children"></div>
            </div>`;
      }
      return `<div class="tree-item tree-file" data-path="${entry.path}">
            <span class="tree-icon">${getFileIcon(entry.name)}</span>
            <span class="tree-name">${entry.name}</span>
        </div>`;
    })
    .join('');

  container.querySelectorAll('.tree-folder').forEach((el) => {
    el.querySelector('.tree-name').addEventListener('click', async () => {
      const isCollapsed = el.classList.contains('collapsed');
      if (isCollapsed) {
        const dir = await listDirectory(el.dataset.path);
        if (dir) {
          const childContainer = el.querySelector('.tree-children');
          renderTree(childContainer, dir.entries, listDirectory, onFileOpen, el.dataset.path);
        }
      }
      el.classList.toggle('collapsed');
      el.querySelector('.tree-icon').textContent = el.classList.contains('collapsed')
        ? '\u25B6'
        : '\u25BC';
    });
  });

  container.querySelectorAll('.tree-file').forEach((el) => {
    el.addEventListener('click', () => onFileOpen(el.dataset.path));
  });
}

function getFileIcon(filename) {
  const ext = filename.split('.').pop().toLowerCase();
  const icons = {
    md: '\u{1F4DD}',
    js: '\u{1F4DC}',
    json: '{}',
    html: '\u{1F310}',
    css: '\u{1F3A8}',
    py: '\u{1F40D}',
    pdf: '\u{1F4D5}',
    txt: '\u{1F4C4}',
  };
  return icons[ext] || '\u{1F4C4}';
}

module.exports = { renderExplorerPanel };