// Get the canvas and context
const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');

// Game elements
const paddleWidth = 10;
const paddleHeight = 80;
const ballSize = 10;

let player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, score: 0, dy: 0 };
let computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, score: 0 };
let ball = { x: canvas.width / 2, y: canvas.height / 2, radius: ballSize, speedX: 4, speedY: 3 };

// Draw paddles and ball
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw paddles
    ctx.fillStyle = '#ff4f81';
    ctx.fillRect(player.x, player.y, paddleWidth, paddleHeight);
    ctx.fillRect(computer.x, computer.y, paddleWidth, paddleHeight);

    // Draw ball
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
}

// Update game state
function update() {
    // Update player paddle
    player.y += player.dy;
    if (player.y < 0) player.y = 0;
    if (player.y + paddleHeight > canvas.height) player.y = canvas.height - paddleHeight;

    // Update ball position
    ball.x += ball.speedX;
    ball.y += ball.speedY;

    // Ball collision with top and bottom walls
    if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.speedY *= -1;
    }

    // Ball collision with player paddle
    if (ball.x - ball.radius < player.x + paddleWidth &&
        ball.y > player.y &&
        ball.y < player.y + paddleHeight) {
        ball.speedX *= -1;
        ball.x = player.x + paddleWidth + ball.radius;
    }

    // Ball collision with computer paddle
    if (ball.x + ball.radius > computer.x &&
        ball.y > computer.y &&
        ball.y < computer.y + paddleHeight) {
        ball.speedX *= -1;
        ball.x = computer.x - ball.radius;
    }

    // Score update
    if (ball.x - ball.radius < 0) {
        computer.score++;
        resetBall();
    } else if (ball.x + ball.radius > canvas.width) {
        player.score++;
        resetBall();
    }

    // Move computer paddle (simple AI)
    if (computer.y + paddleHeight / 2 < ball.y) {
        computer.y += 4;
    } else if (computer.y + paddleHeight / 2 > ball.y) {
        computer.y -= 4;
    }

    updateScore();
}

// Reset ball position
function resetBall() {
    ball.x = canvas.width / 2;
    ball.y = canvas.height / 2;
    ball.speedX = -ball.speedX;
}

// Update score display
function updateScore() {
    document.getElementById('playerScore').textContent = player.score;
    document.getElementById('computerScore').textContent = computer.score;
}

// Control player paddle with keyboard
document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowUp') player.dy = -5;
    if (event.key === 'ArrowDown') player.dy = 5;
});

document.addEventListener('keyup', (event) => {
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') player.dy = 0;
});

// Game loop
function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}

// Start the game
resetBall();
gameLoop();