main.js

const greetingContainer = document.getElementById('greeting');
const textInput = document.getElementById('text-input');
const wpmCounter = document.getElementById('wpm-counter');
const commandBarContainer = document.getElementById('command-bar-container');
const commandInput = document.getElementById('command-input');
const commandOutput = document.getElementById('command-output');

const suggestionBox = document.getElementById('suggestion-box');

let currentWord = '';
let wordStartTime = null;
let suggestionIndex = -1;

const commands = [
    { name: 'restart', description: 'Restart the game' },
    { name: 'help', description: 'Show available commands' }
];

function restartGame() {
    wpmCounter.textContent = '';
    commandOutput.innerHTML = '';
    getNewWord();
    showMessage('Game restarted');
}

async function getNewWord() {
    try {
        const response = await fetch('/random-word');
        const word = await response.text();
        currentWord = word;
        textInput.value = '';
        wordStartTime = null; 
        renderWord();
    } catch (error) {
        console.error('Failed to fetch new word:', error);
        greetingContainer.textContent = 'Error loading word.';
    }
}

function renderWord() {
    greetingContainer.innerHTML = '';
    const typedValue = textInput.value;

    currentWord.split('').forEach((char, index) => {
        const span = document.createElement('span');
        span.textContent = char;
        span.classList.add('letter');

        if (index < typedValue.length) {
            if (typedValue[index] === char) {
                span.classList.add('correct');
            } else {
                span.classList.add('incorrect');
            }
        } else if (index === typedValue.length) {
            span.classList.add('current-letter');
        }
        greetingContainer.appendChild(span);
    });
}

function calculateLastWordWPM() {
    if (!wordStartTime) {
        return;
    }

    const elapsedMinutes = (Date.now() - wordStartTime) / 60000;
    if (elapsedMinutes === 0) {
        wpmCounter.textContent = '--- WPM';
        return;
    }
    const wpm = (currentWord.length / 5) / elapsedMinutes;
    wpmCounter.textContent = `${Math.round(wpm)} WPM`;
    showMessage(`${Math.round(wpm)} WPM`);
}

function toggleCommandBar(forceState) {
    const isVisible = commandBarContainer.classList.contains('visible');
    const shouldBeVisible = forceState !== undefined ? forceState : !isVisible;

    if (shouldBeVisible) {
        commandBarContainer.classList.add('visible');
        commandInput.focus();
        renderSuggestions();
    } else {
        commandBarContainer.classList.remove('visible');
        suggestionBox.innerHTML = '';
        textInput.focus(); 
    }
}

function renderSuggestions() {
    const inputValue = commandInput.value.toLowerCase();
    const filteredCommands = commands.filter(cmd => cmd.name.startsWith(inputValue));

    suggestionBox.innerHTML = '';
    filteredCommands.forEach((cmd, index) => {
        const div = document.createElement('div');
        div.textContent = `${cmd.name} - ${cmd.description}`;
        div.classList.add('suggestion-item');
        if (index === suggestionIndex) {
            div.style.backgroundColor = '#333';
        }
        div.addEventListener('click', () => {
            commandInput.value = cmd.name;
            suggestionBox.innerHTML = '';
            commandInput.focus();
        });
        suggestionBox.appendChild(div);
    });
}

textInput.addEventListener('input', () => {
    if (wordStartTime === null && textInput.value.length > 0) {
        wordStartTime = Date.now();
    }

    const typedValue = textInput.value;

    if (typedValue === currentWord) {
        calculateLastWordWPM();
        getNewWord();
    } else {
        renderWord();
    }
});

textInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        event.preventDefault();
        restartGame();
    }
});

commandInput.addEventListener('input', () => {
    suggestionIndex = -1;
    renderSuggestions();
});

commandInput.addEventListener('keydown', (event) => {
    const suggestions = suggestionBox.querySelectorAll('.suggestion-item');
    if (event.key === 'ArrowDown') {
        event.preventDefault();
        if (suggestionIndex < suggestions.length - 1) {
            suggestionIndex++;
            renderSuggestions();
        }
    } else if (event.key === 'ArrowUp') {
        event.preventDefault();
        if (suggestionIndex > 0) {
            suggestionIndex--;
            renderSuggestions();
        }
    } else if (event.key === 'Tab' || event.key === 'Enter') {
        event.preventDefault();
        if (suggestionIndex !== -1) {
            commandInput.value = commands.filter(cmd => cmd.name.startsWith(commandInput.value.toLowerCase()))[suggestionIndex].name;
            suggestionBox.innerHTML = '';
        } else {
            const command = commandInput.value.trim().toLowerCase();
            switch (command) {
                case 'restart':
                    restartGame();
                    showMessage('Game restarted');
                    break;
                case 'help':
                    commandOutput.innerHTML = '<div>Commands: restart, help</div>';
                    showMessage('Help is displayed below the WPM counter');
                    break;
            }
            commandInput.value = '';
            toggleCommandBar(false);
        }
    }
});

window.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
        event.preventDefault();
        toggleCommandBar();
    } else if (event.key === 'CapsLock' && event.target.tagName !== 'INPUT') {
        event.preventDefault();
        toggleCommandBar();
    }
});

window.addEventListener('load', () => {
    textInput.focus();
    restartGame();
});