// --------------------------
// Variables
// --------------------------
let score = 0;
let mode = 'A'; // default mode

// --------------------------
// DOM Elements
// --------------------------
const startBtn = document.getElementById('startBtn');
const stopBtnEl = document.getElementById('stopBtn');
const submitBtn = document.getElementById('submitBtn');
const modeSelect = document.getElementById('modeSelect');
const finalScore = document.getElementById('finalScore');
const resultWrap = document.getElementById('resultWrap');
const finalBest = document.getElementById('finalBest');
const leaderboardTableBody = document.querySelector('#leaderboard tbody');

// --------------------------
// Backend Functions
// --------------------------
function sendScoreToBackend(username) {
  if (!username) return;

  fetch('backend/submit_score.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `username=${encodeURIComponent(username)}&score=${score}&mode=${mode}`
  })
    .then(r => r.json())
    .then(res => {
      if (res.status === 'success') console.log('Score submitted!');
      else console.warn('Error submitting score', res.message);
    })
    .catch(err => console.error('Network error', err));
}

function loadLeaderboard(modeToLoad = mode, limit = 10) {
  fetch(`backend/leaderboard.php?mode=${modeToLoad}&limit=${limit}`)
    .then(r => r.json())
    .then(data => {
      leaderboardTableBody.innerHTML = '';
      data.forEach((row, i) => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${i + 1}</td><td>${row.username}</td><td>${row.score}</td><td>${row.created_at}</td>`;
        leaderboardTableBody.appendChild(tr);
      });
    })
    .catch(err => console.error('Error loading leaderboard', err));
}

// --------------------------
// Game Functions
// --------------------------
function saveBestIfBetter(score) {
  const bestKey = 'seq_best_' + mode;
  const currentBest = parseInt(localStorage.getItem(bestKey)) || 0;
  if (score > currentBest) localStorage.setItem(bestKey, score);
}

function endRound() {
  // Stop timer, hide game UI, show results etc.
  stopBtnEl.style.display = 'none';
  startBtn.style.display = '';
  modeSelect.disabled = false;
  resultWrap.style.display = '';

  finalScore.textContent = score;
  saveBestIfBetter(score);
  finalBest.textContent = localStorage.getItem('seq_best_' + mode) || '—';

  // Ask for username and submit score
  const username = prompt("Enter your name to submit score:", "Player");
  if (username) sendScoreToBackend(username);

  // Reload leaderboard
  loadLeaderboard();

  // Reset for next round
  score = 0;
}

// --------------------------
// Event Listeners
// --------------------------
startBtn.addEventListener('click', () => {
  mode = modeSelect.value;
  score = 0;
  // your code to start the round/game
});

stopBtnEl.addEventListener('click', () => {
  endRound();
});

// Optional: load leaderboard when page loads
document.addEventListener('DOMContentLoaded', () => {
  loadLeaderboard();
});