<!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: 00:00:00</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
  
  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 segundos = tiempoTranscurrido.getUTCSeconds().toString().padStart(2, '0');
    
    document.getElementById("temporizador-sesion").textContent = `Tiempo de sesión: ${horas}:${minutos}:${segundos}`;
  }
  
  // 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>