const gameArea = document.getElementById('game-area');
const scoreSpan = document.getElementById('score');
const timerSpan = document.getElementById('timer');
const startBtn = document.getElementById('start-btn');
const gameOverDiv = document.getElementById('game-over');
const finalScoreSpan = document.getElementById('final-score');

let score = 0;
let timer = 20; // duración del juego en segundos
let interval, timeout;
let playing = false;

function startGame() {
  score = 0;
  timer = 20;
  scoreSpan.textContent = score;
  timerSpan.textContent = timer;
  gameArea.innerHTML = '';
  gameOverDiv.classList.add('hidden');
  startBtn.disabled = true;
  playing = true;

  // Iniciar contador regresivo
  interval = setInterval(() => {
    timer--;
    timerSpan.textContent = timer;
    if (timer <= 0) {
      endGame();
    }
  }, 1000);

  spawnCircle();
}

function endGame() {
  playing = false;
  clearInterval(interval);
  clearTimeout(timeout);
  gameArea.innerHTML = '';
  startBtn.disabled = false;

  // Mostrar resultado final
  finalScoreSpan.textContent = score;
  gameOverDiv.classList.remove('hidden');
}

function spawnCircle() {
  if (!playing || timer <= 0) return;

  // Crear círculo y posicionarlo aleatoriamente
  const circle = document.createElement('div');
  circle.className = 'circle';

  // Cálculo de posición dentro de gameArea
  const areaRect = gameArea.getBoundingClientRect();
  const radius = 25; // la mitad de 50px
  const maxLeft = gameArea.clientWidth - circle.offsetWidth;
  const maxTop = gameArea.clientHeight - circle.offsetHeight;
  const left = Math.floor(Math.random() * maxLeft);
  const top = Math.floor(Math.random() * maxTop);

  circle.style.left = left + 'px';
  circle.style.top = top + 'px';

  // Evento de clic
  circle.onclick = function() {
    score++;
    scoreSpan.textContent = score;
    gameArea.removeChild(circle);
    spawnCircle();
  };

  gameArea.appendChild(circle);

  // Si no lo clickean en 1.2s, desaparece y aparece otro
  timeout = setTimeout(() => {
    if (playing && gameArea.contains(circle)) {
      gameArea.removeChild(circle);
      spawnCircle();
    }
  }, 1200);
}

startBtn.onclick = startGame;