const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');

const paddleWidth = 10;
const paddleHeight = 80;
const ballSize = 10;

let playerPaddle = {
    x: 10,
    y: canvas.height / 2 - paddleHeight / 2,
    width: paddleWidth,
    height: paddleHeight,
    dy: 0
};

let computerPaddle = {
    x: canvas.width - 20,
    y: canvas.height / 2 - paddleHeight / 2,
    width: paddleWidth,
    height: paddleHeight,
    dy: 0
};

let ball = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    dx: 5,
    dy: 5,
    size: ballSize
};

let playerScore = 0;
let computerScore = 0;

function drawPaddle(paddle) {
    ctx.fillStyle = '#1100ff';
    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

function drawBall() {
    ctx.fillStyle = '#1aff00';
    ctx.fillRect(ball.x, ball.y, ball.size, ball.size);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPaddle(playerPaddle);
    drawPaddle(computerPaddle);
    drawBall();
    scoreElement.textContent = `Player: ${playerScore} | Computer: ${computerScore}`;
}

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

    // Move computer paddle (simple AI)
    if (ball.y < computerPaddle.y + paddleHeight / 2) {
        computerPaddle.y -= 3;
    } else if (ball.y > computerPaddle.y + paddleHeight / 2) {
        computerPaddle.y += 3;
    }
    if (computerPaddle.y < 0) computerPaddle.y = 0;
    if (computerPaddle.y > canvas.height - paddleHeight) computerPaddle.y = canvas.height - paddleHeight;

    // Move ball
    ball.x += ball.dx;
    ball.y += ball.dy;

    // Ball collision with top and bottom
    if (ball.y <= 0 || ball.y >= canvas.height - ball.size) {
        ball.dy = -ball.dy;
    }

    // Ball collision with paddles
    if (ball.x <= playerPaddle.x + paddleWidth && ball.y >= playerPaddle.y && ball.y <= playerPaddle.y + paddleHeight) {
        ball.dx = -ball.dx;
    }
    if (ball.x >= computerPaddle.x - ball.size && ball.y >= computerPaddle.y && ball.y <= computerPaddle.y + paddleHeight) {
        ball.dx = -ball.dx;
    }

    // Score
    if (ball.x < 0) {
        computerScore++;
        resetBall();
    }
    if (ball.x > canvas.width) {
        playerScore++;
        resetBall();
    }
}

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

function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}

// Controls
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp') {
        playerPaddle.dy = -5;
    } else if (e.key === 'ArrowDown') {
        playerPaddle.dy = 5;
    }
});

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

gameLoop();