main.js

import './style.css';
import confetti from 'canvas-confetti';

// App Configuration
const SETTINGS = {
  timePerQuestion: 30, // seconds
  storageKey: 'icd11_study_progress',
};

// Application State
let state = {
  allQuestions: [],        // Every parsed question from the file
  sessionQuestions: [],    // The current active set (Sub-set or Full)
  incorrectAnswers: [],    // Tracking failures for Review Mode
  currentIndex: 0,
  score: 0,
  timerInterval: null,
  timeLeft: 0,
  canAnswer: true,
  mode: 'marathon',        // 'marathon', 'quick', or 'review'
};

// UI Elements
const screens = {
  loader: document.getElementById('loader-screen'),
  start: document.getElementById('start-screen'),
  quiz: document.getElementById('quiz-panel'),
  result: document.getElementById('result-screen'),
};

const elements = {
  questionText: document.getElementById('question-text'),
  optionsContainer: document.getElementById('options-container'),
  nextBtn: document.getElementById('next-btn'),
  timer: document.getElementById('timer'),
  progressBar: document.getElementById('progress-bar'),
  currentQNum: document.getElementById('current-q-num'),
  totalQNum: document.getElementById('total-q-num'),
  scoreVal: document.getElementById('score-val'),
  resultMsg: document.getElementById('result-msg'),
  restartBtn: document.getElementById('restart-btn'),
  feedbackOverlay: document.getElementById('feedback-overlay'),
  explanationText: document.getElementById('explanation-text'),
  
  // New Session Buttons
  marathonBtn: document.getElementById('marathon-btn'),
  quickBtn: document.getElementById('quick-btn'),
  continueBtn: document.getElementById('continue-btn'),
  reviewBtn: document.getElementById('review-btn'),
  
  // Progress Dashboard
  progressText: document.getElementById('progress-text'),
  miniProgress: document.getElementById('mini-progress'),
};

/**
 * INITIALIZATION
 * Fetches the master file and setups the dashboard
 */
async function init() {
  try {
    const response = await fetch('./icd11-quiz.txt');
    if (!response.ok) throw new Error("File not found");
    const text = await response.text();
    state.allQuestions = parseTxtData(text);
    
    if (state.allQuestions.length === 0) {
      alert("Critical Error: No questions parsed from icd11-quiz.txt");
      return;
    }

    loadSavedProgress();
    updateDashboard();
    showScreen('start');
  } catch (error) {
    console.error("Initialization Failed:", error);
    alert("Please ensure icd11-quiz.txt is in the project root.");
  }
}

/**
 * PARSER
 * Specifically tuned for the 'Question: / Option: / Answer: / ---' format
 */
function parseTxtData(text) {
  const questions = [];
  const blocks = text.split('---');
  
  blocks.forEach(block => {
    const lines = block.split('\n').map(l => l.trim()).filter(l => l);
    if (lines.length < 5) return;
    
    let q = { options: [] };
    lines.forEach(line => {
      const lower = line.toLowerCase();
      if (lower.startsWith('question:')) q.question = line.substring(9).trim();
      else if (lower.startsWith('option:')) q.options.push(line.substring(7).trim());
      else if (lower.startsWith('answer:')) q.answer = line.substring(7).trim();
      else if (lower.startsWith('explanation:')) q.explanation = line.substring(12).trim();
    });
    
    if (q.question && q.options.length >= 2 && q.answer) {
      questions.push(q);
    }
  });
  return questions;
}

/**
 * SESSION MANAGEMENT
 */
function loadSavedProgress() {
  const saved = localStorage.getItem(SETTINGS.storageKey);
  if (saved) {
    const data = JSON.parse(saved);
    state.currentIndex = data.index || 0;
    state.score = data.score || 0;
    state.incorrectAnswers = data.incorrect || [];
    
    if (state.currentIndex > 0) {
      elements.continueBtn.classList.remove('hidden');
    }
  }
}

function saveSession() {
  const data = {
    index: state.currentIndex,
    score: state.score,
    incorrect: state.incorrectAnswers,
    total: state.allQuestions.length
  };
  localStorage.setItem(SETTINGS.storageKey, JSON.stringify(data));
}

function updateDashboard() {
  const total = state.allQuestions.length;
  const current = state.currentIndex;
  elements.progressText.textContent = `${current} / ${total} Mastered`;
  const percent = (current / total) * 100;
  elements.miniProgress.style.width = `${percent}%`;
}

/**
 * START MODES
 */
function startMarathon() {
  state.mode = 'marathon';
  state.sessionQuestions = [...state.allQuestions]; // Original Order
  state.currentIndex = 0;
  state.score = 0;
  state.incorrectAnswers = [];
  launchQuiz();
}

function startQuick() {
  state.mode = 'quick';
  // Shuffle and Pick 20
  state.sessionQuestions = [...state.allQuestions]
    .sort(() => Math.random() - 0.5)
    .slice(0, 20);
  state.currentIndex = 0;
  state.score = 0;
  launchQuiz();
}

function continueSession() {
  state.mode = 'marathon';
  state.sessionQuestions = [...state.allQuestions];
  // Index and Score already loaded from storage
  launchQuiz();
}

function startReview() {
  if (state.incorrectAnswers.length === 0) return;
  state.mode = 'review';
  state.sessionQuestions = [...state.incorrectAnswers];
  state.currentIndex = 0;
  state.score = 0;
  launchQuiz();
}

function launchQuiz() {
  elements.totalQNum.textContent = state.sessionQuestions.length;
  showScreen('quiz');
  loadQuestion();
}

/**
 * QUIZ LOOP
 */
function loadQuestion() {
  const currentQuestion = state.sessionQuestions[state.currentIndex];
  
  state.canAnswer = true;
  elements.nextBtn.classList.add('hidden');
  elements.feedbackOverlay.classList.add('hidden');
  elements.optionsContainer.innerHTML = '';
  
  elements.questionText.textContent = currentQuestion.question;
  elements.currentQNum.textContent = state.currentIndex + 1;
  
  const progress = (state.currentIndex / state.sessionQuestions.length) * 100;
  elements.progressBar.style.width = `${progress}%`;

  currentQuestion.options.forEach((option) => {
    const btn = document.createElement('button');
    btn.className = 'option-btn';
    btn.textContent = option;
    btn.addEventListener('click', () => handleSelectOption(btn, option));
    elements.optionsContainer.appendChild(btn);
  });

  startTimer();
}

function handleSelectOption(btn, selectedOption) {
  if (!state.canAnswer) return;
  
  clearInterval(state.timerInterval);
  state.canAnswer = false;
  
  const currentQuestion = state.sessionQuestions[state.currentIndex];
  const isCorrect = selectedOption === currentQuestion.answer;
  
  if (isCorrect) {
    state.score++;
    btn.classList.add('correct');
    triggerMiniConfetti();
  } else {
    btn.classList.add('wrong');
    // Store for review later (don't add duplicates)
    if (!state.incorrectAnswers.some(q => q.question === currentQuestion.question)) {
        state.incorrectAnswers.push(currentQuestion);
    }
    
    Array.from(elements.optionsContainer.children).forEach((child) => {
      if (child.textContent === currentQuestion.answer) {
        child.classList.add('correct');
      }
    });
  }

  if (currentQuestion.explanation) {
    elements.explanationText.textContent = currentQuestion.explanation;
    elements.feedbackOverlay.classList.remove('hidden');
  }
  
  elements.nextBtn.classList.remove('hidden');
  
  // Save progress automatically after every question in marathon
  if (state.mode === 'marathon') saveSession();
}

/**
 * HELPERS
 */
function startTimer() {
  clearInterval(state.timerInterval);
  state.timeLeft = SETTINGS.timePerQuestion;
  elements.timer.textContent = `${state.timeLeft}s`;
  
  state.timerInterval = setInterval(() => {
    state.timeLeft--;
    elements.timer.textContent = `${state.timeLeft}s`;
    
    if (state.timeLeft <= 0) {
      clearInterval(state.timerInterval);
      if (state.canAnswer) handleTimeOut();
    }
  }, 1000);
}

function handleTimeOut() {
  state.canAnswer = false;
  const currentQuestion = state.sessionQuestions[state.currentIndex];
  
  Array.from(elements.optionsContainer.children).forEach((child) => {
    if (child.textContent === currentQuestion.answer) {
      child.classList.add('correct');
    }
  });

  elements.explanationText.textContent = "Time's up! " + (currentQuestion.explanation || "");
  elements.feedbackOverlay.classList.remove('hidden');
  elements.nextBtn.classList.remove('hidden');
}

function handleNext() {
  state.currentIndex++;
  
  if (state.currentIndex < state.sessionQuestions.length) {
    loadQuestion();
  } else {
    finishQuiz();
  }
}

function finishQuiz() {
  elements.progressBar.style.width = '100%';
  elements.scoreVal.textContent = state.score;
  
  const percentage = (state.score / state.sessionQuestions.length) * 100;
  if (percentage >= 70) {
    elements.resultMsg.textContent = "Excellent Work!";
    triggerBigConfetti();
  } else {
    elements.resultMsg.textContent = "Keep Practicing!";
  }

  // Show review button if there are mistakes
  if (state.incorrectAnswers.length > 0) {
    elements.reviewBtn.classList.remove('hidden');
  } else {
    elements.reviewBtn.classList.add('hidden');
  }
  
  showScreen('result');
  updateDashboard();
}

function showScreen(screenId) {
  Object.values(screens).forEach((screen) => screen.classList.add('hidden'));
  screens[screenId].classList.remove('hidden');
}

/**
 * FX
 */
function triggerMiniConfetti() {
  confetti({ particleCount: 15, spread: 50, origin: { y: 0.7 }, colors: ['#6366f1', '#22d3ee'] });
}

function triggerBigConfetti() {
  const end = Date.now() + 2 * 1000;
  const colors = ['#6366f1', '#a855f7'];

  (function frame() {
    confetti({ particleCount: 3, angle: 60, spread: 55, origin: { x: 0 }, colors: colors });
    confetti({ particleCount: 3, angle: 120, spread: 55, origin: { x: 1 }, colors: colors });
    if (Date.now() < end) requestAnimationFrame(frame);
  }());
}

// Event Listeners
elements.marathonBtn.addEventListener('click', startMarathon);
elements.quickBtn.addEventListener('click', startQuick);
elements.continueBtn.addEventListener('click', continueSession);
elements.reviewBtn.addEventListener('click', startReview);
elements.nextBtn.addEventListener('click', handleNext);
elements.restartBtn.addEventListener('click', () => {
  if (confirm("Reset Marathon progress?")) {
      state.currentIndex = 0;
      state.score = 0;
      saveSession();
      startMarathon();
  }
});

init();