/* ============================================================
   Explorer Panel — Resource Pack file tree
   ============================================================ */

function ExplorerPanel({ view, project, onClose }) {
  const [tree, setTree] = React.useState(() => buildPackTree(project));
  const [expanded, setExpanded] = React.useState({
    'assets': true,
    'assets/minecraft': true,
    'assets/minecraft/textures': true,
  });

  const toggleExpand = (path) => {
    setExpanded(prev => ({ ...prev, [path]: !prev[path] }));
  };

  return React.createElement('div', { className: 'explorer-panel' },
    React.createElement('div', { className: 'explorer-panel__header' },
      React.createElement('span', null, 'Resource Pack'),
      React.createElement('button', {
        style: {
          background: 'none', border: 'none', color: 'var(--text-tertiary)',
          cursor: 'pointer', padding: 2,
        },
        onClick: onClose,
      },
        React.createElement(SvgIcon, { name: 'X', size: 12 }),
      ),
    ),
    React.createElement('div', { className: 'explorer-panel__body' },
      React.createElement('div', { className: 'file-tree' },
        renderTreeNode(tree, '', 0, expanded, toggleExpand),
      ),
    ),
  );
}

function buildPackTree(project) {
  // Construct a virtual resource pack tree
  const type = project?.type || 'block';
  const tree = {
    name: 'assets',
    type: 'folder',
    children: [
      {
        name: 'minecraft',
        type: 'folder',
        children: [
          {
            name: 'textures',
            type: 'folder',
            children: [
              { name: 'block', type: 'folder', children: type === 'block' ? [
                { name: 'grass_top.png', type: 'file' },
                { name: 'grass_side.png', type: 'file' },
                { name: 'dirt.png', type: 'file' },
              ] : [] },
              { name: 'item', type: 'folder', children: type === 'item' ? [
                { name: 'custom_item.png', type: 'file' },
              ] : [] },
              { name: 'gui', type: 'folder', children: type === 'gui' ? [
                { name: `${(project?.name || 'gui').replace(/\s+/g, '_').toLowerCase()}.png`, type: 'file' },
              ] : [] },
              { name: 'entity', type: 'folder', children: type === 'creature' ? [
                { name: 'creature.png', type: 'file' },
              ] : [] },
            ],
          },
          {
            name: 'models',
            type: 'folder',
            children: [
              { name: 'block', type: 'folder', children: type === 'block' ? [
                { name: 'grass_block.json', type: 'file' },
              ] : [] },
              { name: 'item', type: 'folder', children: [] },
            ],
          },
        ],
      },
    ],
  };
  return tree;
}

function renderTreeNode(node, path, depth, expanded, toggleExpand) {
  const fullPath = path ? `${path}/${node.name}` : node.name;
  const isExpanded = expanded[fullPath];
  const hasChildren = node.children && node.children.length > 0;

  return React.createElement('div', { key: fullPath },
    React.createElement('div', {
      className: `file-tree__item file-tree__item--${node.type}`,
      onClick: () => hasChildren && toggleExpand(fullPath),
      style: { paddingLeft: `${depth * 12 + 4}px` },
    },
      hasChildren
        ? React.createElement('span', {
          style: {
            width: 10, display: 'inline-block', fontSize: '8px',
            color: 'var(--text-muted)', transform: isExpanded ? 'rotate(90deg)' : 'none',
            transition: 'transform 0.1s',
          }
        }, '▶')
        : React.createElement('span', { style: { width: 10, display: 'inline-block' } }),
      React.createElement('span', { className: 'file-tree__icon' },
        React.createElement(SvgIcon, { name: node.type === 'folder' ? 'Folder' : 'Image', size: 12 }),
      ),
      React.createElement('span', { className: 'file-tree__name' }, node.name),
    ),
    hasChildren && isExpanded && React.createElement('div', { className: 'file-tree__children' },
      node.children.map(child => renderTreeNode(child, fullPath, depth + 1, expanded, toggleExpand))
    ),
  );
}

window.ExplorerPanel = ExplorerPanel;