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

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

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 balls = [
    { x: canvas.width / 2, y: canvas.height / 2, radius: 10, speedX: 4, speedY: 3 }
];

// Draw paddles and balls
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 each ball
    balls.forEach(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 each ball's position and handle collisions
    balls.forEach((ball, index) => {
        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++;
            addNewBall();  // Add a new ball if the computer scores
            resetBall(ball);  // Reset this ball's position
        } else if (ball.x + ball.radius > canvas.width) {
            player.score++;
            resetBall(ball);  // Reset this ball's position
        }
    });

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

    updateScore();
}

// Add a new ball to the game
function addNewBall() {
    balls.push({
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        speedX: 4 * (Math.random() > 0.5 ? 1 : -1),
        speedY: 3 * (Math.random() > 0.5 ? 1 : -1)
    });
}

// Reset a specific ball's position
function resetBall(ball) {
    ball.x = canvas.width / 2;
    ball.y = canvas.height / 2;
    ball.speedX = 4 * (Math.random() > 0.5 ? 1 : -1);
    ball.speedY = 3 * (Math.random() > 0.5 ? 1 : -1);
}

// 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
gameLoop();