const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
const textElement = document.getElementById('text');
const wordDisplay = document.getElementById('wordDisplay');
const textInput = document.getElementById('textInput');
const submitAnswer = document.getElementById('submitAnswer');
const toggleInput = document.getElementById('toggleInput');
const clearCanvas = document.getElementById('clearCanvas');
const previewDrawing = document.getElementById('previewDrawing');
const recognizedText = document.getElementById('recognizedText');

let currentWord = null;
let currentInputMode = 'text';  // 'text' or 'drawing'
let isDrawing = false;

// Initialize input mode
function initializeInputMode() {
    textInput.style.display = 'block';
    canvas.style.display = 'none';
    clearCanvas.style.display = 'none';
    previewDrawing.style.display = 'none';
    toggleInput.textContent = 'Zu Zeichnen wechseln';
    recognizedText.textContent = '';
}

// Load a new word
function loadWord() {
    fetch('/get_random_vocab')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                wordDisplay.textContent = 'Keine Vokabeln gefunden.';
            } else {
                currentWord = data;
                const isEnglish = Math.random() < 0.5;
                wordDisplay.textContent = isEnglish ? `English: ${currentWord.english}` : `Deutsch: ${currentWord.german}`;
                textElement.textContent = '';
                textInput.value = '';
                recognizedText.textContent = '';
                if (currentInputMode === 'drawing') {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }
            }
        })
        .catch(error => console.error('Fehler beim Laden der Vokabel:', error));
}

// Switch between input modes
toggleInput.addEventListener('click', () => {
    if (currentInputMode === 'text') {
        textInput.style.display = 'none';
        canvas.style.display = 'block';
        clearCanvas.style.display = 'inline-block';
        previewDrawing.style.display = 'inline-block';
        toggleInput.textContent = 'Zu Texteingabe wechseln';
        currentInputMode = 'drawing';
    } else {
        textInput.style.display = 'block';
        canvas.style.display = 'none';
        clearCanvas.style.display = 'none';
        previewDrawing.style.display = 'none';
        toggleInput.textContent = 'Zu Zeichnen wechseln';
        currentInputMode = 'text';
    }
});

// Clear the canvas
clearCanvas.addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    recognizedText.textContent = '';  // Clear the recognized text as well
});

// Drawing functionality
canvas.addEventListener('mousedown', () => {
    isDrawing = true;
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
    ctx.beginPath();
});

canvas.addEventListener('mousemove', draw);

function draw(event) {
    if (!isDrawing) return;
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'black';
    
    ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}

// Preview the drawing recognition
previewDrawing.addEventListener('click', () => {
    const dataURL = canvas.toDataURL('image/png');

    fetch(dataURL)
        .then(res => res.blob())
        .then(blob => {
            Tesseract.recognize(
                blob,
                'eng',
                { logger: info => console.log(info) }
            ).then(({ data: { text } }) => {
                recognizedText.textContent = `Erkannter Text: ${text.trim()}`;
            });
        })
        .catch(error => {
            console.error('Fehler beim Erkennen des Textes:', error);
        });
});

// Submit answer
submitAnswer.addEventListener('click', () => {
    let answer = '';

    if (currentInputMode === 'text') {
        answer = textInput.value.trim();
    } else {
        answer = recognizedText.textContent.replace('Erkannter Text:', '').trim();
    }

    checkAnswer(answer);
});

// Check if the answer is correct
function checkAnswer(answer) {
    const correctAnswer = (wordDisplay.textContent.startsWith('English:') ? currentWord.german : currentWord.english).trim().toLowerCase();
    if (answer.toLowerCase() === correctAnswer) {
        textElement.textContent = 'Richtig!';
        textElement.style.color = 'green';
        // Update the vocabulary level
        fetch(`/update_vocab_level/${currentWord.id}`, { method: 'POST' })
            .then(() => {
                setTimeout(loadWord, 2000);  // Show the result for 2 seconds before loading the next word
            });
    } else {
        textElement.textContent = `Falsch! Die richtige Antwort ist: ${correctAnswer}`;
        textElement.style.color = 'red';
        setTimeout(loadWord, 3000);  // Show the result for 3 seconds before loading the next word
    }
}

// Initialize the input mode and load the first word
initializeInputMode();
loadWord();