document.addEventListener('DOMContentLoaded', () => {
    // Game elements
    const playerCar = document.getElementById('player-car');
    const gameContainer = document.getElementById('game-container');
    const road = document.getElementById('road');
    const scoreElement = document.getElementById('score');
    const gameOverScreen = document.getElementById('game-over');
    const finalScoreElement = document.getElementById('final-score');
    const restartBtn = document.getElementById('restart-btn');
    const startScreen = document.getElementById('start-screen');
    const startBtn = document.getElementById('start-btn');

    // Game state
    let gameRunning = false;
    let score = 0;
    let obstacles = [];
    let animationId;
    let speed = 3;
    let gameSpeed = 2;
    let playerPosition = {
        x: gameContainer.offsetWidth / 2 - playerCar.offsetWidth / 2,
        y: gameContainer.offsetHeight - playerCar.offsetHeight - 20
    };

    // Initialize player car position
    playerCar.style.left = `${playerPosition.x}px`;
    playerCar.style.top = `${playerPosition.y}px`;

    // Event listeners
    startBtn.addEventListener('click', startGame);
    restartBtn.addEventListener('click', startGame);

    // Keyboard controls
    const keys = {
        ArrowLeft: false,
        ArrowRight: false,
        ArrowUp: false,
        ArrowDown: false
    };

    document.addEventListener('keydown', (e) => {
        if (keys.hasOwnProperty(e.key)) {
            keys[e.key] = true;
        }
    });

    document.addEventListener('keyup', (e) => {
        if (keys.hasOwnProperty(e.key)) {
            keys[e.key] = false;
        }
    });

    // Game functions
    function startGame() {
        // Reset game state
        score = 0;
        speed = 3;
        gameSpeed = 2;
        obstacles.forEach(obs => obs.element.remove());
        obstacles = [];
        scoreElement.textContent = `Score: ${score}`;

        // Reset player position
        playerPosition = {
            x: gameContainer.offsetWidth / 2 - playerCar.offsetWidth / 2,
            y: gameContainer.offsetHeight - playerCar.offsetHeight - 20
        };
        playerCar.style.left = `${playerPosition.x}px`;
        playerCar.style.top = `${playerPosition.y}px`;

        // Hide screens
        gameOverScreen.classList.add('hidden');
        startScreen.classList.add('hidden');

        // Start game loop
        gameRunning = true;
        gameLoop();
    }

    function gameLoop() {
        if (!gameRunning) return;

        // Move player
        if (keys.ArrowLeft && playerPosition.x > 20) {
            playerPosition.x -= speed;
        }
        if (keys.ArrowRight && playerPosition.x < gameContainer.offsetWidth - playerCar.offsetWidth - 20) {
            playerPosition.x += speed;
        }
        if (keys.ArrowUp && playerPosition.y > 0) {
            playerPosition.y -= speed;
        }
        if (keys.ArrowDown && playerPosition.y < gameContainer.offsetHeight - playerCar.offsetHeight) {
            playerPosition.y += speed;
        }

        playerCar.style.left = `${playerPosition.x}px`;
        playerCar.style.top = `${playerPosition.y}px`;

        // Generate obstacles
        if (Math.random() < 0.02) {
            createObstacle();
        }

        // Move obstacles
        moveObstacles();

        // Check collisions
        if (checkCollisions()) {
            gameOver();
            return;
        }

        // Update score
        score++;
        scoreElement.textContent = `Score: ${score}`;

        // Increase difficulty
        if (score % 500 === 0) {
            gameSpeed += 0.2;
        }

        animationId = requestAnimationFrame(gameLoop);
    }

    function createObstacle() {
        const width = Math.random() * 100 + 50;
        const height = Math.random() * 70 + 30;
        const x = Math.random() * (gameContainer.offsetWidth - width);
        
        const obstacle = document.createElement('div');
        obstacle.className = 'obstacle';
        obstacle.style.width = `${width}px`;
        obstacle.style.height = `${height}px`;
        obstacle.style.left = `${x}px`;
        obstacle.style.top = `-${height}px`;
        gameContainer.appendChild(obstacle);

        obstacles.push({
            element: obstacle,
            x,
            y: -height,
            width,
            height
        });
    }

    function moveObstacles() {
        obstacles.forEach(obstacle => {
            obstacle.y += gameSpeed;
            obstacle.element.style.top = `${obstacle.y}px`;

            // Remove obstacles that are off screen
            if (obstacle.y > gameContainer.offsetHeight) {
                obstacle.element.remove();
                obstacles = obstacles.filter(obs => obs !== obstacle);
            }
        });
    }

    function checkCollisions() {
        const playerRect = {
            x: playerPosition.x,
            y: playerPosition.y,
            width: playerCar.offsetWidth,
            height: playerCar.offsetHeight
        };

        return obstacles.some(obstacle => {
            return !(
                playerRect.x + playerRect.width < obstacle.x ||
                playerRect.x > obstacle.x + obstacle.width ||
                playerRect.y + playerRect.height < obstacle.y ||
                playerRect.y > obstacle.y + obstacle.height
            );
        });
    }

    function gameOver() {
        gameRunning = false;
        cancelAnimationFrame(animationId);
        finalScoreElement.textContent = `Score: ${score}`;
        gameOverScreen.classList.remove('hidden');
    }
});