import { DataLoader } from './data-loader.js';
import { StatsCalculator } from './stats-calculator.js';
import { TeamSlideGenerator } from './team-slide-generator.js';
import { Slide } from './types.js';

class GitHubWrappedTeam {
  private dataLoader: DataLoader;
  private statsCalculator?: StatsCalculator;
  private slideGenerator?: TeamSlideGenerator;
  private currentSlide = 0;
  private slides: Slide[] = [];

  constructor() {
    this.dataLoader = new DataLoader();
  }

  async init(): Promise<void> {
    try {
      const data = await this.dataLoader.load();
      this.statsCalculator = new StatsCalculator(data);
      this.slideGenerator = new TeamSlideGenerator(data, this.statsCalculator);
      this.slides = this.slideGenerator.generateTeamSlides();
      this.renderSlides();
      this.setupNavigation();
    } catch (error) {
      this.showError('Échec du chargement des données. Vérifiez que data.json existe.');
    }
  }

  private renderSlides(): void {
    const container = document.getElementById('app')!;
    
    container.innerHTML = `
      <div class="cyber-orbs"></div>
      <a href="/" class="back-button">← Accueil</a>
      <div class="slideshow-container active">
        ${this.slides.map((slide, i) => `
          <div class="slide ${i === 0 ? 'active' : ''}" data-slide="${i}">
            <div class="slide-content">
              ${slide.emoji ? `<div class="slide-emoji">${slide.emoji}</div>` : ''}
              <h2 class="slide-title">${slide.title}</h2>
              ${slide.subtitle ? `<p class="slide-subtitle">${slide.subtitle}</p>` : ''}
              <div class="slide-body">${slide.content}</div>
            </div>
          </div>
        `).join('')}
        
        <div class="slide-counter" id="slideCounter">1 / ${this.slides.length}</div>
        
        <button class="nav-button prev-button" id="prevBtn">←</button>
        <button class="nav-button next-button" id="nextBtn">→</button>
        
        <div class="progress-bar">
          <div class="progress-fill" style="width: ${((this.currentSlide + 1) / this.slides.length) * 100}%"></div>
        </div>

        <a href="/" class="home-button" id="homeBtn" style="display: none; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 300;">🏠 Retour à l'Accueil</a>
      </div>
    `;

    this.updateSlide();
  }

  private updateSlide(): void {
    // Update active slide
    document.querySelectorAll('.slide').forEach((slide, i) => {
      slide.classList.remove('active', 'prev');
      if (i === this.currentSlide) {
        slide.classList.add('active');
      } else if (i < this.currentSlide) {
        slide.classList.add('prev');
      }
    });

    // Update progress bar
    const progressFill = document.querySelector('.progress-fill') as HTMLElement;
    if (progressFill) {
      progressFill.style.width = `${((this.currentSlide + 1) / this.slides.length) * 100}%`;
    }

    // Update slide counter
    const slideCounter = document.getElementById('slideCounter');
    if (slideCounter) {
      slideCounter.textContent = `${this.currentSlide + 1} / ${this.slides.length}`;
    }

    // Update button states
    const prevBtn = document.getElementById('prevBtn') as HTMLButtonElement;
    const nextBtn = document.getElementById('nextBtn') as HTMLButtonElement;
    const homeBtn = document.getElementById('homeBtn') as HTMLAnchorElement;
    if (prevBtn) prevBtn.style.opacity = this.currentSlide === 0 ? '0.3' : '1';
    if (nextBtn) nextBtn.style.opacity = this.currentSlide === this.slides.length - 1 ? '0.3' : '1';
    
    // Show home button on last slide
    if (homeBtn) {
      homeBtn.style.display = this.currentSlide === this.slides.length - 1 ? 'inline-flex' : 'none';
    }
  }

  private setupNavigation(): void {
    document.getElementById('prevBtn')?.addEventListener('click', () => {
      if (this.currentSlide > 0) {
        this.currentSlide--;
        this.updateSlide();
      }
    });

    document.getElementById('nextBtn')?.addEventListener('click', () => {
      if (this.currentSlide < this.slides.length - 1) {
        this.currentSlide++;
        this.updateSlide();
      }
    });

    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft' && this.currentSlide > 0) {
        this.currentSlide--;
        this.updateSlide();
      } else if (e.key === 'ArrowRight' && this.currentSlide < this.slides.length - 1) {
        this.currentSlide++;
        this.updateSlide();
      }
    });
  }

  private showError(message: string): void {
    const container = document.getElementById('app')!;
    container.innerHTML = `
      <div class="error">
        <h1>Erreur</h1>
        <p>${message}</p>
      </div>
    `;
  }
}

// Initialize the app
const app = new GitHubWrappedTeam();
app.init();