document.addEventListener('DOMContentLoaded', () => {
    const gridContainer = document.getElementById('bingo-grid');
    const timerElement = document.getElementById('timer');
    const statusElement = document.getElementById('status-message');
    const countdownOverlay = document.getElementById('countdown-overlay');
    const countdownElement = document.getElementById('countdown-number');

    let currentNumber = 1;
    const maxNumber = 25;
    let timerInterval;
    let seconds = 0;
    let milliseconds = 0;
    let gameActive = false;

    function createGrid() {
        for (let i = 0; i < maxNumber; i++) {
            const cell = document.createElement('div');
            cell.classList.add('grid-cell');
            cell.dataset.index = i;

            const content = document.createElement('div');
            content.classList.add('cell-content');
            cell.appendChild(content);

            cell.addEventListener('click', () => handleCellClick(cell));
            gridContainer.appendChild(cell);
        }
    }

    function handleCellClick(cell) {
        if (!gameActive || cell.classList.contains('filled')) {
            return;
        }

        const content = cell.querySelector('.cell-content');
        if (content.textContent === '') {
            content.textContent = currentNumber;
            cell.classList.add('filled');
            currentNumber++;

            if (currentNumber > maxNumber) {
                finishGame();
            }
        }
    }

    function startGame() {
        gameActive = true;
        startTimer();
        statusElement.textContent = 'Fill the grid!';
    }

    function finishGame() {
        gameActive = false;
        stopTimer();
        statusElement.innerHTML = `Finished in <span class="accent-color">${timerElement.textContent}</span>!`;
    }

    function startTimer() {
        const startTime = Date.now();
        timerInterval = setInterval(() => {
            const elapsedTime = Date.now() - startTime;
            seconds = Math.floor(elapsedTime / 1000);
            milliseconds = Math.floor((elapsedTime % 1000) / 10);
            timerElement.textContent = `${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(2, '0')}`;
        }, 10);
    }

    function stopTimer() {
        clearInterval(timerInterval);
    }

    function startCountdown() {
        let count = 3;
        countdownElement.textContent = count;
        countdownOverlay.style.display = 'flex';

        const countdownInterval = setInterval(() => {
            count--;
            if (count > 0) {
                countdownElement.textContent = count;
            } else {
                clearInterval(countdownInterval);
                countdownOverlay.style.display = 'none';
                startGame();
            }
        }, 1000);
    }

    createGrid();
    startCountdown();
});