const canvas = document.getElementById("tablero");
const ctx = canvas.getContext("2d");

const startButton = document.getElementById("startButton");
const banderas = document.getElementById("banderas");
const tiempo = document.getElementById("tiempo");

const FILAS = 25;
const COLUMNAS = 25;
const cellSize = 32;
const nBombas = 50;

let nBanderas=nBombas;
let tiempoTranscurrido = 0;
let cronometro;
let tablero = [];

canvas.width = COLUMNAS * cellSize;
canvas.height = FILAS * cellSize;

function handleClick(event) {
  const { x, y } = getCellCoordinates(event);
  if (!tablero[y][x].tieneFlag) levantaCelda(y, x);
}

function handleContextMenu(event) {
  event.preventDefault();
  const { x, y } = getCellCoordinates(event);
  marcaFlagCelda(y, x);
}

function getCellCoordinates(event) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: Math.floor((event.x - rect.left) / cellSize),
    y: Math.floor((event.y - rect.top) / cellSize),
  };
}

function generaTablero() {
  for (let y = 0; y < FILAS; y++) {
    tablero[y] = [];
    for (let x = 0; x < COLUMNAS; x++) {
      tablero[y][x] = {
        esMina: false,
        abierto: false,
        tieneFlag: false,
        nAdyacentes: 0,
      };
    }
  }

  for (let z = 0; z < nBombas; z++) {
    let x, y;
    do {
      y = Math.floor(Math.random() * FILAS);
      x = Math.floor(Math.random() * COLUMNAS);
    } while (tablero[y][x].esMina);
    tablero[y][x].esMina = true;

    for (let i = -1; i <= 1; i++) {
      for (let j = -1; j <= 1; j++) {
        if (y + i >= 0 && y + i < FILAS && x + j >= 0 && x + j < COLUMNAS) {
          if (!tablero[y + i][x + j].esMina) {
            tablero[y + i][x + j].nAdyacentes += 1;
          }
        }
      }
    }
  }
}

function levantaCelda(y, x) {
  if (!tablero[y][x].abierto) {
    tablero[y][x].abierto = true;
    tablero[y][x].tieneFlag = false;
    if (tablero[y][x].nAdyacentes === 0 && !tablero[y][x].esMina) {
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          if (
            y + i >= 0 &&
            y + i < FILAS &&
            x + j >= 0 &&
            x + j < COLUMNAS &&
            !(i === 0 && j === 0)
          ) {
            levantaCelda(y + i, x + j);
          }
        }
      }
    }
    if (tablero[y][x].esMina) {
      gameOver();
    } else if (comprobarVictoria()) {
      victoria();
    }
  }
}

function comprobarVictoria() {
  return tablero.every((row) =>
    row.every((cell) => cell.abierto || cell.esMina)
  );
}

function marcaFlagCelda(y, x) {
  if (!tablero[y][x].abierto) {
    tablero[y][x].tieneFlag = !tablero[y][x].tieneFlag;
  }
}

function dibujaTablero() {
  for (let y = 0; y < FILAS; y++) {
    for (let x = 0; x < COLUMNAS; x++) {
      ctx.strokeStyle = "red";
      ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
      if (!tablero[y][x].abierto) {
        ctx.fillStyle = "blue";
        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
      } else {
        ctx.fillStyle = "green";
        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
        if (tablero[y][x].nAdyacentes > 0) {
          ctx.font = "30px Arial";
          ctx.fillStyle = "black";
          const text = tablero[y][x].nAdyacentes;
          const textX =
            x * cellSize + cellSize / 2 - ctx.measureText(text).width / 2;
          const textY = y * cellSize + cellSize / 2 + 10; // Ajusta verticalmente para centrar
          ctx.fillText(text, textX, textY);
        }
      }

      if (tablero[y][x].tieneFlag) {
        ctx.fillStyle = "yellow";
        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
      }
    }
  }
}

function gameLoop() {
  tiempo.textContent = convertirTiempo(tiempoTranscurrido);
  banderas.textContent = nBanderas;
  dibujaTablero();
  window.requestAnimationFrame(gameLoop);
}

function iniciarCronometro() {
  tiempoTranscurrido = 0;
  cronometro = setInterval(() => {
    tiempoTranscurrido++;
  }, 1000);
}
function detenerCronometro() {
  clearInterval(cronometro);
}
function convertirTiempo(tiempoSegundos) {
  const horas = Math.floor(tiempoSegundos / 3600);
  const minutos = Math.floor((tiempoSegundos % 3600) / 60);
  const segundos = tiempoSegundos % 60;
  const horasStr = String(horas).padStart(2, "0");
  const minutosStr = String(minutos).padStart(2, "0");
  const segundosStr = String(segundos).padStart(2, "0");
  return `${horasStr}:${minutosStr}:${segundosStr}`;
}

function iniciarPartida() {
  startButton.blur();
  startButton.style.visibility = "hidden";
  canvas.addEventListener("click", handleClick);
  canvas.addEventListener("contextmenu", handleContextMenu);
  generaTablero();
  iniciarCronometro();
  gameLoop();
}

function terminarPartida() {
  canvas.removeEventListener("click", handleClick);
  canvas.removeEventListener("contextmenu", handleContextMenu);
  detenerCronometro();
  startButton.style.visibility = "visible";
  startButton.focus();
}

function victoria() {
  terminarPartida();
}

function gameOver() {
  terminarPartida();
}