const egg = document.getElementById('egg');
const playButton = document.getElementById('playButton');
const restartButton = document.getElementById('restartButton');
const gameArea = document.getElementById('gameArea');
const scoreDisplay = document.getElementById('score');
const finalScore = document.getElementById('finalScore');
const instructions = document.getElementById('instructions');

let gameInterval, panInterval, startTime;
let bestScore = localStorage.getItem('bestScore') ? parseFloat(localStorage.getItem('bestScore')) : 0;

function startGame() {
    playButton.style.display = 'none';
    restartButton.style.display = 'none';
    finalScore.style.display = 'none';
    instructions.style.display = 'none';
    egg.style.left = '360px';
    egg.style.top = '240px';
    startTime = Date.now();
    scoreDisplay.innerText = '0 секунд';

    document.addEventListener('keydown', moveEgg);
    gameInterval = setInterval(updateScore, 100);
    panInterval = setInterval(spawnPan, 2000);
}

function endGame() {
    clearInterval(gameInterval);
    clearInterval(panInterval);
    document.removeEventListener('keydown', moveEgg);
    document.querySelectorAll('.pan').forEach(pan => pan.remove());
    const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(1);

    if (parseFloat(elapsedTime) > bestScore) {
        bestScore = parseFloat(elapsedTime);
        localStorage.setItem('bestScore', bestScore);
    }

    finalScore.innerHTML = `Ты продержался <span class="time">${elapsedTime}</span> секунд<br>Лучший результат: <span class="best-time">${bestScore}</span> секунд`;
    finalScore.style.display = 'block';
    restartButton.style.display = 'block';
}

function updateScore() {
    const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(1);
    scoreDisplay.innerText = `${elapsedTime} секунд`;
}

function spawnPan() {
    const pan = document.createElement('div');
    pan.classList.add('pan');

    let x, y;
    do {
        x = Math.random() * (gameArea.clientWidth - 200);
        y = Math.random() * (gameArea.clientHeight - 200);
    } while (isOverlappingEgg(x, y));

    pan.style.left = `${x}px`;
    pan.style.top = `${y}px`;
    
    gameArea.appendChild(pan);
    movePan(pan, Math.random() * Math.PI * 2);
}

function movePan(pan, direction) {
    const speed = 2;
    let deltaX = Math.cos(direction) * speed;
    let deltaY = Math.sin(direction) * speed;

    function step() {
        const rect = pan.getBoundingClientRect();
        const areaRect = gameArea.getBoundingClientRect();

        if (rect.left + deltaX < areaRect.left || rect.right + deltaX > areaRect.right) {
            deltaX = -deltaX;
        }
        if (rect.top + deltaY < areaRect.top || rect.bottom + deltaY > areaRect.bottom) {
            deltaY = -deltaY;
        }
        pan.style.left = `${pan.offsetLeft + deltaX}px`;
        pan.style.top = `${pan.offsetTop + deltaY}px`;

        if (checkCollision(egg, pan)) {
            endGame();
        } else {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);
}

function moveEgg(event) {
    const eggRect = egg.getBoundingClientRect();
    const step = 10;
    const areaRect = gameArea.getBoundingClientRect();
    switch (event.key) {
        case 'ArrowUp':
            if (eggRect.top > areaRect.top) {
                egg.style.top = `${egg.offsetTop - step}px`;
            }
            break;
        case 'ArrowDown':
            if (eggRect.bottom < areaRect.bottom) {
                egg.style.top = `${egg.offsetTop + step}px`;
            }
            break;
        case 'ArrowLeft':
            if (eggRect.left > areaRect.left) {
                egg.style.left = `${egg.offsetLeft - step}px`;
            }
            break;
        case 'ArrowRight':
            if (eggRect.right < areaRect.right) {
                egg.style.left = `${egg.offsetLeft + step}px`;
            }
            break;
    }
    checkPanCollision();
}

function isOverlappingEgg(x, y) {
    const eggRect = egg.getBoundingClientRect();
    const panRect = { left: x, top: y, right: x + 200, bottom: y + 200 };

    return !(
        eggRect.right < panRect.left ||
        eggRect.left > panRect.right ||
        eggRect.bottom < panRect.top ||
        eggRect.top > panRect.bottom
    );
}

function checkPanCollision() {
    const pans = document.querySelectorAll('.pan');
    pans.forEach(pan => {
        if (checkCollision(egg, pan)) {
            endGame();
        }
    });
}

function checkCollision(rect1, rect2) {
    const rect1Bounds = rect1.getBoundingClientRect();
    const rect2Bounds = rect2.getBoundingClientRect();

    return !(
        rect1Bounds.top >= rect2Bounds.bottom ||
        rect1Bounds.bottom <= rect2Bounds.top ||
        rect1Bounds.left >= rect2Bounds.right ||
        rect1Bounds.right <= rect2Bounds.left
    );
}

playButton.addEventListener('click', startGame);
restartButton.addEventListener('click', startGame);