script.js

const sentences = [
  "ACICT events bring coders, creators, and leaders together under one powerful banner.",
  "Teamwork and dedication fuel every successful ACICT project from start to finish.",
  "Exploring new technologies is a daily habit within the ACICT community.",
  "Creativity meets logic when the ACICT design and coding teams join forces.",
  "ACICT members don’t just participate — they innovate, lead, and inspire others.",
  "Late-night bug fixing and early morning presentations are part of the ACICT life.",
  "In ACICT, every line of code tells a story of collaboration and passion.",
  "Designers and developers in ACICT turn ideas into reality with precision and flair.",
  "ACICT isn’t just a club — it’s a movement built on skill, vision, and unity.",
  "Every successful event begins with a strong plan and an unstoppable ACICT team.",
  "From concept to execution, ACICT members push the limits of what's possible.",
  "The ACICT committee runs on energy, ambition, and lots of WhatsApp messages.",
  "Every deadline met by ACICT is powered by coffee, focus, and good vibes.",
  "At ACICT, innovation is tradition and progress is the only direction.",
  "Great things happen when ACICT heads come together with one shared goal."
];

let currentText = '';
let startTime = null;
let timerInterval = null;
let isTestActive = false;
let testFinished = false;
let hasStartedTyping = false;

const elements = {
  textDisplay: document.getElementById('text-display'),
  typingInput: document.getElementById('typing-input'),
  finishBtn: document.getElementById('finish-btn'),
  resetBtn: document.getElementById('reset-btn'),
  timer: document.getElementById('timer'),
  liveWpm: document.getElementById('live-wpm'),
  liveAccuracy: document.getElementById('live-accuracy'),
  resultsCard: document.getElementById('results-card'),
  finalWpm: document.getElementById('final-wpm'),
  finalAccuracy: document.getElementById('final-accuracy'),
  finalTime: document.getElementById('final-time'),
  tryAgainBtn: document.getElementById('try-again-btn'),
  themeSwitch: document.getElementById('theme-switch')
};

function getRandomSentence() {
  return sentences[Math.floor(Math.random() * sentences.length)];
}

function initializeTest() {
  currentText = getRandomSentence();
  displayText();
  resetStats();
  elements.typingInput.value = '';
  elements.typingInput.disabled = false;
  elements.finishBtn.disabled = true;
  elements.resultsCard.classList.add('hidden');
  isTestActive = false;
  testFinished = false;
  hasStartedTyping = false;
  elements.textDisplay.classList.remove('active');
}

function displayText() {
  elements.textDisplay.innerHTML = currentText.split('').map((char, index) => {
    return `<span class="char" data-index="${index}">${char}</span>`;
  }).join('');
}

function startTest() {
  if (isTestActive) return;
  
  startTime = new Date().getTime();
  isTestActive = true;
  testFinished = false;
  hasStartedTyping = true;
  
  elements.finishBtn.disabled = false;
  elements.textDisplay.classList.add('active');
  
  elements.textDisplay.style.transform = 'scale(1.02)';
  setTimeout(() => {
    elements.textDisplay.style.transform = 'scale(1)';
  }, 200);
  
  startTimer();
}

function startTimer() {
  timerInterval = setInterval(() => {
    if (!isTestActive) return;
    
    const currentTime = new Date().getTime();
    const timeElapsed = Math.floor((currentTime - startTime) / 1000);
    updateTimer(timeElapsed);
    updateLiveStats();
  }, 100);
}

function updateTimer(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  elements.timer.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
  
  elements.timer.style.transform = 'scale(1.05)';
  setTimeout(() => {
    elements.timer.style.transform = 'scale(1)';
  }, 100);
}

function updateLiveStats() {
  const typedText = elements.typingInput.value;
  if (typedText.length === 0) return;
  
  const currentTime = new Date().getTime();
  const timeElapsed = (currentTime - startTime) / 1000 / 60;
  const wordsTyped = typedText.trim().split(/\s+/).length;
  const wpm = Math.round(wordsTyped / timeElapsed) || 0;
  
  let correctChars = 0;
  for (let i = 0; i < typedText.length; i++) {
    if (i < currentText.length && typedText[i] === currentText[i]) {
      correctChars++;
    }
  }
  const accuracy = Math.round((correctChars / typedText.length) * 100) || 0;
  
  animateStatUpdate(elements.liveWpm, wpm);
  animateStatUpdate(elements.liveAccuracy, `${accuracy}%`);
}

function animateStatUpdate(element, newValue) {
  if (element.textContent !== newValue.toString()) {
    element.style.transform = 'scale(1.1)';
    element.style.color = 'var(--accent-color)';
    element.textContent = newValue;
    
    setTimeout(() => {
      element.style.transform = 'scale(1)';
      element.style.color = 'var(--text-primary)';
    }, 200);
  }
}

function highlightText() {
  const typedText = elements.typingInput.value;
  const chars = elements.textDisplay.querySelectorAll('.char');
  
  chars.forEach((char, index) => {
    char.className = 'char';
    
    if (index < typedText.length) {
      if (typedText[index] === currentText[index]) {
        char.classList.add('correct');
      } else {
        char.classList.add('incorrect');
      }
    } else if (index === typedText.length) {
      char.classList.add('current');
    }
  });
}

function finishTest() {
  if (!isTestActive) return;
  
  isTestActive = false;
  testFinished = true;
  clearInterval(timerInterval);
  
  elements.typingInput.disabled = true;
  elements.finishBtn.disabled = true;
  elements.textDisplay.classList.remove('active');
  
  calculateResults();
  showResults();
}

function calculateResults() {
  const typedText = elements.typingInput.value;
  const currentTime = new Date().getTime();
  const timeElapsed = (currentTime - startTime) / 1000;
  const timeInMinutes = timeElapsed / 60;
  
  const wordsTyped = typedText.trim().split(/\s+/).filter(word => word.length > 0).length;
  const wpm = Math.round(wordsTyped / timeInMinutes) || 0;
  
  let correctChars = 0;
  for (let i = 0; i < typedText.length; i++) {
    if (i < currentText.length && typedText[i] === currentText[i]) {
      correctChars++;
    }
  }
  const accuracy = Math.round((correctChars / typedText.length) * 100) || 0;
  
  const minutes = Math.floor(timeElapsed / 60);
  const seconds = Math.floor(timeElapsed % 60);
  const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}`;
  
  elements.finalWpm.textContent = wpm;
  elements.finalAccuracy.textContent = `${accuracy}%`;
  elements.finalTime.textContent = timeString;
}

function showResults() {
  elements.resultsCard.classList.remove('hidden');
  elements.resultsCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
  
  setTimeout(() => {
    elements.resultsCard.style.transform = 'scale(1.02)';
    setTimeout(() => {
      elements.resultsCard.style.transform = 'scale(1)';
    }, 300);
  }, 100);
}

function resetStats() {
  elements.timer.textContent = '0:00';
  elements.liveWpm.textContent = '0';
  elements.liveAccuracy.textContent = '100%';
  if (timerInterval) {
    clearInterval(timerInterval);
  }
}

function resetTest() {
  if (timerInterval) {
    clearInterval(timerInterval);
  }
  
  elements.main-card?.style.setProperty('transform', 'scale(0.98)');
  setTimeout(() => {
    elements.main-card?.style.setProperty('transform', 'scale(1)');
  }, 200);
  
  initializeTest();
}

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'light' ? null : 'light';
  
  document.body.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
  
  document.documentElement.setAttribute('data-theme', newTheme || '');
  localStorage.setItem('theme', newTheme || 'dark');
  
  setTimeout(() => {
    document.body.style.transition = '';
  }, 500);
}

function loadTheme() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme === 'light') {
    document.documentElement.setAttribute('data-theme', 'light');
    elements.themeSwitch.checked = true;
  }
}

elements.typingInput.addEventListener('input', (e) => {
  if (!hasStartedTyping && !isTestActive && e.target.value.length > 0) {
    startTest();
  }
  
  if (!isTestActive) return;
  
  highlightText();
  
  if (elements.typingInput.value.length >= currentText.length) {
    setTimeout(finishTest, 500);
  }
});

elements.typingInput.addEventListener('keydown', (e) => {
  if (testFinished) {
    e.preventDefault();
    return;
  }
});

elements.typingInput.addEventListener('focus', () => {
  if (!isTestActive && !testFinished) {
    elements.typingInput.style.transform = 'scale(1.01)';
    elements.typingInput.style.boxShadow = '0 0 0 3px rgba(73, 80, 87, 0.15)';
  }
});

elements.typingInput.addEventListener('blur', () => {
  elements.typingInput.style.transform = 'scale(1)';
  elements.typingInput.style.boxShadow = '';
});

elements.finishBtn.addEventListener('click', finishTest);
elements.resetBtn.addEventListener('click', resetTest);
elements.tryAgainBtn.addEventListener('click', resetTest);
elements.themeSwitch.addEventListener('change', toggleTheme);

document.addEventListener('DOMContentLoaded', () => {
  loadTheme();
  initializeTest();
  
  elements.typingInput.focus();
});