const colors = ['green', 'red', 'yellow', 'blue'];
let sequence = [];
let playerSequence = [];
let level = 0;
let waitingInput = false;
const statusDiv = document.getElementById('status');
const startBtn = document.getElementById('start-btn');

colors.forEach(color => {
  document.getElementById(color).onclick = () => handleColorClick(color);
});

startBtn.onclick = startGame;

function startGame() {
  sequence = [];
  playerSequence = [];
  level = 0;
  statusDiv.textContent = '';
  nextLevel();
}

function nextLevel() {
  level++;
  statusDiv.textContent = `Nivel ${level}`;
  playerSequence = [];
  sequence.push(colors[Math.floor(Math.random() * 4)]);
  showSequence(0);
}

function showSequence(idx) {
  waitingInput = false;
  if (idx < sequence.length) {
    const color = sequence[idx];
    flashColor(color);
    setTimeout(() => showSequence(idx + 1), 700);
  } else {
    setTimeout(() => {
      waitingInput = true;
      statusDiv.textContent = `Tu turno (Nivel ${level})`;
    }, 400);
  }
}

function flashColor(color) {
  const el = document.getElementById(color);
  el.classList.add('active');
  setTimeout(() => el.classList.remove('active'), 400);
}

function handleColorClick(color) {
  if (!waitingInput) return;
  playerSequence.push(color);
  flashColor(color);

  const idx = playerSequence.length - 1;
  if (color !== sequence[idx]) {
    statusDiv.textContent = `¡Fallaste! Llegaste al nivel ${level}.`;
    waitingInput = false;
    return;
  }
  if (playerSequence.length === sequence.length) {
    waitingInput = false;
    setTimeout(nextLevel, 900);
  }
}