// Module List Component
export class ModuleList {
  constructor(onModuleClick) {
    this.container = document.getElementById('moduleList');
    this.onModuleClick = onModuleClick;
    this.init();
  }

  async init() {
    await this.loadModuleList();
  }

  async loadModuleList() {
    try {
      const response = await fetch('/modules');
      const data = await response.json();
      
      const list = document.createElement('div');
      list.className = 'module-items';
      
      // Add builtins section
      if (data.builtins && data.builtins.length > 0) {
        const builtinsSection = this.createSection('Builtins', data.builtins.slice(0, 20));
        list.appendChild(builtinsSection);
      }
      
      // Add modules section
      if (data.modules && data.modules.length > 0) {
        const modulesSection = this.createSection('Standard Library', data.modules);
        list.appendChild(modulesSection);
      }
      
      if (this.container) {
        this.container.innerHTML = '';
        this.container.appendChild(list);
      }
    } catch (error) {
      if (this.container) {
        this.container.innerHTML = `<div class="error-message">Error loading modules: ${error.message}</div>`;
      }
    }
  }

  createSection(title, items) {
    const section = document.createElement('div');
    section.className = 'module-section';
    
    const sectionTitle = document.createElement('h4');
    sectionTitle.textContent = title;
    sectionTitle.className = 'module-section-title';
    section.appendChild(sectionTitle);
    
    const itemsList = document.createElement('div');
    itemsList.className = 'module-items-list';
    
    items.forEach(item => {
      const fullName = item.full_name || (title === 'Builtins' ? `builtins.${item.name}` : item.name);
      const btn = this.createModuleButton(fullName, item.name);
      itemsList.appendChild(btn);
    });
    
    section.appendChild(itemsList);
    return section;
  }

  createModuleButton(fullName, displayName) {
    const btn = document.createElement('button');
    btn.className = 'module-item';
    btn.textContent = displayName;
    btn.title = fullName;
    btn.addEventListener('click', () => {
      if (this.onModuleClick) {
        this.onModuleClick(fullName);
      }
    });
    return btn;
  }
}