script.js

(function(){
  const EN_WORDS = {
    easy: (
      "the be to of and a in that have I it for not on with he as you do at this but his by from they we say her she " +
      "or an will my one all would there their what so up out if about who get which go me when make can like time " +
      "no just him know take people into year your good some could them see other than then now look only come its " +
      "over think also back after use two how our work first well way even new want because any these give day most " +
      "us small big fast slow red blue black white green light dark open close start stop move play read write speak " +
      "listen learn think jump walk run build create change simple strong clear fresh smart quick happy ready early " +
      "late near far clean warm cold long short free true real bright quiet solid tiny wide broad sharp smooth easy " +
      "modern future better best next current random useful common rare local global simple strong steady clever gentle " +
      "bold brain mind spirit hope peace dream faith soul star sky sea wave wind sun moon cloud rain storm earth tree " +
      "leaf flower seed root forest river mountain rock hill stone field farm city town road street path door window " +
      "house room wall floor table chair bed desk book page line word sound voice song music art picture color shape"
    ).split(" "),

    medium: (
      "system develop process feature quality report project design market decision function structure understand " +
      "together often analysis remember important knowledge material technology available community however example " +
      "achieve continue increase decision individual government position possible without pressure standard resource " +
      "industry information platform performance context pattern network relation strategy support progress creative " +
      "response service control interface behavior dynamic storage component architecture collection condition " +
      "dictionary reference execution sequence solution variable algorithm function expression statement iteration " +
      "operator operand attribute property method parameter argument type instance class object module package"
    ).split(" "),

    hard: (
      "asynchronous polymorphism entrepreneurship interdependence characteristically disproportionate infrastructure " +
      "nevertheless specifically extraordinarily unpredictable simultaneously sophisticated pseudo-random acknowledgment " +
      "ambiguous implementation configuration performance optimization authentication documentation internationalization " +
      "decentralization synchronization virtualization observability extensibility compatibility maintainability " +
      "parallelization comprehensibility reproducibility interoperability microservices containerization orchestration"
    ).split(" ")
  };

  const BN_WORDS = {
    easy: (
      "আমি তুমি সে আমরা তারা আকাশ নদী জল মাটি ফল ফুল আলো বাতাস ঘর কথা গান বাগান কাজ সুন্দর আজ কাল সকাল রাত ছোট বড় নতুন বন্ধু " +
      "পাখি কলম বই পড়া দেখা ইচ্ছা চলা পথ বলা শোনা জানা হাসি খেলা ঘুম দৌড় বসা দাঁড়ানো বসন্ত বর্ষা শীত গরম নীল সবুজ লাল হলুদ সাদা " +
      "শান্ত মিষ্টি সহজ দ্রুত ধীরে কাছে দূরে আগে পরে এখন আবার কখনো নদী নালা পাহাড় ঝরণা মেঘ বৃষ্টি রোদ বাতাস পাখি ডানা পাতা গাছ " +
      "ফল মূল ধান মাঠ সবুজ ঘাস নদী চর জেলে নৌকা দাঁড় হাওয়া রাত তারা চাঁদ সূর্য কিরণ সকাল ভোর সন্ধ্যা আলো ছায়া শব্দ গান সুর"
    ).split(" "),

    medium: (
      "কম্পিউটার প্রযুক্তি বাংলাদেশ সমাজ সংস্কৃতি সাহিত্য ইতিহাস বিজ্ঞান শিক্ষা জীবন উন্নয়ন অগ্রগতি পরিবর্তন সাধারণ সম্ভাবনা চেষ্টা " +
      "অভিজ্ঞতা স্বাধীনতা গুরুত্ব পরিকল্পনা সাফল্য দায়িত্ব অধিকার পরিবর্তন সচেতনতা আনন্দ ভালোবাসা পরিচ্ছন্ন যোগাযোগ তথ্য বিশ্লেষণ " +
      "প্রক্রিয়া সৃজনশীলতা নিরাপত্তা নির্ভুলতা অবিচলতা ধারাবাহিকতা সহযোগিতা নীতি বাস্তবতা গবেষণা আবিষ্কার উদ্ভাবন পরিবেশ"
    ).split(" "),

    hard: (
      "আন্তর্জাতিক বিশ্ববিদ্যালয়ের অবকাঠামোগত কৃত্রিম বুদ্ধিমত্তা পর্যালোচনা প্রয়োজনীয়তা পারস্পরিক সংবেদনশীল বৈচিত্র্যময় প্রগতিশীল " +
      "মনস্তাত্ত্বিক রূপান্তরকরণ স্থিতিশীলতা স্বায়ত্তশাসন প্রযুক্তিগত দায়িত্বশীলতা প্রাতিষ্ঠানিক প্রবর্তন সমন্বিতকরণ পুনর্গঠন " +
      "বহুমাত্রিকতা প্রত্যয়নযোগ্যতা আন্তঃক্রিয়াশীলতা কার্যকারিতা পরিমাপযোগ্যতা আধুনিকীকরণ বিশ্বায়ন স্বনির্ভরতা নীতিশাস্ত্র"
    ).split(" ")
  };

  const BN_QUOTES = [
    "জীবন মানেই প্রতিনিয়ত নতুন কিছু শেখা এবং আত্মবিশ্বাসের সাথে সামনের দিকে এগিয়ে চলা।",
    "সাফল্যের কোনো গোপন সূত্র নেই, এটি হলো প্রস্তুতি, কঠোর পরিশ্রম এবং ব্যর্থতা থেকে শিক্ষা নেওয়ার ফল।",
    "যে নদী গভীর তার প্রবাহ ধীর ও শান্ত, তেমনি জ্ঞানী মানুষ সর্বদাই সহনশীল ও বিনয়ী হন।",
    "শিক্ষা কেবল বইয়ের পাতায় সীমাবদ্ধ নয়, এটি মানুষের দৃষ্টিভঙ্গি ও জীবনের সঠিক পথ নির্দেশ করে।",
    "আমাদের আজকের কর্মই নির্ধারণ করবে আমাদের আগামীকালের ভবিষ্যৎ এবং অর্জনের উচ্চতা।",
    "প্রকৃতির রূপ ও নীরবতা মানুষের অশান্ত মনকে প্রশান্তি দেয় এবং নতুন শক্তি জোগায়।",
    "একটি ভালো বই হলো একজন বিশ্বস্ত বন্ধুর মতো, যা জীবনের সঠিক দিশা দেখাতে সাহায্য করে।"
  ];

  let mode = 'words'; // 'words' | 'quotes'
  let lang = 'en';
  let diff = 'easy';
  let targetString = '';
  let typed = '';
  let startTime = null;
  let timerId = null;
  let errorCount = 0;
  let isFetchingQuote = false;

  const passageEl = document.getElementById('passage');
  const input = document.getElementById('hiddenInput');
  const stage = document.getElementById('stage');
  const overlay = document.getElementById('overlay');
  const statWpm = document.getElementById('statWpm');
  const statAcc = document.getElementById('statAcc');
  const statTime = document.getElementById('statTime');
  const statErr = document.getElementById('statErr');
  const diffSeg = document.getElementById('diffSeg');

  function getRandomWord(l, d){
    const bank = l === 'en' ? EN_WORDS[d] : BN_WORDS[d];
    return bank[Math.floor(Math.random() * bank.length)];
  }

  function fetchEnglishQuoteSync(){
    const fallbackQuotes = [
      "The only way to do great work is to love what you do.",
      "Stay hungry, stay foolish. Innovation distinguishes between a leader and a follower.",
      "Life is what happens when you are busy making other plans.",
      "Success is not final, failure is not fatal: it is the courage to continue that counts.",
      "Knowledge is power. Information is liberating. Education is the premise of progress.",
      "Simplicity is the soul of efficiency and elegance in design.",
      "Strive not to be a success, but rather to be of value.",
      "Your time is limited, so don't waste it living someone else's life."
    ];
    return fallbackQuotes[Math.floor(Math.random() * fallbackQuotes.length)];
  }

  function getBanglaQuote(){
    return BN_QUOTES[Math.floor(Math.random() * BN_QUOTES.length)];
  }

  function appendMoreContent(){
    if(mode === 'quotes'){
      let quoteText = lang === 'en' ? fetchEnglishQuoteSync() : getBanglaQuote();
      targetString = targetString ? targetString + ' ' + quoteText : quoteText;
      
      // Async background fetch to enrich API quotes if online
      if(lang === 'en' && window.navigator.onLine){
        fetch('https://dummyjson.com/quotes/random')
          .then(res => res.json())
          .then(data => {
            if(data && data.quote){
              targetString += ' ' + data.quote;
              renderPassage();
            }
          })
          .catch(()=>{});
      }
    } else {
      let words = [];
      for(let i = 0; i < 35; i++){
        words.push(getRandomWord(lang, diff));
      }
      const wordStr = words.join(' ');
      targetString = targetString ? targetString + ' ' + wordStr : wordStr;
    }

    renderPassage();
  }

  function resetSession(){
    targetString = '';
    typed = '';
    startTime = null;
    errorCount = 0;
    isTestFinished = false;
    clearInterval(timerId);
    statWpm.textContent = '0';
    statAcc.textContent = '100%';
    statTime.textContent = mode === 'test' ? testDuration + 's' : '0s';
    if(statRightWords) statRightWords.textContent = '0';
    if(statWrongWords) statWrongWords.textContent = '0';
    if(statRightLetters) statRightLetters.textContent = '0';
    if(statWrongLetters) statWrongLetters.textContent = '0';
    stage.classList.remove('done');
    overlay.style.display = 'flex';
    passageEl.className = lang === 'bn' ? 'bangla' : '';

    appendMoreContent();
    input.value = '';
  }

  function renderPassage(){
    let html = '';
    const words = targetString.split(' ');
    let globalIdx = 0;

    words.forEach((w, wIdx) => {
      html += '<span class="word-unit" style="display: inline-block; white-space: nowrap;">';
      for(let i = 0; i < w.length; i++){
        const ch = w[i];
        let cls = '';
        if(globalIdx < typed.length){
          cls = typed[globalIdx] === ch ? 'correct' : 'incorrect';
        } else if(globalIdx === typed.length){
          cls = 'current';
        }
        html += `<span class="${cls}">${escapeHtml(ch)}</span>`;
        globalIdx++;
      }
      html += '</span>';

      // Trailing space after word
      if(wIdx < words.length - 1){
        let spaceCls = '';
        if(globalIdx < typed.length){
          spaceCls = typed[globalIdx] === ' ' ? 'correct' : 'incorrect';
        } else if(globalIdx === typed.length){
          spaceCls = 'current';
        }
        html += `<span class="${spaceCls}">&nbsp;</span>`;
        globalIdx++;
      }
    });

    passageEl.innerHTML = html;

    // Smooth line scrolling to follow the cursor line downward
    const currentSpan = passageEl.querySelector('.current');
    if(currentSpan){
      currentSpan.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
    }
  }

  function escapeHtml(s){
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }

  function startTimerIfNeeded(){
    if(startTime) return;
    startTime = Date.now();
    timerId = setInterval(updateLiveStats, 250);
  }

  const statRightWords = document.getElementById('statRightWords');
  const statWrongWords = document.getElementById('statWrongWords');
  const statRightLetters = document.getElementById('statRightLetters');
  const statWrongLetters = document.getElementById('statWrongLetters');

  let testDuration = 60; // default 60s for timed test mode
  let isTestFinished = false;

  function updateLiveStats(){
    if(!startTime || isTestFinished) return;
    const elapsedSec = (Date.now() - startTime) / 1000;
    
    // Countdown handling for Timed Test mode
    if(mode === 'test'){
      const remainingSec = Math.max(0, Math.ceil(testDuration - elapsedSec));
      const mins = Math.floor(remainingSec / 60);
      const secs = remainingSec % 60;
      statTime.textContent = mins > 0 ? `${mins}m ${secs < 10 ? '0' : ''}${secs}s` : `${secs}s`;
      
      if(elapsedSec >= testDuration){
        finishTimedTest();
        return;
      }
    } else {
      const elapsedSecInt = Math.round(elapsedSec);
      const mins = Math.floor(elapsedSecInt / 60);
      const secs = elapsedSecInt % 60;
      statTime.textContent = mins > 0 ? `${mins}m ${secs < 10 ? '0' : ''}${secs}s` : `${secs}s`;
    }

    // Character Statistics
    let rightLetters = 0;
    let wrongLetters = 0;
    for(let i = 0; i < typed.length; i++){
      if(typed[i] === targetString[i]){
        rightLetters++;
      } else {
        wrongLetters++;
      }
    }

    // Word Statistics
    const targetWords = targetString.slice(0, typed.length).split(' ');
    const typedWords = typed.split(' ');
    let rightWords = 0;
    let wrongWords = 0;

    for(let i = 0; i < typedWords.length - 1; i++){
      if(typedWords[i] === targetWords[i]){
        rightWords++;
      } else {
        wrongWords++;
      }
    }

    const minutes = elapsedSec / 60;
    const wpm = minutes > 0 ? Math.round((rightLetters/5) / minutes) : 0;
    const acc = typed.length ? Math.round((rightLetters / typed.length) * 100) : 100;
    
    statWpm.textContent = wpm;
    statAcc.textContent = acc + '%';
    if(statRightWords) statRightWords.textContent = rightWords;
    if(statWrongWords) statWrongWords.textContent = wrongWords;
    if(statRightLetters) statRightLetters.textContent = rightLetters;
    if(statWrongLetters) statWrongLetters.textContent = wrongLetters;
  }

  function finishTimedTest(){
    isTestFinished = true;
    clearInterval(timerId);
    
    // Final stats calculation
    let rightLetters = 0;
    let wrongLetters = 0;
    for(let i = 0; i < typed.length; i++){
      if(typed[i] === targetString[i]) rightLetters++;
      else wrongLetters++;
    }
    const targetWords = targetString.slice(0, typed.length).split(' ');
    const typedWords = typed.split(' ');
    let rightWords = 0;
    let wrongWords = 0;
    for(let i = 0; i < typedWords.length - 1; i++){
      if(typedWords[i] === targetWords[i]) rightWords++;
      else wrongWords++;
    }

    const minutes = testDuration / 60;
    const wpm = minutes > 0 ? Math.round((rightLetters/5) / minutes) : 0;
    const acc = typed.length ? Math.round((rightLetters / typed.length) * 100) : 100;

    // Show popup modal with results
    document.getElementById('modalWpm').textContent = wpm;
    document.getElementById('modalAcc').textContent = acc + '%';
    document.getElementById('modalRightWords').textContent = rightWords;
    document.getElementById('modalWrongWords').textContent = wrongWords;
    document.getElementById('modalRightLetters').textContent = rightLetters;
    document.getElementById('modalWrongLetters').textContent = wrongLetters;
    
    document.getElementById('resultModal').classList.add('active');
    saveHistory();
  }

  // Virtual Keyboard Layout
  const KB_LAYOUT = [
    ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Backspace'],
    ['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
    ['Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", 'Enter'],
    ['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift'],
    ['Space']
  ];

  function renderKeyboard(){
    const kbEl = document.getElementById('keyboardPanel');
    if(!kbEl) return;
    let html = '';
    KB_LAYOUT.forEach(row => {
      html += '<div class="kb-row">';
      row.forEach(k => {
        let cls = 'kb-key';
        if(k === 'Space') cls += ' space';
        else if(['Backspace', 'Tab', 'Caps', 'Enter', 'Shift'].includes(k)) cls += ' wide';
        
        let keyId = k === 'Space' ? 'space' : k.toLowerCase();
        html += `<div class="${cls}" data-key="${keyId}">${k}</div>`;
      });
      html += '</div>';
    });
    kbEl.innerHTML = html;
  }

  function highlightKey(keyStr){
    document.querySelectorAll('.kb-key').forEach(el => el.classList.remove('active'));
    if(!keyStr) return;
    let targetId = keyStr.toLowerCase();
    if(keyStr === ' ') targetId = 'space';
    const activeEl = document.querySelector(`.kb-key[data-key="${CSS.escape(targetId)}"]`);
    if(activeEl){
      activeEl.classList.add('active');
      setTimeout(() => activeEl.classList.remove('active'), 140);
    }
  }

  input.addEventListener('keydown', (e)=>{
    highlightKey(e.key);
    if(e.key === 'Escape'){
      endSession();
      return; 
    }
    if(e.key === 'Backspace'){
      e.preventDefault();
      if(typed.length > 0){ 
        typed = typed.slice(0, -1); 
        renderPassage(); 
        updateLiveStats(); 
      }
      return;
    }
    if(e.key.length !== 1) return;
    
    e.preventDefault();
    startTimerIfNeeded();
    
    const idx = typed.length;
    
    // Auto-fetch next quote/words seamless stream when approaching end
    if(targetString.length - idx < 60){
      appendMoreContent();
    }

    if(e.key !== targetString[idx]){
      errorCount++;
    }
    
    typed += e.key;
    renderPassage();
    updateLiveStats();
  });

  stage.addEventListener('click', ()=>{
    input.focus();
    overlay.style.display = 'none';
  });
  overlay.addEventListener('click', ()=>{
    input.focus();
    overlay.style.display = 'none';
  });
  input.addEventListener('blur', ()=>{
    overlay.style.display = 'flex';
  });
  input.addEventListener('focus', ()=>{
    overlay.style.display = 'none';
  });
  document.addEventListener('keydown', (e)=>{
    if(document.activeElement !== input && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey){
      input.focus();
      overlay.style.display = 'none';
    }
  });

  function endSession(){
    saveHistory();
    resetSession();
  }

  function saveHistory(){
    if(!startTime || typed.length < 5) return;
    const elapsedSec = (Date.now() - startTime) / 1000;
    const minutes = elapsedSec / 60;
    const correctChars = typed.split('').filter((c,i)=>c===targetString[i]).length;
    const wpm = minutes > 0 ? Math.round((correctChars/5) / minutes) : 0;
    const acc = typed.length ? Math.round((correctChars/typed.length)*100) : 100;

    const entry = {
      date: new Date().toISOString(),
      wpm, acc, time: Math.round(elapsedSec), errors: errorCount, lang, mode
    };

    try {
      let list = JSON.parse(localStorage.getItem('typewriter_history') || '[]');
      list.unshift(entry);
      list = list.slice(0, 30);
      localStorage.setItem('typewriter_history', JSON.stringify(list));
      renderHistory(list);
    } catch(e) {}
  }

  document.getElementById('restartBtn').addEventListener('click', endSession);
  document.getElementById('endSessionBtn').addEventListener('click', endSession);

  const timeSeg = document.getElementById('timeSeg');
  const customTimeInput = document.getElementById('customTimeInput');
  const resultModal = document.getElementById('resultModal');
  const closeModalBtn = document.getElementById('closeModalBtn');

  if(closeModalBtn){
    closeModalBtn.addEventListener('click', ()=>{
      resultModal.classList.remove('active');
      resetSession();
    });
  }

  const timeLabel = document.getElementById('timeLabel');
  const diffLabel = document.getElementById('diffLabel');

  document.getElementById('modeSeg').addEventListener('click', (e)=>{
    const btn = e.target.closest('button'); if(!btn) return;
    saveHistory();
    document.querySelectorAll('#modeSeg button').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    mode = btn.dataset.mode;
    
    if(mode === 'quotes'){
      diffSeg.style.display = 'none';
      if(diffLabel) diffLabel.style.display = 'none';
      timeSeg.style.display = 'none';
      if(timeLabel) timeLabel.style.display = 'none';
    } else if(mode === 'test'){
      diffSeg.style.display = 'flex';
      if(diffLabel) diffLabel.style.display = 'block';
      timeSeg.style.display = 'flex';
      if(timeLabel) timeLabel.style.display = 'block';
    } else {
      diffSeg.style.display = 'flex';
      if(diffLabel) diffLabel.style.display = 'block';
      timeSeg.style.display = 'none';
      if(timeLabel) timeLabel.style.display = 'none';
    }
    resetSession();
  });

  if(timeSeg){
    timeSeg.addEventListener('click', (e)=>{
      const btn = e.target.closest('button'); if(!btn) return;
      document.querySelectorAll('#timeSeg button').forEach(b=>b.classList.remove('active'));
      btn.classList.add('active');
      testDuration = parseInt(btn.dataset.time, 10) || 60;
      if(customTimeInput) customTimeInput.value = '';
      resetSession();
    });
  }

  if(customTimeInput){
    customTimeInput.addEventListener('input', (e)=>{
      const val = parseInt(e.target.value, 10);
      if(val && val >= 5){
        document.querySelectorAll('#timeSeg button').forEach(b=>b.classList.remove('active'));
        testDuration = val;
        resetSession();
      }
    });
  }

  document.getElementById('langSeg').addEventListener('click', (e)=>{
    const btn = e.target.closest('button'); if(!btn) return;
    saveHistory();
    document.querySelectorAll('#langSeg button').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    lang = btn.dataset.lang;
    resetSession();
  });

  document.getElementById('diffSeg').addEventListener('click', (e)=>{
    const btn = e.target.closest('button'); if(!btn) return;
    saveHistory();
    document.querySelectorAll('#diffSeg button').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    diff = btn.dataset.diff;
    resetSession();
  });

  function renderHistory(list){
    const listEl = document.getElementById('historyList');
    if(!list || list.length === 0){
      listEl.innerHTML = '<div class="empty">এখনও কোনো প্র্যাকটিস রেকর্ড নেই। প্র্যাকটিস শুরু করলে এখানে দেখাবে।</div>';
      return;
    }
    const langLabel = {en:'English', bn:'বাংলা'};
    const modeLabel = {words:'Word Stream', quotes:'Live Quotes'};
    let html = '';
    list.slice(0, 10).forEach(item=>{
      const d = new Date(item.date);
      const dateStr = d.toLocaleDateString('bn-BD', {day:'2-digit', month:'short'}) + ' ' + d.toLocaleTimeString('bn-BD',{hour:'2-digit',minute:'2-digit'});
      html += `<div class="hrow">
        <div class="d">${dateStr}</div>
        <div class="wpm">${item.wpm} wpm</div>
        <div class="acc">${item.acc}%</div>
        <div class="tag">${langLabel[item.lang]||item.lang} · ${modeLabel[item.mode]||item.mode} · ${item.time}s</div>
      </div>`;
    });
    listEl.innerHTML = html;
  }

  // init
  renderKeyboard();
  resetSession();
  try {
    const list = JSON.parse(localStorage.getItem('typewriter_history') || '[]');
    renderHistory(list);
  } catch(e) {
    renderHistory([]);
  }
})();