import { DataLoader } from './data-loader.js';
import { TeamQuizGenerator, QuizQuestion } from './team-quiz-generator.js';

class GitHubWrappedQuiz {
  private dataLoader: DataLoader;
  private quizGenerator?: TeamQuizGenerator;
  private questions: QuizQuestion[] = [];
  private currentQuestion = 0;
  private score = 0;
  private answered = false;
  private selectedOption: number | null = null;

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

  async init(): Promise<void> {
    try {
      const data = await this.dataLoader.load();
      this.quizGenerator = new TeamQuizGenerator(data);
      this.questions = this.quizGenerator.getQuestions();
      this.showWelcome();
    } catch (error) {
      this.showError('Failed to load data. Make sure data.json exists.');
    }
  }

  private showWelcome(): void {
    const container = document.getElementById('app')!;
    container.innerHTML = `
      <div class="cyber-orbs"></div>
      <a href="/" class="back-button">← Accueil</a>
      <div class="quiz-welcome">
        <div class="quiz-emoji">🎮</div>
        <h1>Team Quiz</h1>
        <p class="quiz-subtitle">Testez vos connaissances sur votre équipe !</p>
        <div class="quiz-info">
          <div class="quiz-info-item">
            <span class="quiz-info-number">${this.questions.length}</span>
            <span class="quiz-info-label">Questions</span>
          </div>
          <div class="quiz-info-item">
            <span class="quiz-info-number">4</span>
            <span class="quiz-info-label">Options</span>
          </div>
        </div>
        <button class="quiz-start-btn" id="startBtn">Commencer le Quiz</button>
        <p class="quiz-hint">Devinez qui a fait quoi dans votre équipe !</p>
      </div>
    `;

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

  private startQuiz(): void {
    this.currentQuestion = 0;
    this.score = 0;
    this.renderQuestion();
  }

  private renderQuestion(): void {
    const question = this.questions[this.currentQuestion];
    const container = document.getElementById('app')!;
    this.answered = false;
    this.selectedOption = null;

    container.innerHTML = `
      <div class="cyber-orbs"></div>
      <a href="/" class="back-button">← Accueil</a>
      <div class="quiz-stats-fixed">
        <div class="quiz-progress">
          <span class="quiz-current">${this.currentQuestion + 1}</span>
          <span class="quiz-separator">/</span>
          <span class="quiz-total">${this.questions.length}</span>
        </div>
        <div class="quiz-score">
          <span class="quiz-score-label">Score:</span>
          <span class="quiz-score-value">${this.score}</span>
        </div>
      </div>
      <div class="quiz-container">
        
        <div class="quiz-progress-bar">
          <div class="quiz-progress-fill" style="width: ${((this.currentQuestion) / this.questions.length) * 100}%"></div>
        </div>

        <div class="quiz-question-card">
          <div class="quiz-question-emoji">${question.emoji}</div>
          <h2 class="quiz-question-text">${question.question}</h2>
          
          <div class="quiz-options">
            ${question.options.map((option, index) => `
              <button class="quiz-option" data-index="${index}">
                <span class="quiz-option-letter">${String.fromCharCode(65 + index)}</span>
                <span class="quiz-option-text">${option}</span>
              </button>
            `).join('')}
          </div>

          <div class="quiz-feedback" id="feedback" style="display: none;">
            <div class="quiz-feedback-icon" id="feedbackIcon"></div>
            <div class="quiz-feedback-text" id="feedbackText"></div>
            <div class="quiz-explanation" id="explanation"></div>
          </div>

          <button class="quiz-next-btn" id="nextBtn" style="display: none;">
            ${this.currentQuestion < this.questions.length - 1 ? 'Question Suivante' : 'Voir les Resultats'}
          </button>
        </div>
      </div>
    `;

    // Add click handlers for options
    document.querySelectorAll('.quiz-option').forEach(option => {
      option.addEventListener('click', (e) => {
        if (this.answered) return;
        const index = parseInt((e.currentTarget as HTMLElement).dataset.index!);
        this.selectOption(index);
      });
    });

    document.getElementById('nextBtn')?.addEventListener('click', () => {
      this.nextQuestion();
    });
  }

  private selectOption(index: number): void {
    if (this.answered) return;
    
    this.answered = true;
    this.selectedOption = index;
    const question = this.questions[this.currentQuestion];
    const isCorrect = index === question.correctIndex;

    if (isCorrect) {
      this.score++;
    }

    // Update UI
    document.querySelectorAll('.quiz-option').forEach((option, i) => {
      const optionEl = option as HTMLElement;
      optionEl.classList.add('disabled');
      
      if (i === question.correctIndex) {
        optionEl.classList.add('correct');
      } else if (i === index && !isCorrect) {
        optionEl.classList.add('wrong');
      }
    });

    // Show feedback
    const feedback = document.getElementById('feedback')!;
    const feedbackIcon = document.getElementById('feedbackIcon')!;
    const feedbackText = document.getElementById('feedbackText')!;
    const explanation = document.getElementById('explanation')!;
    const nextBtn = document.getElementById('nextBtn')!;

    feedback.style.display = 'block';
    feedback.className = `quiz-feedback ${isCorrect ? 'correct' : 'wrong'}`;
    feedbackIcon.textContent = isCorrect ? '🎉' : '😅';
    feedbackText.textContent = isCorrect ? 'Bonne reponse!' : 'Pas tout a fait...';
    explanation.textContent = question.explanation;
    
    // Update score display
    document.querySelector('.quiz-score-value')!.textContent = this.score.toString();

    // Show next button with animation
    setTimeout(() => {
      nextBtn.style.display = 'block';
    }, 500);
  }

  private nextQuestion(): void {
    if (this.currentQuestion < this.questions.length - 1) {
      this.currentQuestion++;
      this.renderQuestion();
    } else {
      this.showResults();
    }
  }

  private showResults(): void {
    const container = document.getElementById('app')!;
    const percentage = Math.round((this.score / this.questions.length) * 100);
    
    let grade = '';
    let gradeEmoji = '';
    let message = '';

    if (percentage >= 90) {
      grade = 'Expert';
      gradeEmoji = '🏆';
      message = 'Vous connaissez votre équipe par cœur !';
    } else if (percentage >= 70) {
      grade = 'Tres Bien';
      gradeEmoji = '🌟';
      message = 'Excellente connaissance de l\'équipe !';
    } else if (percentage >= 50) {
      grade = 'Bien';
      gradeEmoji = '👍';
      message = 'Pas mal ! Vous suivez bien l\'équipe.';
    } else if (percentage >= 30) {
      grade = 'Peut mieux faire';
      gradeEmoji = '🤔';
      message = 'Il est temps de mieux connaître vos collègues !';
    } else {
      grade = 'Oups!';
      gradeEmoji = '😅';
      message = 'Rejoignez plus de standups !';
    }

    container.innerHTML = `
      <div class="cyber-orbs"></div>
      <a href="/" class="back-button">← Accueil</a>
      <div class="quiz-results">
        <div class="quiz-results-emoji">${gradeEmoji}</div>
        <h1 class="quiz-results-title">Quiz Terminé !</h1>
        
        <div class="quiz-results-score">
          <div class="quiz-results-score-circle">
            <span class="quiz-results-score-number">${this.score}</span>
            <span class="quiz-results-score-total">/ ${this.questions.length}</span>
          </div>
          <div class="quiz-results-percentage">${percentage}%</div>
        </div>

        <div class="quiz-results-grade">
          <span class="quiz-grade-label">Grade:</span>
          <span class="quiz-grade-value">${grade}</span>
        </div>

        <p class="quiz-results-message">${message}</p>

        <div class="quiz-results-actions">
          <button class="quiz-retry-btn" id="retryBtn">Rejouer</button>
          <a href="team.html" class="quiz-team-link">Voir les Stats</a>
        </div>

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

    document.getElementById('retryBtn')?.addEventListener('click', () => {
      // Re-shuffle questions
      this.questions = this.quizGenerator!.getQuestions();
      this.startQuiz();
    });
  }

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

// Initialize the quiz
const quiz = new GitHubWrappedQuiz();
quiz.init();