<!DOCTYPE html>
<html>
<head>
<style>
/* Estilos CSS previos */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f8f8;
  display: flex; /* Usamos flexbox para organizar en columnas */
}

.container {
  width: 80%; /* Ancho del contenedor principal */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 10px;
}

.analysis-column {
  width: 20%; /* Ancho de la columna de análisis */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra los botones horizontalmente */
  border-left: 2px solid #ccc; /* Línea divisoria */
}

.button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button:hover {
  opacity: 0.8;
}

.button-blue {
  background-color: #00568C;
}

.button-red {
  background-color: #8B0000;
}

.button-purple {
  background-color: #800080;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

/* Estilos para el marcador sincronizado */
.marcador-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.marcador-contador {
  font-size: 18px;
  font-weight: bold;
  margin: 0 10px;
}

.marcador-boton {
  background-color: #4CAF50; /* Verde */
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.marcador-boton:hover {
  opacity: 0.8;
}

.marcador-boton.desactivado {
  background-color: #ccc; /* Gris */
  cursor: default;
}

.historial {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 0;
}

.historial p {
  margin: 2px;
  font-size: 24px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
}

.historial .P {
  color: white;
  background-color: #00568C;
}

.historial .B {
  color: white;
  background-color: #8B0000;
}

.historial .T {
  color: white;
  background-color: #008000;
}

.prompts-container {
  display: none; /* Oculta la sección de prompts */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  max-width: 400px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  font-family: inherit;
}

.copy-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 5px;
  width: 100%;
  transition: all 0.3s ease;
}

.copy-button:hover {
  opacity: 0.8;
}

.button-gray {
  background-color: #808080;
}

.analysis-button-container {
  margin-bottom: 10px;
  width: 100%;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.analysis-table th {
  background-color: #f0f0f0;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

.analysis-table td {
  padding: 10px;
  text-align: center;
}

.analysis-button {
  background-color: #FFD700;
  color: #333;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 85%; /* Ajusta el ancho de los botones */
}
.analysis-button-inicio {
  background-color: #4CAF50; /* Verde para los botones de inicio */
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 85%; /* Ajusta el ancho de los botones */
}

.analysis-button:hover {
  opacity: 0.8;
}

.next-chars-info {
  margin-top: 5px;
  font-size: 12px;
  color: #333; /* Color más oscuro para mejor visibilidad */
  font-weight: bold;
}

/* Estilos para los botones deshabilitados */
.analysis-button[disabled], .analysis-button-inicio[disabled] {
  background-color: #cccccc;
  color: #666666;
  cursor: default;
}

/* Estilo para el botón clickeado */
.analysis-button.clicked, .analysis-button-inicio.clicked {
  background-color: #666666; /* Gris más oscuro */
  color: #ffffff;
}

.contador-historial {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.contador-item {
  margin: 0 10px;
  font-size: 14px;
  color: #333;
}

.contador-valor {
  font-weight: bold;
  margin-left: 5px;
}

.current-analysis-button-container {
  display: flex;
  width: 60%;
  justify-content: space-around;
  margin: 20px auto 0;
}

.current-analysis-button {
  border: none;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 300px; /* Ancho fijo para los botones */
  margin-right: 50px;
}
.current-analysis-button:last-child {
  margin-right: 0;
}

.current-analysis-button:hover {
  opacity: 0.8;
}

.current-analysis-button.clicked {
  background-color: #666666 !important;
  color: #ffffff;
}

.current-analysis-button#current-analysis-inicio {
  background-color: #4CAF50; /* Verde para el botón de inicio */
  color: white;
}

.current-analysis-button#current-analysis-win {
  background-color: #FFD700; /* Amarillo para el botón de WIN */
  color: #333;
}

.current-analysis-button#current-analysis-loss {
  background-color: #FFD700; /* Amarillo para el botón de LOSS */
  color: #333;
}

/* Estilos para la tabla de Roadmap */
.roadmap-table {
  border-collapse: collapse;
  margin: 20px auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: #f8f8f8; /* Fondo para la tabla */
}

.roadmap-table td {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-clip: padding-box;
  transition: transform 0.2s ease; /* Transición suave para el efecto hover */
}

.roadmap-table td:hover {
  transform: scale(1.1); /* Efecto de escala al pasar el mouse */
  z-index: 1; /* Asegura que la celda se muestre por encima de las demás */
}

.roadmap-table .P {
  background-color: #00568C; /* Azul para Player */
}

.roadmap-table .B {
  background-color: #8B0000; /* Rojo para Banker */
}

.roadmap-table .T {
  background-color: #008000; /* Verde para Tie */
}

/* Contenedor para la tabla Roadmap */
.roadmap-container {
  overflow-x: auto; /* Permite desplazamiento horizontal */
  width: 100%;
  margin-bottom: 20px;
}

/* Estilos para el marcador sincronizado */
.marcador-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.marcador-contador {
  font-size: 18px;
  font-weight: bold;
  margin: 0 10px;
}

.marcador-boton {
  background-color: #4CAF50; /* Verde */
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.marcador-boton:hover {
  opacity: 0.8;
}

.marcador-boton.desactivado {
  background-color: #ccc; /* Gris */
  cursor: default;
}
</style>
</head>
<body>

<div class="container">
  <h1>Baccarat Predictor</h1>
  <div id="temporizador-sesion" style="text-align: center; font-size: 16px; margin-bottom: 10px;">Tiempo de sesión: <span id="tiempo">00:00:00</span></div>

  <div class="button-container">
    <button id="playerButton" class="button button-blue" onclick="addResult('P')">Player (P)</button>
    <button id="bankerButton" class="button button-red" onclick="addResult('B')">Banker (B)</button>
    <button id="tieButton" class="button button-purple" onclick="addResult('T')">Tie (T)</button>
    <button id="deleteButton" class="button button-gray" onclick="deleteLastResult()">Deshacer</button>
    <button id="resetButton" class="button button-purple" onclick="resetSession()">Reiniciar</button>
  </div>

  <h2>Historial reciente:</h2>
  <div class="historial" id="historial"></div>
    
  <div class="contador-historial">
    <div class="contador-item">
      Player: <span id="contador-player" class="contador-valor">0</span>
    </div>
    <div class="contador-item">
      Banker: <span id="contador-banker" class="contador-valor">0</span>
    </div>
    <div class="contador-item">
      Tie: <span id="contador-tie" class="contador-valor">0</span>
    </div>
    <div class="contador-item">
      Total: <span id="contador-total" class="contador-valor">0</span>
    </div>
  </div>

  <div class="roadmap-container">
    <table id="roadmap" class="roadmap-table"></table>
  </div>

  <div class="marcador-container">
    <button id="marcador-boton" class="marcador-boton" onclick="toggleMarcador()">Activar Marcador</button>
    <span id="marcador-contador" class="marcador-contador">(0/2)</span>
  </div>

  <div class="current-analysis-button-container">
    <button id="current-analysis-inicio" class="current-analysis-button" onclick="analyze(0, null, 'current-analysis-inicio')">INICIO</button>
    <button id="current-analysis-win" class="current-analysis-button" onclick="analyze(0, 'WIN', 'current-analysis-win')">WIN</button>
    <button id="current-analysis-loss" class="current-analysis-button" onclick="analyze(0, 'LOSS', 'current-analysis-loss')">LOSS</button>
  </div>

  <div class="prompts-container">
    <div>
      <h3>Prompt inicial:</h3>
      <button class="copy-button" onclick="copyPrompt('promptInicial')">Copiar</button>
      <textarea id="promptInicial" rows="10" cols="50">
Eres un experto en análisis predictivo avanzado y patrones secuenciales, especializado en el juego de Baccarat en casinos virtuales. Quiero que utilices tus habilidades más avanzadas de aprendizaje automático, reconocimiento de patrones y análisis secuencial para responder a mis solicitudes.   

A continuación, te proporcionaré el historial reciente de resultados de la 'Main Road', donde:   

- **B** representa al Banquero.   
- **P** representa al Jugador.   
- **T** representa un Tie (empate).   

Recuerda: nunca debes considerar el Tie (T) en tus predicciones.   

**Tu tarea es realizar dos predicciones futuras en base a los factores principales que se enumeran a continuación:**   

1. **Frecuencia de P y B:** Evalúa la proporción de veces que cada resultado ha aparecido en el historial reciente y considera su impacto en los resultados futuros.   
2. **Rachas:** Identifica la longitud y frecuencia de las rachas de "P" y "B", y cómo podrían influir en las siguientes jugadas.   
3. **Patrones repetitivos:** Busca secuencias específicas que puedan indicar un resultado recurrente, como "PBPB" o "PPBB".   
4. **Alternancia:** Analiza si los resultados alternan de manera regular entre "P" y "B", para determinar si es probable que continúe esta tendencia o cambie.   
5. **Últimos resultados:** Da mayor peso a las tendencias reflejadas en las jugadas más recientes.   

Con base en este análisis, asigna un porcentaje de probabilidad a **dos predicciones futuras**. Estas deben reflejar tu confianza cualitativa en los resultados más probables y estar justificadas por los datos analizados.   

**Formato de respuesta:**   

- **Predicción 1 (X): XX%**   
  *(Justificación breve basada en los factores principales.)*   

- **Predicción 2 (Y): XX%**   
  *(Justificación breve basada en los factores principales.)*   

Si los patrones en el historial reciente son inestables o no permiten realizar predicciones confiables, sugiere un cambio de mesa.   

Por favor, no incluyas explicaciones adicionales fuera del formato solicitado. Solo proporciona el resultado final de tu análisis.   

**Historial reciente:**
</textarea>
    </div>
    <div>
      <h3>Prompt WIN:</h3>
      <button class="copy-button" onclick="copyPrompt('promptWIN')">Copiar</button>
      <textarea id="promptWIN" rows="4" cols="50">
¡Buen trabajo! Tu predicción fue correcta.Por favor, no olvides utilizar tus habilidades avanzadas de aprendizaje automático y reconocimiento de patrones para mantener este nivel de precisión.

Historial reciente (Actualizado):
</textarea>
    </div>
    <div>
      <h3>Prompt LOSS:</h3>
      <button class="copy-button" onclick="copyPrompt('promptLOSS')">Copiar</button>
      <textarea id="promptLOSS" rows="4" cols="50">
Lástima, la predicción no fue correcta.Por favor, no olvides aplicar tus habilidades avanzadas de aprendizaje automático y reconocimiento de patrones para mejorar el análisis.

Historial reciente (Actualizado):
</textarea>
    </div>
  </div>
  <div id="gemini-result" style="margin-top: 20px;"></div>
</div>

<div class="analysis-column">
  <table class="analysis-table">
    <thead>
        <tr>
          <th>Pasos Atrás</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="analysis-button-container">
              <button id="analysis-0-inicio" class="analysis-button-inicio" onclick="analyze(8, null, 'analysis-0-inicio')">INICIO <br>
              Eliminar 8 pasos</button>
              <div id="next-chars-info-0" class="next-chars-info"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="analysis-button-container">
              <button id="analysis-1-inicio" class="analysis-button-inicio" onclick="analyze(6, null, 'analysis-1-inicio')">INICIO <br> Eliminar 6 pasos</button>
              <button id="analysis-1-win" class="analysis-button" onclick="analyze(6, 'WIN', 'analysis-1-win')">WIN <br> Eliminar 6 pasos</button>
              <button id="analysis-1-loss" class="analysis-button" onclick="analyze(6, 'LOSS', 'analysis-1-loss')">LOSS <br> Eliminar 6 pasos</button>
              <div id="next-chars-info-1" class="next-chars-info"></div>
            </div>
          </td>
        </tr>
  <tr>
    <td>
      <div class="analysis-button-container">
        <button id="analysis-2-inicio" class="analysis-button-inicio" onclick="analyze(4, null, 'analysis-2-inicio')">INICIO <br> Eliminar 4 pasos</button>
        <button id="analysis-2-win" class="analysis-button" onclick="analyze(4, 'WIN', 'analysis-2-win')">WIN <br> Eliminar 4 pasos</button>
        <button id="analysis-2-loss" class="analysis-button" onclick="analyze(4, 'LOSS', 'analysis-2-loss')">LOSS <br> Eliminar 4 pasos</button>
        <div id="next-chars-info-2" class="next-chars-info"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="analysis-button-container">
        <button id="analysis-3-inicio" class="analysis-button-inicio" onclick="analyze(2, null, 'analysis-3-inicio')">INICIO <br> Eliminar 2 pasos</button>
        <button id="analysis-3-win" class="analysis-button" onclick="analyze(2, 'WIN', 'analysis-3-win')">WIN <br> Eliminar 2 pasos</button>
        <button id="analysis-3-loss" class="analysis-button" onclick="analyze(2, 'LOSS', 'analysis-3-loss')">LOSS <br> Eliminar 2 pasos</button>
        <div id="next-chars-info-3" class="next-chars-info"></div>
      </div>
    </td>
  </tr>
  </tbody>
  </table>
</div>
<script>
const GEMINI_API_KEY = "AIzaSyDq3U9wUEDxNVzFwg6FaJaYp6mtjDp0OaI"; // Reemplaza con tu clave de API (He colocado una de prueba)
  
let tiempoInicioSesion;
let intervaloTemporizador;
let roadmapData = []; // Array 2D para los datos del roadmap
let currentRow = 0;
let currentColumn = 0;
const maxRows = 6; // Filas
let maxColumns = 40; // Columnas
let marcadorActivado = false;
let contadorMarcador = 0;
  
// Iniciar el temporizador al cargar la página o al hacer clic en un botón
function iniciarTemporizador() {
  tiempoInicioSesion = new Date();
  clearInterval(intervaloTemporizador); // Limpiar cualquier intervalo anterior
  intervaloTemporizador = setInterval(actualizarTemporizador, 1000);
}
  
function actualizarTemporizador() {
  const ahora = new Date();
  const tiempoTranscurrido = new Date(ahora - tiempoInicioSesion);
  const horas = tiempoTranscurrido.getUTCHours().toString().padStart(2, '0');
  const minutos = tiempoTranscurrido.getUTCMinutes().toString().padStart(2, '0');
  const segundos = tiempoTranscurrido.getUTCSeconds().toString().padStart(2, '0');

  document.getElementById("tiempo").textContent = `${horas}:${minutos}:${segundos}`; // Línea modificada
}
  
// Llama a iniciarTemporizador() cuando se inicie la sesión
iniciarTemporizador(); // Por ejemplo, al cargar la página

function initializeRoadmap() {
  const table = document.getElementById("roadmap");
  table.innerHTML = ""; // Limpiar la tabla
  
  for (let i = 0; i < maxRows; i++) {
    const row = table.insertRow();
    roadmapData[i] = [];
    for (let j = 0; j < maxColumns; j++) {
      const cell = row.insertCell();
      roadmapData[i][j] = null; // Inicializar las celdas como vacías
      cell.textContent = "";
    }
  }
  currentRow = 0;
  currentColumn = 0;
}
  
function addResult(result) {
    // Agregar resultado al historial
    const resultElement = document.createElement("p");
    resultElement.textContent = result;
    resultElement.classList.add(result);
    document.getElementById("historial").appendChild(resultElement);
  
    // Lógica para agregar el resultado al roadmap
    addToRoadmap(result);
  
    // Actualizar prompts y contadores
    updatePrompts(document.getElementById("historial").textContent);
    updateCounters();

    // Actualizar el marcador
    if (marcadorActivado) {
      contadorMarcador++;
      actualizarMarcador();
      if (contadorMarcador >= 2) {
        contadorMarcador = 0; // Reiniciar el contador después de 2 clics
      }
    }
}
  
function addToRoadmap(result) {
  // Verificar si la celda actual está vacía
  if (roadmapData[currentRow][currentColumn] === null) {
    // Si está vacía, agregar el resultado aquí y terminar
    roadmapData[currentRow][currentColumn] = result;
    updateRoadmapTable();
    return;
  }
  
  // Si la celda actual está ocupada, buscar la siguiente celda vacía hacia abajo
  let nextRow = currentRow + 1;
  while (nextRow < maxRows && roadmapData[nextRow][currentColumn] !== null) {
    nextRow++;
  }
  
  // Si encontramos una celda vacía hacia abajo, la usamos
  if (nextRow < maxRows) {
    currentRow = nextRow;
  } else {
    // Si no hay celdas vacías hacia abajo, avanzamos a la siguiente columna
    currentColumn++;
    currentRow = 0;
  
    // Si se excede el número de columnas, eliminar la primera columna
    if (currentColumn >= maxColumns) {
      shiftColumnsLeft();
      currentColumn = maxColumns - 1;
    }
  }
  
  // Agregar el resultado a la celda actual
  roadmapData[currentRow][currentColumn] = result;
  
  // Actualizar la tabla visualmente
  updateRoadmapTable();
}
  
function shiftColumnsLeft() {
  // Eliminar la primera columna de datos
  for (let i = 0; i < maxRows; i++) {
    roadmapData[i].shift(); // Eliminar el primer elemento de cada fila
    roadmapData[i].push(null); // Agregar una celda vacía al final de cada fila
  }
  // Actualizar visualmente la tabla después de mover las columnas
  updateRoadmapTable();
}
  
function updateRoadmapTable() {
  const table = document.getElementById("roadmap");
  for (let i = 0; i < maxRows; i++) {
    for (let j = 0; j < maxColumns; j++) {
      const cell = table.rows[i].cells[j];
      const result = roadmapData[i][j];
      cell.textContent = result || ""; // Mostrar el resultado o una cadena vacía si es null
      cell.className = result || ""; // Aplicar la clase CSS según el resultado
    }
  }
}
  
function updatePrompts(historial) {
  document.getElementById("promptInicial").value = `Eres un experto en análisis predictivo avanzado y patrones secuenciales, especializado en el juego de Baccarat en casinos virtuales. Quiero que utilices tus habilidades más avanzadas de aprendizaje automático, reconocimiento de patrones y análisis secuencial para responder a mis solicitudes.  

A continuación, te proporcionaré el historial reciente de resultados de la 'Main Road', donde:  

- **B** representa al Banquero.  
- **P** representa al Jugador.  
- **T** representa un Tie (empate).  

Recuerda: nunca debes considerar el Tie (T) en tus predicciones.  

**Tu tarea es realizar dos predicciones futuras en base a los factores principales que se enumeran a continuación:**  

1. **Frecuencia de P y B:** Evalúa la proporción de veces que cada resultado ha aparecido en el historial reciente y considera su impacto en los resultados futuros.  
2. **Rachas:** Identifica la longitud y frecuencia de las rachas de "P" y "B", y cómo podrían influir en las siguientes jugadas.  
3. **Patrones repetitivos:** Busca secuencias específicas que puedan indicar un resultado recurrente, como "PBPB" o "PPBB".  
4. **Alternancia:** Analiza si los resultados alternan de manera regular entre "P" y "B", para determinar si es probable que continúe esta tendencia o cambie.  
5. **Últimos resultados:** Da mayor peso a las tendencias reflejadas en las jugadas más recientes.  

Con base en este análisis, asigna un porcentaje de probabilidad a **dos predicciones futuras**. Estas deben reflejar tu confianza cualitativa en los resultados más probables y estar justificadas por los datos analizados.  

**Formato de respuesta:**  

- **Predicción 1 (X): XX%**  
  *(Justificación breve basada en los factores principales.)*  

- **Predicción 2 (Y): XX%**  
  *(Justificación breve basada en los factores principales.)*  

Si los patrones en el historial reciente son inestables o no permiten realizar predicciones confiables, sugiere un cambio de mesa.  

Por favor, no incluyas explicaciones adicionales fuera del formato solicitado. Solo proporciona el resultado final de tu análisis.  

**Historial reciente:**
  ${historial}`;
  document.getElementById("promptWIN").value = `¡Buen trabajo! Tu predicción fue correcta.Por favor, no olvides utilizar tus habilidades avanzadas de aprendizaje automático y reconocimiento de patrones para mantener este nivel de precisión.
  
  Historial reciente (Actualizado):
  ${historial}`;
  document.getElementById("promptLOSS").value = `Lástima, la predicción no fue correcta.Por favor, no olvides aplicar tus habilidades avanzadas de aprendizaje automático y reconocimiento de patrones para mejorar el análisis.
  
  Historial reciente (Actualizado):
  ${historial}`;
}
  
function copyPrompt(promptId) {
  var copyText = document.getElementById(promptId);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value)
    .then(() => {
      // Puedes agregar un indicador visual sutil, como un cambio de color del botón, si lo deseas.
    })
    .catch(err => {
      console.error("Error al copiar el prompt: ", err);
    });
}
  
function simulateClick(buttonId) {
  var button = document.getElementById(buttonId);
  button.click();
}
  
document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') {
      deleteLastResult();
  } else if (event.key === '1') {
    simulateClick('playerButton');
  } else if (event.key === '2') {
    simulateClick('bankerButton');
  } else if (event.key === '3') {
    simulateClick('tieButton');
  } else if (event.key === 'Backspace' || event.key === 'Delete') {
    simulateClick('deleteButton');
  }
});
  
function deleteLastResult() {
    var historial = document.getElementById("historial");
    if (historial.childElementCount > 0) {
        // Eliminar el último resultado del historial
        historial.removeChild(historial.lastChild);
  
        // Eliminar el último resultado del roadmapData
        if (currentRow >= 0 && currentColumn >=0) {
            
          roadmapData[currentRow][currentColumn] = null;
  
          // Retroceder a la posición anterior
          let prevRow = currentRow - 1;
            
          if(prevRow >= 0){
            currentRow = prevRow;
          } else if (currentColumn > 0){
            currentColumn--;
            currentRow = 0;
              
            // Encontrar la última fila ocupada en la columna anterior
            for(let i = maxRows-1; i >= 0; i--){
              if(roadmapData[i][currentColumn] !== null){
                  currentRow = i;
                  break;
              }
            }
          } else {
            // Estamos en la primera columna, primera fila
            currentRow = 0;
            currentColumn = 0;
          }
        }
  
        // Actualizar la tabla del roadmap visualmente
        updateRoadmapTable();
  
        // Actualizar prompts y contadores
        updatePrompts(document.getElementById("historial").textContent);
        updateCounters();
        // Reiniciar el contador del marcador si es necesario
        if (marcadorActivado) {
          contadorMarcador = 0;
          actualizarMarcador();
        }
    }
}
  
function resetSession() {
  document.getElementById("historial").innerHTML = "";
  updatePrompts("");
  initializeRoadmap(); // Reiniciar la tabla
  updateCounters(); // Actualizar los contadores
  iniciarTemporizador();
  // Reiniciar el marcador
  contadorMarcador = 0;
  actualizarMarcador();
}
  
async function analyze(stepsToRemove, winLoss = null, buttonId) {
  const fullHistory = document.getElementById("historial").textContent;
  const historyArray = fullHistory.split('');
  const remainingChars = historyArray.slice(historyArray.length - stepsToRemove);
  
  // Eliminamos los últimos 'stepsToRemove' elementos del historial.
  const slicedHistory = historyArray.slice(0, historyArray.length - stepsToRemove).join('');
    
  // Obtenemos los dos caracteres que siguen después de eliminar
  const nextChars = remainingChars.slice(0, 2).join('');
  
  let prompt;
  if (winLoss === null) {
    prompt = document.getElementById("promptInicial").value;
    // Reemplaza el historial en el prompt inicial
    prompt = prompt.replace(/Historial reciente:[\s\S]*/, `Historial reciente:\n${slicedHistory}`);
  } else if (winLoss === 'WIN') {
    prompt = document.getElementById("promptWIN").value;
    // Reemplaza el historial en el prompt WIN
    prompt = prompt.replace(/Historial reciente \(Actualizado\):[\s\S]*/, `Historial reciente (Actualizado):\n${slicedHistory}`);
  } else {
    prompt = document.getElementById("promptLOSS").value;
    // Reemplaza el historial en el prompt LOSS
    prompt = prompt.replace(/Historial reciente \(Actualizado\):[\s\S]*/, `Historial reciente (Actualizado):\n${slicedHistory}`);
  }
  
  // Copiar el prompt al portapapeles
  navigator.clipboard.writeText(prompt)
    .then(async () => {
      console.log("Prompt copiado al portapapeles:", prompt);
  
      // Llamada a la API de Gemini
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${GEMINI_API_KEY}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          contents: [{
            parts: [{ text: prompt }]
          }]
        }),
      });
  
      if (!response.ok) {
        throw new Error(`Error en la respuesta de la API: ${response.statusText}`);
      }
  
      const data = await response.json();
      const generatedText = data.candidates[0].content.parts[0].text;
  
      // Mostrar la respuesta de la API en el div 'gemini-result'
      let resultElement = document.getElementById("gemini-result");
      if (!resultElement) {
        resultElement = document.createElement("div");
        resultElement.id = "gemini-result";
        resultElement.style.marginTop = "20px";
        document.querySelector(".prompts-container").insertAdjacentElement('afterend', resultElement);
      }
      resultElement.textContent = `Resultado de la API: ${generatedText}`;
  
      // Actualiza la información de los caracteres eliminados
      const buttonInfo = buttonId.split('-');
      let infoId;
      if (buttonId.startsWith('analysis-')) {
        if (buttonInfo.length === 3) {
          infoId = `next-chars-info-${buttonInfo[1]}`;
        } else {
          infoId = `next-chars-info-0`;
        }
      }
  
      if (infoId) {
        document.getElementById(infoId).textContent = `Siguientes 2 caracteres: ${nextChars}`;
      }
  
      // Deshabilita y cambia el color de los botones
      disableAndHighlightButtons(buttonId);
    })
    .catch(err => {
      console.error("Error:", err);
      // Mostrar el error en el div 'gemini-result'
      let resultElement = document.getElementById("gemini-result");
      if (!resultElement) {
        resultElement = document.createElement("div");
        resultElement.id = "gemini-result";
        resultElement.style.marginTop = "20px";
        document.querySelector(".prompts-container").insertAdjacentElement('afterend', resultElement);
      }
      resultElement.textContent = `Error: ${err.message}`;
    });
}
  
function disableAndHighlightButtons(buttonId) {
    // Restablece todos los botones a su estado original
    const allAnalysisButtons = document.querySelectorAll('.analysis-button, .analysis-button-inicio');
    allAnalysisButtons.forEach(button => {
      button.disabled = false;
      button.classList.remove('clicked'); // Elimina la clase 'clicked'
    });
      
    // Lógica para deshabilitar botones específicos
    if (buttonId.startsWith('analysis-')) {
      if (buttonId === 'analysis-0-inicio') {
          // Si se hace clic en INICIO (8 pasos), solo se deshabilita este botón
          document.getElementById('analysis-0-inicio').disabled = true;
          document.getElementById('analysis-0-inicio').classList.add('clicked'); // Marca como 'clicked'
      } else {
          // Para los demás botones, deshabilita la fila correspondiente
          const buttonInfo = buttonId.split('-');
          const rowNumber = buttonInfo[1];
            
          if (rowNumber !== '0') {
            document.getElementById(`analysis-${rowNumber}-inicio`).disabled = true;
            document.getElementById(`analysis-${rowNumber}-win`).disabled = true;
            document.getElementById(`analysis-${rowNumber}-loss`).disabled = true;
            
            // Marca el botón clickeado como 'clicked'
            document.getElementById(buttonId).classList.add('clicked');
          }
      }
  } else if (buttonId.startsWith('current-analysis-')) {
    // Restablecer estilos para botones de análisis actuales
    const currentAnalysisButtons = document.querySelectorAll('.current-analysis-button');
    currentAnalysisButtons.forEach(button => {
      button.classList.remove('clicked'); // Elimina la clase 'clicked' de todos los botones
    });

    // Aplicar estilo al botón clickeado
    document.getElementById(buttonId).classList.add('clicked');
  }
}

function updateCounters() {
  const historial = document.getElementById("historial").textContent;
  const playerCounter = (historial.match(/P/g) || []).length;
  const bankerCounter = (historial.match(/B/g) || []).length;
  const tieCounter = (historial.match(/T/g) || []).length;
  const totalCounter = playerCounter + bankerCounter + tieCounter;

  document.getElementById("contador-player").textContent = playerCounter;
  document.getElementById("contador-banker").textContent = bankerCounter;
  document.getElementById("contador-tie").textContent = tieCounter;
  document.getElementById("contador-total").textContent = totalCounter;
}

function toggleMarcador() {
  marcadorActivado = !marcadorActivado;
  const boton = document.getElementById("marcador-boton");
  if (marcadorActivado) {
    boton.textContent = "Desactivar Marcador";
    boton.classList.remove("desactivado");
  } else {
    boton.textContent = "Activar Marcador";
    boton.classList.add("desactivado");
    contadorMarcador = 0; // Reiniciar el contador
  }
  actualizarMarcador();
}

function actualizarMarcador() {
  const marcador = document.getElementById("marcador-contador");
  marcador.textContent = `(${contadorMarcador}/2)`;
}

// Inicializar la tabla al cargar la página
initializeRoadmap();
</script>

</body>
</html>