// Main Application
import { ThemeToggle } from './components/ThemeToggle.js';
import { Sidebar } from './components/Sidebar.js';
import { SearchForm } from './components/SearchForm.js';
import { SearchBar } from './components/SearchBar.js';
import { LanguageSelector } from './components/LanguageSelector.js';
import { ModuleList } from './components/ModuleList.js';
import { CourseList } from './components/CourseList.js';
import { Results } from './components/Results.js';
import { Tabs } from './components/Tabs.js';

class App {
  constructor() {
    this.results = new Results();
    this.searchBar = null;
    this.languageSelector = null;
    this.moduleList = null;
    this.courseList = null;
    this.currentObject = '';
    this.currentLang = '';
    this.init();
  }

  async init() {
    // Initialize components
    new ThemeToggle();
    new Sidebar();
    new SearchForm();
    
    // Initialize language selector
    this.languageSelector = new LanguageSelector((langCode) => {
      this.currentLang = langCode;
      if (this.currentObject) {
        this.fetchDocumentation(this.currentObject, langCode);
      }
    });

    // Initialize search bar
    this.searchBar = new SearchBar(
      (query) => {
        this.currentObject = query;
        this.fetchDocumentation(query, this.languageSelector.getCurrentLanguage());
      },
      (fullName) => {
        this.currentObject = fullName;
      }
    );

    this.moduleList = new ModuleList((fullName) => {
      this.searchBar.setValue(fullName);
      this.currentObject = fullName;
      this.fetchDocumentation(fullName, this.languageSelector.getCurrentLanguage());
    });

    this.courseList = new CourseList((section) => {
      this.results.scrollToSection(section);
    });

    new Tabs((tabName) => {
      if (tabName === 'course') {
        this.loadCourseContent();
      }
    });
  }

  async fetchDocumentation(objectName, targetLang) {
    if (!objectName || objectName.trim().length === 0) {
      return;
    }

    // Show loading with progress bar
    const loadingMessage = targetLang 
      ? `Translating documentation to ${this.getLanguageName(targetLang)}...`
      : 'Loading documentation...';
    this.results.showLoading(loadingMessage, true);

    try {
      const params = new URLSearchParams({ object: objectName.trim() });
      if (targetLang) {
        params.append('lang', targetLang);
      }
      
      const response = await fetch(`/docs?${params}`);
      const data = await response.json();
      
      // Complete progress animation
      if (this.results.loadingProgress) {
        this.results.loadingProgress.complete();
      }
      
      // Small delay for smooth transition
      await new Promise(resolve => setTimeout(resolve, 200));
      
      if (data.error) {
        this.results.showError(`Error: ${data.error}`);
        return;
      }
      
      this.results.displayDocumentation(data);
      
    } catch (error) {
      if (this.results.loadingProgress) {
        this.results.loadingProgress.hide();
      }
      this.results.showError(`Network error: ${error.message}`);
    }
  }

  getLanguageName(langCode) {
    const langMap = {
      'de': 'German',
      'fr': 'French',
      'es': 'Spanish',
      'it': 'Italian',
      'pt': 'Portuguese',
      'ru': 'Russian'
    };
    return langMap[langCode] || langCode;
  }

  async loadCourseContent() {
    await this.courseList.loadCourseContent();
    const courseData = this.courseList.getCourseData();
    if (courseData) {
      this.results.displayCourse(courseData);
    }
  }
}

// Initialize app when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => new App());
} else {
  new App();
}