/* ------------------------
   4. UI MANAGER
   ------------------------ */
function setupBoard() {
  board = [];
  currentScore = 0;
  updateScoreDisplay();

  const container = document.getElementById("board");
  if (!container) {
    console.error("Board element not found (#board).");
    return;
  }

  container.innerHTML = "";
  for (let r = 0; r < 4; r++) {
    board[r] = [];
    for (let c = 0; c < 4; c++) {
      board[r][c] = 0;
      const tile = document.createElement("div");
      tile.id = `${r}-${c}`;
      tile.className = "tile";
      container.appendChild(tile);
    }
  }
}

function updateTile(row, col, num) {
  const tile = document.getElementById(`${row}-${col}`);
  if (!tile) return;

  tile.className = "tile";

  if (num > 0) {
    tile.textContent = num;
    tile.classList.add("tile-" + num);
  } else {
    tile.textContent = "";
  }
}

function refreshBoard() {
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 4; c++) {
      updateTile(r, c, board[r][c]);
    }
  }
  updateScoreDisplay();
}

function updateScoreDisplay() {
  const scoreEl = document.getElementById("score");
  if (scoreEl) {
    scoreEl.textContent = currentScore;
  }
  
  if (currentScore > highScore) {
    highScore = currentScore;
    localStorage.setItem(storageKey, highScore); 
    updateHighScoreDisplay();
  }
}

function updateHighScoreDisplay() {
  const highScoreEl = document.getElementById('high-score');
  if (highScoreEl) {
    highScoreEl.textContent = highScore;
  }
}

function resetScore() {
  currentScore = 0;
  updateScoreDisplay();
}

function checkAndShowTutorial() {
  const showTutorial = sessionStorage.getItem("showTutorial");
  const loggedInUser = sessionStorage.getItem("loggedInUser");
  
  if (showTutorial === "true" && loggedInUser) {
    setTimeout(() => {
      const tutorialOverlay = document.getElementById('tutorial-overlay');
      if (tutorialOverlay) {
        tutorialOverlay.style.display = 'flex';
      }
      sessionStorage.setItem("showTutorial", "false");
    }, 500);
  }
}

function showGameOver() {
  const finalScore = currentScore;

  if (typeof saveScore === 'function') {
      console.log("Mengirim skor ke database:", finalScore);
      saveScore(finalScore);
  } else {
      console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload.");
  }

  const isNewHighScore = finalScore >= highScore && finalScore > 0;
  
  const finalScoreEl = document.getElementById('final-score');
  if (finalScoreEl) finalScoreEl.textContent = finalScore;
  
  const newHighScoreBadge = document.getElementById('new-high-score-badge');
  const highScoreDisplay = document.getElementById('high-score-display');
  
  if (isNewHighScore) {
    if (newHighScoreBadge) newHighScoreBadge.style.display = 'inline-block';
    if (highScoreDisplay) highScoreDisplay.style.display = 'none';
  } else {
    if (newHighScoreBadge) newHighScoreBadge.style.display = 'none';
    if (highScoreDisplay) highScoreDisplay.style.display = 'block';
    const modalHighScore = document.getElementById('modal-high-score');
    if (modalHighScore) modalHighScore.textContent = highScore;
  }
  
  const gameOverOverlay = document.getElementById('game-over-overlay');
  if (gameOverOverlay) gameOverOverlay.style.display = 'flex';
}

function hideGameOver() {
  const gameOverOverlay = document.getElementById('game-over-overlay');
  if (gameOverOverlay) gameOverOverlay.style.display = 'none';
}