// 🌍 Game state
let words = [];
let currentWord = '';
let currentIndex = 0;
let results = [];
let typingWords = [];
let isSpacedRepetitionMode = false;

// 📝 Check user's answer and move to next word regardless of correctness
window.submitAnswer = function() {
    const input = document.getElementById('userInput').value.trim();
    
    // Record the attempt
    results.push({
        word: currentWord,
        attempt: input
    });

    // Show feedback and move to next word regardless of correctness
    if (input.toLowerCase() === currentWord.toLowerCase()) {
        // Correct answer - add visual feedback
        const inputEl = document.getElementById('userInput');
        inputEl.style.borderColor = 'var(--success)';
        inputEl.style.backgroundColor = '#f0fdf4';
        
        // Add feedback text if element exists
        const feedbackEl = document.getElementById('wordFeedback');
        if (feedbackEl) {
            feedbackEl.textContent = '✓ Correct!';
            feedbackEl.className = 'feedback-correct';
            feedbackEl.style.color = 'var(--success)';
        }
    } else {
        // Incorrect answer - show correct spelling but continue
        const inputEl = document.getElementById('userInput');
        inputEl.style.borderColor = 'var(--error)';
        inputEl.style.backgroundColor = '#fef2f2';
        
        // Add feedback text if element exists
        const feedbackEl = document.getElementById('wordFeedback');
        if (feedbackEl) {
            feedbackEl.textContent = `✗ Correct spelling: ${currentWord}`;
            feedbackEl.className = 'feedback-incorrect';
            feedbackEl.style.color = 'var(--error)';
        }
    }
    
    // Always advance to next word
    currentIndex++;
    document.getElementById('inputSection').classList.add('hidden');
    
    // Small delay before showing next word
    setTimeout(() => showWord(), 1500);
}

// Add Enter key support for game input
document.addEventListener('DOMContentLoaded', () => {
    const gameInput = document.getElementById('userInput');
    if (gameInput) {
        gameInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                submitAnswer();
            }
        });
    }
});

let currentSentence = '';

function showStudent() {
    console.log("🔊 Showing student panel");
    
    // Hide admin panel
    document.getElementById('adminPanel')?.classList.add('hidden');
    
    // Show student panel and its components
    const studentPanel = document.getElementById('studentPanel');
    studentPanel?.classList.remove('hidden');
    
    // Get the buttons and explicitly set their properties
    const gameBtn = document.getElementById('startGameBtn');
    const typingBtn = document.getElementById('startTypingBtn');
    
    if (gameBtn && typingBtn) {
        console.log("Found buttons, making visible");
        // Remove all possible hiding classes/styles
        gameBtn.classList.remove('hidden');
        typingBtn.classList.remove('hidden');
        
        // Explicitly set display style
        gameBtn.style.cssText = 'display: inline-block !important; visibility: visible !important;';
        typingBtn.style.cssText = 'display: inline-block !important; visibility: visible !important;';
    } else {
        console.error("Could not find game buttons");
    }
}

// 🚀 Begin game session
window.startGame = async function(customWords = null, isSpacedRepetition = false) {
    console.log('🎮 Starting spelling game');
    
    const user = JSON.parse(localStorage.getItem('loggedInUser'));
    if (!user) {
        alert('Please log in first');
        return;
    }

    try {
        // Hide student dashboard and other sections
        document.getElementById('studentPanel').style.display = 'none';
        document.getElementById('typingSection').style.display = 'none';
        document.getElementById('bibleSection').style.display = 'none';
        
        // Show game section
        document.getElementById('gameSection').classList.remove('hidden');
        document.getElementById('gameSection').style.display = 'block';
        document.getElementById('wordBox').textContent = 'Loading...';
        document.getElementById('summary')?.classList.add('hidden');
        document.getElementById('badgeDisplay')?.classList.add('hidden');

        let wordList;
        
        // Use custom words if provided (for spaced repetition)
        if (customWords && Array.isArray(customWords) && customWords.length > 0) {
            wordList = customWords;
            isSpacedRepetitionMode = isSpacedRepetition;
            console.log('Using custom word list for spaced repetition:', wordList);
        } else {
            // Fetch words from user's word list
            const response = await fetch(`/getWordList?username=${user.username}`);
            const data = await response.json();
            console.log('Received words:', data);
            
            let weekWords = [];
            // Safely handle various response formats
            try {
                if (data && data.words && Array.isArray(data.words)) {
                    // Server returns {words: [array]}
                    weekWords = data.words;
                } else if (data && data.words && typeof data.words === 'object' && data.words.weeks && data.words.activeWeek) {
                    // Server returns {words: {weeks: [], activeWeek: ""}}
                    const active = data.words.activeWeek;
                    const found = data.words.weeks.find(w => w.date === active);
                    if (found && Array.isArray(found.words)) {
                        weekWords = found.words;
                    }
                } else if (Array.isArray(data)) {
                    // Server returns direct array
                    weekWords = data;
                } else if (typeof data === 'object' && Array.isArray(Object.values(data)[0])) {
                    // Handle unexpected format as best we can
                    weekWords = Object.values(data)[0];
                }
            } catch (err) {
                console.error("Error processing word list data:", err);
            }
            
            wordList = weekWords.length > 0 ? weekWords : ["default", "practice", "words"];
        }

        if (!wordList.length) {
            alert('No words found for practice');
            return;
        }

        // Start game
        words = [...wordList];
        typingWords = [...wordList]; // Initialize typing words too
        currentIndex = 0;
        results = [];  // Reset results array
        showWord();

    } catch (error) {
        console.error('Error:', error);
        alert('Failed to load words');
    }
}

function showWord() {
    if (currentIndex >= words.length) {
        showSummary();
        return;
    }

    currentWord = words[currentIndex];
    console.log('Current word:', currentWord);

    // Show word briefly then hide
    const wordBox = document.getElementById('wordBox');
    const inputSection = document.getElementById('inputSection');
    
    // Reset any feedback text
    const feedbackEl = document.getElementById('wordFeedback');
    if (feedbackEl) {
        feedbackEl.textContent = '';
        feedbackEl.className = '';
    }
    
    wordBox.textContent = currentWord;
    inputSection.classList.add('hidden');

    setTimeout(() => {
        wordBox.textContent = '';
        // Make sure input section is visible
        inputSection.classList.remove('hidden');
        inputSection.style.display = 'block';
        
        // Reset and focus the input field with enhanced visibility
        const userInput = document.getElementById('userInput');
        userInput.value = '';
        
        // Use the class-based approach instead of inline styles
        userInput.classList.add('visible-input');
        
        // Focus with a slight delay to ensure UI is ready
        setTimeout(() => {
            userInput.focus();
            // Try to insert a cursor by setting a selection range
            try {
                userInput.setSelectionRange(0, 0);
            } catch (e) {
                console.log('Could not set selection range:', e);
            }
            console.log('🔍 Input focused, ready for typing');
        }, 50);
    }, 2000);
}

function showSummary() {
    console.log('Game completed, showing summary');
    document.getElementById('inputSection').classList.add('hidden');
    
    // Calculate stats
    let correctCount = 0;
    const incorrectWords = [];
    
    results.forEach(result => {
        if (result.attempt.toLowerCase() === result.word.toLowerCase()) {
            correctCount++;
        } else {
            incorrectWords.push(result);
        }
    });
    
    const accuracy = Math.round((correctCount / results.length) * 100);
    
    // Show summary
    document.getElementById('summary').classList.remove('hidden');
    document.getElementById('totalWords').textContent = results.length;
    document.getElementById('correctWords').textContent = correctCount;
    document.getElementById('accuracy').textContent = `${accuracy}%`;
    
    // Show incorrect words
    const incorrectList = document.getElementById('incorrectList');
    incorrectList.innerHTML = '';
    
    if (incorrectWords.length === 0) {
        incorrectList.innerHTML = '<li>Perfect! No mistakes.</li>';
    } else {
        incorrectWords.forEach(item => {
            incorrectList.innerHTML += `
                <li>
                    <span class="word">${item.word}</span>
                    <span class="attempt">${item.attempt}</span>
                </li>
            `;
        });
    }
    
    // Save results if not in spaced repetition mode
    if (!isSpacedRepetitionMode) {
        saveResults(results, accuracy);
    } else {
        console.log('In spaced repetition mode, not saving normal results');
        // Update spaced repetition data
        updateSpacedRepetitionResults(results);
    }
}

async function saveResults(resultData, accuracy) {
    try {
        const user = JSON.parse(localStorage.getItem('loggedInUser'));
        if (!user) return;
        
        // Transform the result data to match server's expected format
        const answers = resultData.map(item => ({
            word: item.word,
            attempt: item.attempt,
            correct: item.attempt.toLowerCase() === item.word.toLowerCase()
        }));
        
        const payload = {
            username: user.username,
            result: {
                score: accuracy,
                completed: true,
                answers: answers,
                timestamp: new Date().toISOString()
            }
        };
        
        const response = await fetch('/saveResults', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        });
        
        if (response.ok) {
            console.log('Results saved successfully');
            checkForBadges(accuracy, resultData.length);
        }
    } catch (error) {
        console.error('Error saving results:', error);
    }
}

async function checkForBadges(accuracy, wordCount) {
    try {
        const user = JSON.parse(localStorage.getItem('loggedInUser'));
        if (!user) return;
        
        // Check for earned badges
        const response = await fetch(`/checkBadges?username=${user.username}&accuracy=${accuracy}&wordCount=${wordCount}`);
        const data = await response.json();
        
        if (data && data.newBadges && data.newBadges.length > 0) {
            // Show badge notification
            showBadgeNotification(data.newBadges);
        }
    } catch (error) {
        console.error('Error checking badges:', error);
    }
}

function showBadgeNotification(badges) {
    const badgeDisplay = document.getElementById('badgeDisplay');
    if (!badgeDisplay) {
        console.error('Badge display element not found!');
        return;
    }
    
    const badgeList = document.getElementById('badgeList');
    if (!badgeList) {
        console.error('Badge list element not found!');
        return;
    }
    
    badgeList.innerHTML = '';
    
    badges.forEach(badge => {
        // Ensure badge has all required properties
        const badgeIcon = badge.icon || '🏅';
        const badgeName = badge.name || 'Achievement Unlocked!';
        const description = badge.description || 'Great job on your spelling practice!';
        
        // Log the badge data to ensure it's correct
        console.log('Badge data:', { icon: badgeIcon, name: badgeName, description: description });
        
        badgeList.innerHTML += `
            <div class="badge-item">
                <div class="badge-icon">${badgeIcon}</div>
                <div class="badge-info">
                    <h4>${badgeName}</h4>
                    <p>${description}</p>
                </div>
            </div>
        `;
    });
    
    console.log('Showing badge notification for', badges.length, 'badges');
    badgeDisplay.classList.remove('hidden');
}

// Function to check if user has completed all words for today
async function checkDailyCompletion() {
    try {
        const user = JSON.parse(localStorage.getItem('loggedInUser'));
        if (!user) return;
        
        const response = await fetch(`/checkDailyCompletion?username=${user.username}`);
        const data = await response.json();
        
        return data.completed;
    } catch (error) {
        console.error('Error checking daily completion:', error);
        return false;
    }
}

// Return to student panel
window.returnToStudentPanel = function() {
    // Hide game and typing sections
    document.getElementById('gameSection').style.display = 'none';
    document.getElementById('typingSection').style.display = 'none';
    document.getElementById('bibleSection').style.display = 'none';
    
    // Show student panel
    document.getElementById('studentPanel').style.display = 'block';
    
    // Force panel to be visible
    showStudent();
}

// Alias for returnToStudentPanel for backward compatibility
window.backToStudentDashboard = function() {
    window.returnToStudentPanel();
}

// Handle spaced repetition results
async function updateSpacedRepetitionResults(resultData) {
    try {
        const user = JSON.parse(localStorage.getItem('loggedInUser'));
        if (!user) return;
        
        // Process results for spaced repetition algorithm
        const processedResults = resultData.map(result => ({
            word: result.word,
            isCorrect: result.attempt.toLowerCase() === result.word.toLowerCase(),
            timestamp: new Date().toISOString()
        }));
        
        // Send to server
        const response = await fetch('/updateSpacedRepetition', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: user.username,
                results: processedResults
            })
        });
        
        if (response.ok) {
            console.log('Spaced repetition data updated successfully');
        } else {
            console.error('Failed to update spaced repetition data');
        }
    } catch (error) {
        console.error('Error updating spaced repetition data:', error);
    }
}