import { DataLoader } from './data-loader.js';
import { HallOfFameGenerator, HallOfFameQuestion } from './hall-of-fame-generator.js';

class GitHubWrappedHallOfFame {
  private dataLoader: DataLoader;
  private generator?: HallOfFameGenerator;
  private questions: HallOfFameQuestion[] = [];
  private currentIndex = 0;

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

  async init(): Promise<void> {
    try {
      const data = await this.dataLoader.load();
      this.generator = new HallOfFameGenerator(data);
      this.questions = this.generator.getQuestions();
      this.showWelcome();
    } catch (error) {
      this.showError('Erreur de chargement. Verifiez que data.json existe.');
    }
  }

  private showWelcome(): void {
    const container = document.getElementById('app')!;
    const peopleCount = this.generator!.getPeopleCount();
    
    container.innerHTML = `
      <div class="cyber-orbs"></div>
      <a href="/" class="back-button">← Accueil</a>
      <div class="hall-welcome">
        <div class="hall-trophy">🏆</div>
        <h1 class="hall-title">Hall of Fame</h1>
        <p class="hall-subtitle">Chaque membre a son moment de gloire!</p>
        
        <div class="hall-info">
          <div class="hall-info-card">
            <div class="hall-info-number">${peopleCount}</div>
            <div class="hall-info-label">Membres Célèbres</div>
          </div>
          <div class="hall-info-card">
            <div class="hall-info-number">${this.questions.length}</div>
            <div class="hall-info-label">Achievements</div>
          </div>
        </div>

        <button class="hall-start-btn" id="startBtn">
          🌟 Découvrir les Champions
        </button>
        
        <p class="hall-hint">Chaque personne brille dans son domaine unique!</p>
      </div>
    `;

    document.getElementById('startBtn')?.addEventListener('click', () => {
      this.showAchievement(0);
    });
  }

  private showAchievement(index: number): void {
    if (index >= this.questions.length) {
      this.showFinalCelebration();
      return;
    }

    this.currentIndex = index;
    const achievement = this.questions[index];
    const container = document.getElementById('app')!;

    container.innerHTML = `
      <div class="cyber-orbs"></div>
      <a href="/" class="back-button">← Accueil</a>
      <div class="hall-achievement-container">
        <div class="hall-progress">
          <div class="hall-progress-bar">
            <div class="hall-progress-fill" style="width: ${((index + 1) / this.questions.length) * 100}%"></div>
          </div>
          <div class="hall-progress-text">${index + 1} / ${this.questions.length}</div>
        </div>

        <div class="hall-navigation">
          ${index > 0 ? `
            <button class="hall-nav-btn hall-prev-btn" id="prevBtn">
              ← Précédent
            </button>
          ` : '<div></div>'}
          
          <button class="hall-nav-btn hall-next-btn" id="nextBtn">
            ${index < this.questions.length - 1 ? 'Suivant →' : 'Grande Finale 🎉'}
          </button>
        </div>

        <div class="hall-achievement-card">
          <div class="achievement-badge">
            <div class="badge-emoji">${achievement.emoji}</div>
            <div class="badge-ribbon">
              <div class="ribbon-text">${achievement.title}</div>
            </div>
          </div>

          <div class="achievement-person">
            <div class="person-avatar">${this.getInitials(achievement.person)}</div>
            <h2 class="person-name">${achievement.person}</h2>
            <div class="person-category">${achievement.category}</div>
          </div>

          <div class="achievement-stat">
            <div class="stat-label">${achievement.stat.label}</div>
            <div class="stat-value">${achievement.stat.value}</div>
          </div>

          <div class="achievement-description">
            <div class="achievement-icon">🎖️</div>
            <div class="achievement-text">${achievement.achievement}</div>
          </div>

          <div class="achievement-funfact">
            <span class="funfact-icon">✨</span>
            <span class="funfact-text">${achievement.funFact}</span>
          </div>

          ${achievement.special ? `
            <div class="achievement-special">
              <div class="special-badge">🌟 Spécial</div>
              <div class="special-text">${achievement.special.description}</div>
            </div>
          ` : ''}
        </div>
      </div>
    `;

    // Trigger confetti animation
    this.triggerConfetti();

    // Event listeners
    document.getElementById('nextBtn')?.addEventListener('click', () => {
      this.showAchievement(index + 1);
    });

    if (index > 0) {
      document.getElementById('prevBtn')?.addEventListener('click', () => {
        this.showAchievement(index - 1);
      });
    }

    // Keyboard navigation
    const handleKeyPress = (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        document.removeEventListener('keydown', handleKeyPress);
        this.showAchievement(index + 1);
      } else if (e.key === 'ArrowLeft' && index > 0) {
        e.preventDefault();
        document.removeEventListener('keydown', handleKeyPress);
        this.showAchievement(index - 1);
      }
    };
    document.addEventListener('keydown', handleKeyPress);
  }

  private showFinalCelebration(): void {
    const container = document.getElementById('app')!;
    const allPeople = [...new Set(this.questions.map(q => q.person))];

    container.innerHTML = `
      <div class="cyber-orbs"></div>
      <a href="/" class="back-button">← Accueil</a>
      <div class="hall-finale">
        <div class="finale-trophy">🏆</div>
        <h1 class="finale-title">Bravo à Tous!</h1>
        <p class="finale-subtitle">Chacun a brillé à sa manière</p>

        <div class="finale-stats">
          <div class="finale-stat-card">
            <div class="finale-stat-value">${allPeople.length}</div>
            <div class="finale-stat-label">Champions</div>
          </div>
          <div class="finale-stat-card">
            <div class="finale-stat-value">${this.questions.length}</div>
            <div class="finale-stat-label">Achievements</div>
          </div>
        </div>

        <div class="finale-team-grid">
          ${allPeople.map(person => `
            <div class="finale-person-card">
              <div class="finale-person-avatar">${this.getInitials(person)}</div>
              <div class="finale-person-name">${person}</div>
            </div>
          `).join('')}
        </div>

        <div class="finale-message">
          <p class="finale-quote">"Seul on va plus vite, ensemble on va plus loin"</p>
          <p class="finale-thanks">Merci à toute l'équipe pour cette année incroyable!</p>
        </div>

        <div class="finale-actions">
          <button class="finale-btn" id="replayBtn">🔄 Revoir</button>
          <a href="team-quiz.html" class="finale-link">📊 Team Quiz</a>
          <a href="team.html" class="finale-link">📈 Stats</a>
        </div>

        <a href="/" class="home-button">🏠 Retour à l'Accueil</a>
      </div>
    `;

    // Massive confetti!
    this.triggerMassiveConfetti();

    document.getElementById('replayBtn')?.addEventListener('click', () => {
      this.showAchievement(0);
    });
  }

  private getInitials(name: string): string {
    return name
      .split(' ')
      .map(part => part.charAt(0).toUpperCase())
      .join('')
      .substring(0, 2);
  }

  private triggerConfetti(): void {
    // Create simple confetti effect
    const container = document.querySelector('.hall-achievement-container');
    if (!container) return;

    for (let i = 0; i < 30; i++) {
      const confetti = document.createElement('div');
      confetti.className = 'confetti';
      confetti.style.left = Math.random() * 100 + '%';
      confetti.style.animationDelay = Math.random() * 0.5 + 's';
      confetti.style.backgroundColor = this.getRandomColor();
      container.appendChild(confetti);

      setTimeout(() => confetti.remove(), 3000);
    }
  }

  private triggerMassiveConfetti(): void {
    const container = document.querySelector('.hall-finale');
    if (!container) return;

    for (let i = 0; i < 80; i++) {
      const confetti = document.createElement('div');
      confetti.className = 'confetti massive';
      confetti.style.left = Math.random() * 100 + '%';
      confetti.style.animationDelay = Math.random() * 2 + 's';
      confetti.style.backgroundColor = this.getRandomColor();
      container.appendChild(confetti);

      setTimeout(() => confetti.remove(), 5000);
    }
  }

  private getRandomColor(): string {
    const colors = ['#00ffff', '#ff006e', '#b537f2', '#fffd01', '#39ff14', '#ff6c11'];
    return colors[Math.floor(Math.random() * colors.length)];
  }

  private showError(message: string): void {
    const container = document.getElementById('app')!;
    container.innerHTML = `
      <div class="error">
        <h1>Erreur</h1>
        <p>${message}</p>
        <a href="team.html" class="quiz-team-link" style="margin-top: 2rem;">Retour aux Stats</a>
      </div>
    `;
  }
}

// Initialize the Hall of Fame
const hallOfFame = new GitHubWrappedHallOfFame();
hallOfFame.init();