const userScoreSpan = document.getElementById('user-score');
const computerScoreSpan = document.getElementById('computer-score');
const resultDiv = document.getElementById('result');
const choiceButtons = document.querySelectorAll('#choices button');
const resetBtn = document.getElementById('reset-btn');

let userScore = 0;
let computerScore = 0;

const choices = ['piedra', 'papel', 'tijera'];

function computerPlay() {
  const idx = Math.floor(Math.random() * 3);
  return choices[idx];
}

function playRound(userChoice) {
  const computerChoice = computerPlay();

  let resultMsg = `Tu elección: ${emoji(userChoice)} ${capitalize(userChoice)}<br>
                   Máquina: ${emoji(computerChoice)} ${capitalize(computerChoice)}<br>`;

  if (userChoice === computerChoice) {
    resultMsg += "<strong>¡Empate!</strong>";
  } else if (
    (userChoice === 'piedra' && computerChoice === 'tijera') ||
    (userChoice === 'papel' && computerChoice === 'piedra') ||
    (userChoice === 'tijera' && computerChoice === 'papel')
  ) {
    userScore++;
    userScoreSpan.textContent = userScore;
    resultMsg += "<strong>¡Ganaste esta ronda! 🎉</strong>";
  } else {
    computerScore++;
    computerScoreSpan.textContent = computerScore;
    resultMsg += "<strong>La máquina gana esta ronda.</strong>";
  }

  resultDiv.innerHTML = resultMsg;
}

function emoji(choice) {
  if (choice === 'piedra') return '🪨';
  if (choice === 'papel') return '📄';
  if (choice === 'tijera') return '✂️';
}

function capitalize(word) {
  return word.charAt(0).toUpperCase() + word.slice(1);
}

choiceButtons.forEach(btn => {
  btn.onclick = () => playRound(btn.getAttribute('data-choice'));
});

resetBtn.onclick = () => {
  userScore = 0;
  computerScore = 0;
  userScoreSpan.textContent = userScore;
  computerScoreSpan.textContent = computerScore;
  resultDiv.textContent = '';
};