<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stavekontrol.io</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        h1 {
            margin: 20px 0;
            font-size: 3rem;
            text-align: center;
        }
        .word {
            font-size: 1.5rem;
            margin-top: 10vh;
        }
        .textbox {
            margin-top: 5cm; 
            font-size: 1.2rem;
            padding: 5px;
            width: 300px;
            text-align: center;
        }
        footer {
            font-size: 1rem;
            color: gray;
            text-align: right;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <h1>Stavekontrol Spil</h1>
    <!-- <div class="word" id="daily-word">Loading...</div> -->
    <input type="text" class="textbox" id="input-box" placeholder="Skriv det daglige ord her..." onkeypress="validateInput(event)">
    <button onclick="readWord()">Læs ordet</button>
    <footer>Created by GeorgeofGithub</footer>

    <script>
        let dailyWord = '';

        async function fetchDailyWord() {
            try {
                const response = await fetch('http://localhost:3000/daily-word');
                const data = await response.json();
                dailyWord = data.word;
                document.getElementById('daily-word').textContent = dailyWord;
            } catch (error) {
                console.error('Error fetching the daily word:', error);
                document.getElementById('daily-word').textContent = 'Failed to load word.';
            }
        }

        function validateInput(event) {
            const danishLetters = /^[a-zA-ZæøåÆØÅ]*$/;
            if (!danishLetters.test(event.key)) {
                event.preventDefault();
            }
        }

        function readWord() {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance(dailyWord);
                utterance.lang = 'da-DK'; // Set language to Danish
                speechSynthesis.speak(utterance);
            } else {
                alert('Speech synthesis is not supported in this browser.');
            }
        }

        document.getElementById('input-box').addEventListener('keypress', function (event) {
            if (event.key === 'Enter') {
                const inputBox = event.target;
                if (inputBox.value === dailyWord) {
                    inputBox.style.backgroundColor = 'green'; // Match
                } else {
                    inputBox.style.backgroundColor = 'red'; // No match
                }
            }
        });

        fetchDailyWord();
    </script>
</body>
</html>