// Course List Component
export class CourseList {
  constructor(onSectionClick) {
    this.container = document.getElementById('courseList');
    this.onSectionClick = onSectionClick;
    this.courseData = null;
  }

  async loadCourseContent() {
    if (this.container?.querySelector('.course-loaded')) {
      return; // Already loaded
    }
    
    try {
      const response = await fetch('/course');
      const data = await response.json();
      this.courseData = data;
      
      const list = document.createElement('div');
      list.className = 'module-items';
      list.classList.add('course-loaded');
      
      if (data.sections && data.sections.length > 0) {
        data.sections.forEach(section => {
          const sectionDiv = this.createSectionItem(section);
          list.appendChild(sectionDiv);
        });
      }
      
      if (this.container) {
        this.container.innerHTML = '';
        this.container.appendChild(list);
      }
    } catch (error) {
      if (this.container) {
        this.container.innerHTML = `<div class="error-message">Error loading course: ${error.message}</div>`;
      }
    }
  }

  createSectionItem(section) {
    const sectionDiv = document.createElement('div');
    sectionDiv.className = 'module-section';
    
    const sectionTitle = document.createElement('h4');
    sectionTitle.textContent = section.title;
    sectionTitle.className = 'module-section-title';
    sectionDiv.appendChild(sectionTitle);
    
    const itemsList = document.createElement('div');
    itemsList.className = 'module-items-list';
    
    // Create clickable navigation item
    const navBtn = document.createElement('button');
    navBtn.className = 'module-item';
    navBtn.textContent = section.title;
    navBtn.addEventListener('click', () => {
      if (this.onSectionClick) {
        this.onSectionClick(section);
      }
    });
    itemsList.appendChild(navBtn);
    
    // Add subsections if any
    if (section.subsections && section.subsections.length > 0) {
      section.subsections.forEach(subsection => {
        const subBtn = document.createElement('button');
        subBtn.className = 'module-item';
        subBtn.style.paddingLeft = '1.5rem';
        subBtn.textContent = subsection.title;
        subBtn.addEventListener('click', () => {
          if (this.onSectionClick) {
            this.onSectionClick(subsection);
          }
        });
        itemsList.appendChild(subBtn);
      });
    }
    
    sectionDiv.appendChild(itemsList);
    return sectionDiv;
  }

  getCourseData() {
    return this.courseData;
  }
}