script.js

// ========== SECURITY: XSS Prevention ==========
// Sanitize HTML to prevent XSS attacks when using innerHTML with user/data content
function sanitizeHTML(str) {
  if (!str) return '';
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

// Create safe HTML elements without innerHTML injection vulnerability
function createSafeElement(tag, className, htmlContent = null) {
  const element = document.createElement(tag);
  if (className) element.className = className;
  if (htmlContent) {
    // Only use innerHTML if content is known-safe (no user input)
    element.innerHTML = htmlContent;
  }
  return element;
}
// ============================================

// Variables globales
let hexagramasData = null;
let consultaActual = null;
const HEXAGRAMAS_API = "hexagramas.json";
const DESTACADOS_IDS = [1, 2, 11, 12, 24, 64]; // IDs de los hexagramas destacados
let consultasGuardadas = [];
let recognition;
let isListening = false;
let voiceErrorDiv;
let modalOpen = false;
let valuesModalOpen = false;
let shareModalOpen = false;
let isScriptReady = false;
let deferredPrompt;

// Función para esperar a que un elemento esté disponible (optimizada con requestAnimationFrame)
function waitForElement(selector, callback, maxAttempts = 60, interval = null) {
  let attempts = 0;
  const maxTime = 6000; // 6 segundos máximo
  const startTime = Date.now();
  
  const checkElement = () => {
    attempts++;
    const element = document.querySelector(selector);
    
    if (element) {
      console.log(`✅ Elemento encontrado: ${selector}`);
      callback(element);
      return true;
    } else if (attempts < maxAttempts && (Date.now() - startTime) < maxTime) {
      // Usar requestAnimationFrame en lugar de setTimeout para mejor rendimiento
      requestAnimationFrame(checkElement);
    } else {
      console.error(
        `❌ Elemento no encontrado después de ${maxAttempts} intentos: ${selector}`
      );
      return false;
    }
  };
  
  // Primera búsqueda inmediata
  if (document.querySelector(selector)) {
    callback(document.querySelector(selector));
    return;
  }
  
  checkElement();
}

// Función para esperar múltiples elementos (optimizada con requestAnimationFrame)
function waitForElements(
  selectors,
  callback,
  maxAttempts = 60,
  interval = null
) {
  let attempts = 0;
  const maxTime = 6000; // 6 segundos máximo
  const startTime = Date.now();
  
  const checkElements = () => {
    attempts++;
    const elements = {};
    let allFound = true;

    for (const [key, selector] of Object.entries(selectors)) {
      elements[key] = document.querySelector(selector);
      if (!elements[key]) {
        allFound = false;
      }
    }

    if (allFound) {
      console.log("✅ Todos los elementos necesarios están disponibles");
      callback(elements);
      return true;
    } else if (attempts < maxAttempts && (Date.now() - startTime) < maxTime) {
      requestAnimationFrame(checkElements);
    } else {
      console.error(
        `❌ Uno o más elementos no encontrados después de ${maxAttempts} intentos`
      );
      return false;
    }
  };
  
  checkElements();
}

// Añadir estilos de error
function addErrorStyles() {
  const style = document.createElement("style");
  style.textContent = `
    #oracleQuestion.error {
      animation: shake 0.5s;
      border-color: #d32f2f;
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
  `;
  document.head.appendChild(style);
}

// Configurar navegación suave
function setupNavigation() {
  document.querySelectorAll("nav a").forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      const targetId = this.getAttribute("href");
      document.querySelector(targetId).scrollIntoView({
        behavior: "smooth",
      });
    });
  });
}

// Función para cargar los datos de hexagramas
async function loadHexagramData() {
  if (hexagramasData) return hexagramasData; // Usar caché si ya están cargados

  try {
    const response = await fetch(HEXAGRAMAS_API);
    if (!response.ok) {
      throw new Error("No se pudo cargar la biblioteca de hexagramas");
    }
    hexagramasData = await response.json();
    return hexagramasData;
  } catch (error) {
    console.error("❌ Error al cargar hexagramas:", error);
    // Datos de respaldo mínimo en caso de fallo
    hexagramasData = {
      hexagramas: [
        {
          id: 1,
          nombre: "Error de carga",
          juicio: "No se pudieron cargar los datos de los hexagramas",
          imagen:
            "Cielo y tierra unidos: la imagen de la Paz. Así el soberano divide y completa el curso del cielo y la tierra; fomenta y regula los dones del cielo y la tierra, y así ayuda al pueblo.",
          lineas: [
            "Primera línea (6): Cuando se acerca la paz, pequeño desorden. No hay culpa en ello. Perseverancia trae buena fortuna.",
            "Segunda línea (7): Paz. Lo pequeño se va, lo grande viene. Ventura. Éxito.",
            "Tercera línea (8): No persigas después de la paz. Permanece en tu lugar. La desdicha acecha.",
            "Cuarta línea (8): Paz. No es bueno confiar en uno mismo. Mejor buscar aliados.",
            "Quinta línea (9): El rey Wei da a luz a la paz. No es bueno hacer la guerra. Es bueno correr peligros grandes. Ninguna culpa.",
            "Sexta línea (6): La paz se disipa. Primero canta y baila, luego llora y gime. La desdicha acecha.",
          ],
          binario: "111111",
        },
      ],
    };
    return hexagramasData;
  }
}

// Función para encontrar un hexagrama por ID
async function findHexagramById(id) {
  const data = await loadHexagramData();
  return (
    data.hexagramas.find((h) => h.id === parseInt(id)) || data.hexagramas[0]
  );
}

// Función para encontrar un hexagrama por binario
async function findHexagramByBinary(binary) {
  const data = await loadHexagramData();
  return (
    data.hexagramas.find((h) => h.binario === binary) || data.hexagramas[0]
  );
}

// Función para lanzar monedas
function castCoins() {
  const lines = [];

  for (let i = 0; i < 6; i++) {
    let sum = 0;
    for (let j = 0; j < 3; j++) {
      sum += Math.floor(Math.random() * 2); // 0 o 1
    }

    // Convertir a línea de I Ching:
    // 3 = yang (9, línea entera mutante)
    // 0 = yin (6, línea quebrada mutante)
    // 2 = yin (8, línea quebrada)
    // 1 = yang (7, línea entera)
    let lineType;
    if (sum === 3) {
      lineType = { type: "yang", changing: true, value: 9 };
    } else if (sum === 0) {
      lineType = { type: "yin", changing: true, value: 6 };
    } else if (sum === 2) {
      lineType = { type: "yin", changing: false, value: 8 };
    } else {
      lineType = { type: "yang", changing: false, value: 7 };
    }

    lines.push(lineType);
  }

  return lines;
}

// Dibujar hexagrama
function drawHexagram(lines) {
  const hexagramDisplay = document.getElementById("hexagramDisplay");
  if (!hexagramDisplay) {
    console.error("❌ Elemento hexagramDisplay no encontrado");
    return;
  }

  hexagramDisplay.innerHTML = "";

  // Dibujar de abajo hacia arriba (línea 1 es la de abajo)
  for (let i = 0; i < 6; i++) {
    const lineDiv = document.createElement("div");
    lineDiv.className = lines[i].type === "yang" ? "line" : "line broken";

    if (lines[i].changing) {
      lineDiv.classList.add("changing");
    }

    hexagramDisplay.appendChild(lineDiv);
  }
}

// Mostrar líneas mutantes
function showChangingLines(lines, hexagram) {
  const changingLinesContainer = document.getElementById(
    "changingLinesContainer"
  );
  if (!changingLinesContainer) {
    console.error("❌ Elemento changingLinesContainer no encontrado");
    return;
  }

  changingLinesContainer.innerHTML = "";
  const header = createSafeElement('h4', null, 'Líneas Mutantes');
  changingLinesContainer.appendChild(header);

  const changingLines = lines.filter((line) => line.changing);

  if (changingLines.length === 0) {
    const noLines = createSafeElement('p', null, 'No hay líneas mutantes en esta consulta');
    changingLinesContainer.appendChild(noLines);
    return;
  }

  changingLines.forEach((line, index) => {
    const linePosition = lines.indexOf(line) + 1;
    const lineText =
      hexagram.lineas && hexagram.lineas[linePosition - 1]
        ? hexagram.lineas[linePosition - 1]
        : `Línea ${linePosition} (${line.value}): No hay descripción disponible`;

    const lineDiv = document.createElement("div");
    lineDiv.className = "changing-line";
    const strong = document.createElement('strong');
    strong.textContent = `Línea ${linePosition} (${line.value}):`;
    const textNode = document.createTextNode(' ' + lineText);
    lineDiv.appendChild(strong);
    lineDiv.appendChild(textNode);
    changingLinesContainer.appendChild(lineDiv);
  });
}

// Mostrar resultados
function showResults(hexagram, lines) {
  const hexagramNumber = document.getElementById("hexagramNumber");
  const hexagramName = document.getElementById("hexagramName");
  const hexagramJudgment = document.getElementById("hexagramJudgment");
  const hexagramImage = document.getElementById("hexagramImage");
  const resultContainer = document.getElementById("resultContainer");

  if (
    !hexagramNumber ||
    !hexagramName ||
    !hexagramJudgment ||
    !hexagramImage ||
    !resultContainer
  ) {
    console.error("❌ Elementos de resultados no encontrados");
    return;
  }

  hexagramNumber.textContent = `#${hexagram.id}`;
  hexagramName.textContent = hexagram.nombre;
  hexagramJudgment.textContent = hexagram.juicio;
  hexagramImage.textContent = hexagram.imagen;

  showChangingLines(lines, hexagram);

  resultContainer.classList.remove("hidden");
  resultContainer.classList.add("fade-in");

  // Scroll a resultados
  resultContainer.scrollIntoView({ behavior: "smooth" });
}

// Función para guardar consulta
function guardarConsulta(hexagrama, lines, pregunta) {
  const consulta = {
    id: Date.now(), // Usamos timestamp como ID único
    fecha: new Date().toLocaleDateString("es-ES", {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }),
    hexagramaId: hexagrama.id,
    hexagramaNombre: hexagrama.nombre,
    pregunta: pregunta || "Consulta sin título",
    lines: lines.map((line) => ({
      type: line.type,
      changing: line.changing,
      value: line.value,
    })),
    hexagramaBinario: lines
      .map((line) => (line.type === "yang" ? "1" : "0"))
      .join(""),
    hexagrama: hexagrama,
  };

  consultasGuardadas.push(consulta);
  guardarEnCookies();

  // Guardar en la variable global para compartir
  consultaActual = consulta;

  return consulta;
}

// Mostrar historial de consultas
function mostrarHistorial() {
  const historialContainer = document.getElementById("historialContainer");
  if (!historialContainer) {
    console.error("❌ Elemento historialContainer no encontrado");
    return;
  }

  if (consultasGuardadas.length === 0) {
    historialContainer.innerHTML = `
      <div class="historial-header">
        <h3><i class="fas fa-history"></i> Tu Historial de Consultas</h3>
        <p>No has realizado ninguna consulta todavía.</p>
      </div>
    `;
    historialContainer.classList.add("hidden");
    return;
  }

  historialContainer.classList.remove("hidden");

  historialContainer.innerHTML = `
    <div class="historial-header">
      <h3><i class="fas fa-history"></i> Tu Historial de Consultas</h3>
      <p>Has realizado ${consultasGuardadas.length} consulta${
    consultasGuardadas.length === 1 ? "" : "s"
  }.</p>
    </div>
    <div class="historial-list">
      ${consultasGuardadas
        .slice(-3)
        .map(
          (consulta) => `
        <div class="historial-item" data-id="${consulta.id}">
          <div class="historial-date">${consulta.fecha}</div>
          <div class="historial-question">${consulta.pregunta}</div>
          <div class="historial-hexagram">Hexagrama ${consulta.hexagramaId}: ${consulta.hexagramaNombre}</div>
        </div>
      `
        )
        .join("")}
    </div>
    <div style="padding: 0 25px 15px;">
      <button id="verHistorialCompleto" class="view-all-btn" style="width: 100%;">
        <i class="fas fa-book-open"></i> Ver Todas las Consultas
      </button>
    </div>
  `;

  // Añadir evento a los elementos del historial
  document.querySelectorAll(".historial-item").forEach((item) => {
    item.addEventListener("click", () => {
      const id = item.getAttribute("data-id");
      const consulta = consultasGuardadas.find((c) => c.id == id);
      if (consulta) {
        // Mostrar los resultados de esta consulta
        findHexagramByBinary(consulta.hexagramaBinario).then((hexagram) => {
          showResults(hexagram, consulta.lines);

          // Desplazar a resultados
          document.getElementById("resultContainer").scrollIntoView({
            behavior: "smooth",
          });
        });
      }
    });
  });

  // Evento para ver historial completo
  const verHistorialBtn = document.getElementById("verHistorialCompleto");
  if (verHistorialBtn) {
    verHistorialBtn.addEventListener("click", () => {
      mostrarHistorialCompleto();
    });
  }
}

// Mostrar historial completo en una modal
function mostrarHistorialCompleto() {
  // Crear modal si no existe
  let modal = document.getElementById("historialModal");
  if (!modal) {
    modal = document.createElement("div");
    modal.id = "historialModal";
    modal.className = "modal";
    modal.innerHTML = `
      <div class="modal-content">
        <span class="close-modal">&times;</span>
        <h2>Todas tus Consultas</h2>
        <div class="modal-historial-list">
          <!-- Contenido dinámico -->
        </div>
      </div>
    `;
    document.body.appendChild(modal);

    // Cerrar modal al hacer clic en X
    modal.querySelector(".close-modal").addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar modal al hacer clic fuera
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });

    // Cerrar modal con ESC
    window.addEventListener("keydown", (event) => {
      if (event.key === "Escape" && modal.style.display === "block") {
        modal.style.display = "none";
      }
    });
  }

  // Actualizar contenido
  const listContainer = modal.querySelector(".modal-historial-list");
  clearElement(listContainer);  // Limpiar primero (seguro)
  
  if (consultasGuardadas.length === 0) {
    const emptyMsg = document.createElement("p");
    setElementText(emptyMsg, "No has realizado ninguna consulta todavía.");
    listContainer.appendChild(emptyMsg);
  } else {
    // ========== SECURITY FIX: Sanitizar datos de usuario ==========
    consultasGuardadas.forEach((consulta) => {
      const item = document.createElement("div");
      item.className = "modal-historial-item";
      item.setAttribute("data-id", consulta.id);
      
      // Fecha (es metadata interna, segura)
      const dateDiv = document.createElement("div");
      dateDiv.className = "historial-date";
      dateDiv.textContent = consulta.fecha;
      item.appendChild(dateDiv);
      
      // Pregunta del usuario (SANITIZADA con textContent)
      const questionDiv = document.createElement("div");
      questionDiv.className = "historial-question";
      questionDiv.textContent = consulta.pregunta;  // ← Escapa HTML automáticamente
      item.appendChild(questionDiv);
      
      // Hexagrama (metadata interna, segura)
      const hexagramDiv = document.createElement("div");
      hexagramDiv.className = "historial-hexagram";
      hexagramDiv.textContent = `Hexagrama ${consulta.hexagramaId}: ${consulta.hexagramaNombre}`;
      item.appendChild(hexagramDiv);
      
      listContainer.appendChild(item);
    });
    // ============================================

    // Añadir eventos a los elementos
    document.querySelectorAll(".modal-historial-item").forEach((item) => {
      item.addEventListener("click", () => {
        const id = item.getAttribute("data-id");
        const consulta = consultasGuardadas.find((c) => c.id == id);
        if (consulta) {
          findHexagramByBinary(consulta.hexagramaBinario).then((hexagram) => {
            showResults(hexagram, consulta.lines);

            // Cerrar modal
            document.getElementById("historialModal").style.display = "none";

            // Desplazar a resultados
            document.getElementById("resultContainer").scrollIntoView({
              behavior: "smooth",
            });
          });
        }
      });
    });
  }

  // Mostrar modal
  modal.style.display = "block";
}

// Guardar consultas en cookies
function guardarEnCookies() {
  // Mantener solo las últimas 10 consultas
  const consultasParaGuardar = consultasGuardadas.slice(-10);
  const cookieValue = JSON.stringify(consultasParaGuardar);
  // Caduca en 30 días
  const expiry = new Date();
  expiry.setDate(expiry.getDate() + 30);
  document.cookie = `iching_consultas=${cookieValue}; expires=${expiry.toUTCString()}; path=/`;
}

// Cargar consultas de cookies
function cargarConsultasDeCookies() {
  try {
    const cookieName = "iching_consultas=";
    const cookies = document.cookie.split(";");
    for (let i = 0; i < cookies.length; i++) {
      let cookie = cookies[i].trim();
      if (cookie.indexOf(cookieName) === 0) {
        const consultas = JSON.parse(cookie.substring(cookieName.length));
        // Mantener solo las últimas 10 consultas
        consultasGuardadas = consultas.slice(-10);
        return;
      }
    }
  } catch (e) {
    console.log("No se pudieron cargar consultas de cookies");
  }
}

// Cargar biblioteca de hexagramas destacados
async function loadHighlightedHexagrams() {
  try {
    const data = await loadHexagramData();
    const hexagramLibrary = document.getElementById("hexagramLibrary");
    if (!hexagramLibrary) {
      console.error("❌ Elemento hexagramLibrary no encontrado");
      return;
    }

    hexagramLibrary.innerHTML = ""; // Limpiar antes de cargar

    // Filtrar los hexagramas destacados
    const destacados = data.hexagramas.filter((h) =>
      DESTACADOS_IDS.includes(h.id)
    );

    destacados.forEach((hexagram) => {
      const card = document.createElement("div");
      card.className = "hexagram-card";
      card.dataset.id = hexagram.id;

      // Crear representación visual del hexagrama
      const hexagramVisual = document.createElement("div");
      hexagramVisual.className = "card-hexagram";

      // Convertir binario a líneas (de abajo hacia arriba)
      const lines = hexagram.binario.split("");
      for (let i = 5; i >= 0; i--) {
        const lineDiv = document.createElement("div");
        lineDiv.className =
          lines[i] === "1" ? "card-line" : "card-line card-broken";
        hexagramVisual.appendChild(lineDiv);
      }

      card.innerHTML = `
        ${hexagramVisual.outerHTML}
        <div class="card-number">Hexagrama ${hexagram.id}</div>
        <div class="card-name">${hexagram.nombre}</div>
        <p class="card-judgment">${hexagram.juicio}</p>
        <a href="hexagrama.html?id=${hexagram.id}" class="view-details-btn">Ver detalles</a>
      `;

      hexagramLibrary.appendChild(card);
    });
  } catch (error) {
    console.error("❌ Error al cargar la biblioteca destacada:", error);
    const hexagramLibrary = document.getElementById("hexagramLibrary");
    if (hexagramLibrary) {
      hexagramLibrary.innerHTML =
        '<div class="error-message">Error al cargar los hexagramas destacados. Por favor, recarga la página.</div>';
    }
  }
}

// Configurar el modal del oráculo
function setupOracleModal() {
  waitForElements(
    {
      consultBtn: "#consultBtn",
      oracleModal: "#oracleModal",
      closeModal: "#oracleModal .modal-content.simplified .close-modal",
      cancelModal: "#cancelModal",
      submitQuestion: "#submitQuestion",
      oracleQuestion: "#oracleQuestion",
    },
    function (elements) {
      const {
        consultBtn,
        oracleModal,
        closeModal,
        cancelModal,
        submitQuestion,
        oracleQuestion,
      } = elements;

      console.log("✅ Configurando modal del oráculo");

      // Mostrar modal al hacer clic en el botón de consulta
      consultBtn.addEventListener("click", (e) => {
        e.preventDefault();
        console.log("🖱️ Botón de consulta clickeado");
        oracleModal.style.display = "flex";
        setTimeout(() => {
          oracleModal.classList.add("show");
        }, 10);

        // Enfocar el campo de texto
        setTimeout(() => {
          oracleQuestion.focus();
          modalOpen = true;
          console.log("⌨️ Campo de pregunta enfocado");
        }, 300);
      });

      // Función para cerrar el modal
      function closeModalFunc() {
        if (!modalOpen) return;

        console.log("❌ Cerrando modal de consulta");
        oracleModal.classList.remove("show");
        modalOpen = false;

        setTimeout(() => {
          oracleModal.style.display = "none";
          // Limpiar el campo de texto
          oracleQuestion.value = "";
        }, 300);
      }

      // Cerrar modal al hacer clic en X
      closeModal.addEventListener("click", closeModalFunc);

      // Cerrar modal al hacer clic fuera
      window.addEventListener("click", (event) => {
        if (event.target === oracleModal) {
          closeModalFunc();
        }
      });

      // Cerrar modal con ESC
      window.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && modalOpen) {
          closeModalFunc();
        }
      });

      // Cerrar modal al hacer clic en Cancelar
      cancelModal.addEventListener("click", closeModalFunc);

      // Procesar la consulta al hacer clic en Consultar
      submitQuestion.addEventListener("click", () => {
        const question = oracleQuestion.value.trim();

        if (!question) {
          console.log("⚠️ Pregunta vacía");
          // Hacer que el textarea se estremezca para indicar error
          oracleQuestion.classList.add("error");
          setTimeout(() => {
            oracleQuestion.classList.remove("error");
          }, 1000);
          return;
        }

        console.log("📨 Procesando consulta:", question);
        // Cerrar el modal
        closeModalFunc();

        // Realizar la consulta después de cerrar el modal
        setTimeout(() => {
          performOracleConsultation(question);
        }, 300);
      });
    }
  );
}

// Configurar el modal de valores de monedas
function setupValuesModal() {
  waitForElements(
    {
      viewAllValuesBtn: "#viewAllValuesBtn",
      valuesModal: "#valuesModal",
      closeModal: "#valuesModal .modal-content.values-modal .close-modal",
      closeValuesModal: "#closeValuesModal",
    },
    function (elements) {
      const { viewAllValuesBtn, valuesModal, closeModal, closeValuesModal } =
        elements;

      console.log("✅ Configurando modal de valores de monedas");

      // Mostrar modal al hacer clic en "Ver todos los valores"
      viewAllValuesBtn.addEventListener("click", (e) => {
        e.preventDefault();
        console.log("🖱️ Botón Ver todos los valores clickeado");
        valuesModal.style.display = "flex";
        setTimeout(() => {
          valuesModal.classList.add("show");
        }, 10);
        valuesModalOpen = true;
      });

      // Función para cerrar el modal de valores
      function closeValuesModalFunc() {
        if (!valuesModalOpen) return;

        console.log("❌ Cerrando modal de valores");
        valuesModal.classList.remove("show");
        valuesModalOpen = false;

        setTimeout(() => {
          valuesModal.style.display = "none";
        }, 300);
      }

      // Cerrar modal al hacer clic en X
      closeModal.addEventListener("click", closeValuesModalFunc);

      // Cerrar modal al hacer clic fuera
      window.addEventListener("click", (event) => {
        if (event.target === valuesModal) {
          closeValuesModalFunc();
        }
      });

      // Cerrar modal con ESC
      window.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && valuesModalOpen) {
          closeValuesModalFunc();
        }
      });

      // Cerrar modal al hacer clic en "Entendido"
      closeValuesModal.addEventListener("click", closeValuesModalFunc);
    }
  );
}

// Configurar el modal de compartir
function setupShareModal() {
  const shareModal = document.getElementById("shareModal");
  if (!shareModal) {
    console.error("❌ Modal de compartir no encontrado");
    return;
  }

  // Cerrar modal al hacer clic en X
  const closeModal = shareModal.querySelector(".close-share");
  if (closeModal) {
    closeModal.addEventListener("click", function () {
      shareModal.classList.remove("show");
      setTimeout(() => {
        shareModal.style.display = "none";
      }, 300);
    });
  }

  // Cerrar modal al hacer clic fuera
  shareModal.addEventListener("click", function (e) {
    if (e.target === shareModal) {
      shareModal.classList.remove("show");
      setTimeout(() => {
        shareModal.style.display = "none";
      }, 300);
    }
  });

  // Configurar botones de redes sociales
  configurarBotonesRedesSociales();
}

// Configurar botones de redes sociales
function configurarBotonesRedesSociales() {
  const whatsappBtn = document.querySelector(".whatsapp");
  const twitterBtn = document.querySelector(".twitter");
  const facebookBtn = document.querySelector(".facebook");
  const telegramBtn = document.querySelector(".telegram");
  const downloadBtn = document.getElementById("downloadShareCard");

  if (whatsappBtn) {
    whatsappBtn.addEventListener("click", function () {
      if (!consultaActual) return;

      const mensaje = encodeURIComponent(
        `Mi consulta del I Ching:\n` +
          `Pregunta: ${consultaActual.pregunta}\n` +
          `Hexagrama #${consultaActual.hexagramaId}: ${consultaActual.hexagramaNombre}\n` +
          `Juicio: ${consultaActual.hexagrama.juicio}\n\n` +
          `Más en: https://iching-librodemutaciones.web.app`
      );
      window.open(`https://wa.me/?text=${mensaje}`, "_blank");
    });
  }

  if (twitterBtn) {
    twitterBtn.addEventListener("click", function () {
      if (!consultaActual) return;

      const mensaje = encodeURIComponent(
        `Mi consulta del I Ching:\n` +
          `Pregunta: ${consultaActual.pregunta}\n` +
          `Hexagrama #${consultaActual.hexagramaId}: ${consultaActual.hexagramaNombre}\n` +
          `Juicio: ${consultaActual.hexagrama.juicio}\n\n` +
          `Más en: https://iching-librodemutaciones.web.app #IChing #SabiduriaAncestral`
      );
      window.open(`https://twitter.com/intent/tweet?text=${mensaje}`, "_blank");
    });
  }

  if (facebookBtn) {
    facebookBtn.addEventListener("click", function () {
      const url = encodeURIComponent(
        "https://iching-librodemutaciones.web.app"
      );
      window.open(
        `https://www.facebook.com/sharer/sharer.php?u=${url}`,
        "_blank"
      );
    });
  }

  if (telegramBtn) {
    telegramBtn.addEventListener("click", function () {
      if (!consultaActual) return;

      const mensaje = encodeURIComponent(
        `Mi consulta del I Ching:\n` +
          `Pregunta: ${consultaActual.pregunta}\n` +
          `Hexagrama #${consultaActual.hexagramaId}: ${consultaActual.hexagramaNombre}\n` +
          `Juicio: ${consultaActual.hexagrama.juicio}\n\n` +
          `Más en: https://iching-librodemutaciones.web.app`
      );
      window.open(`https://t.me/share/url?url=${mensaje}`, "_blank");
    });
  }

  if (downloadBtn) {
    downloadBtn.addEventListener("click", function () {
      descargarTarjetaComoImagen();
    });
  }
}

// Descargar la tarjeta como imagen
function descargarTarjetaComoImagen() {
  const shareCard = document.getElementById("shareCard");
  if (!shareCard) {
    console.error("❌ Elemento shareCard no encontrado");
    return;
  }

  const originalClasses = shareCard.className;

  // Añadir clase para formato de imagen
  shareCard.className = `${originalClasses} screenshot`;

  // Usar html2canvas para capturar la imagen
  html2canvas(shareCard, {
    scale: 2,
    backgroundColor: null,
    logging: false,
    useCORS: true,
    allowTaint: true,
  })
    .then((canvas) => {
      // Restaurar clases originales
      shareCard.className = originalClasses;

      // Crear enlace de descarga
      const link = document.createElement("a");
      link.download = `consulta-iching-${Date.now()}.png`;
      link.href = canvas.toDataURL("image/png");
      link.click();
    })
    .catch((error) => {
      console.error("❌ Error al generar imagen:", error);
      shareCard.className = originalClasses;

      // Mostrar mensaje de error
      alert(
        "Hubo un error al generar la imagen. Por favor, intenta nuevamente."
      );
    });
}

// Configurar el botón de compartir
function configurarBotonCompartir() {
  // Primera forma: usando delegación de eventos (más robusta)
  document.body.addEventListener("click", function (e) {
    const compartirBtn = e.target.closest("#compartirResultado");
    if (compartirBtn) {
      e.preventDefault();
      console.log("🖱️ Botón de compartir clickeado");

      // Verificar si hay consulta actual
      if (!consultaActual) {
        console.log("⚠️ No hay consulta actual para compartir");
        mostrarMensajeError(
          "Debes realizar una consulta primero antes de poder compartirla."
        );
        return;
      }

      // Mostrar el modal de compartir
      mostrarModalCompartir();
    }
  });

  // Segunda forma: por si el botón ya existe
  const botonCompartir = document.getElementById("compartirResultado");
  if (botonCompartir) {
    botonCompartir.addEventListener("click", function (e) {
      e.preventDefault();
      console.log("🖱️ Botón de compartir clickeado (método directo)");

      // Verificar si hay consulta actual
      if (!consultaActual) {
        console.log("⚠️ No hay consulta actual para compartir");
        mostrarMensajeError(
          "Debes realizar una consulta primero antes de poder compartirla."
        );
        return;
      }

      // Mostrar el modal de compartir
      mostrarModalCompartir();
    });
  }
}

// Función para mostrar el modal de compartir
function mostrarModalCompartir() {
  const shareModal = document.getElementById("shareModal");
  if (!shareModal) {
    console.error("❌ Modal de compartir no encontrado");
    return;
  }

  // Actualizar la tarjeta con los datos de la consulta
  actualizarTarjetaCompartir();

  // Mostrar el modal
  shareModal.style.display = "flex";
  setTimeout(() => {
    shareModal.classList.add("show");
  }, 10);
}

// Función para actualizar la tarjeta de compartir
function actualizarTarjetaCompartir() {
  if (!consultaActual) {
    console.log("⚠️ No hay consulta actual para actualizar la tarjeta");
    return;
  }

  // Actualizar la tarjeta con los datos de la consulta
  const shareQuestion = document.getElementById("shareQuestion");
  const shareHexagramNumber = document.getElementById("shareHexagramNumber");
  const shareHexagramName = document.getElementById("shareHexagramName");
  const shareJudgment = document.getElementById("shareJudgment");
  const shareImage = document.getElementById("shareImage");

  if (
    shareQuestion &&
    shareHexagramNumber &&
    shareHexagramName &&
    shareJudgment &&
    shareImage
  ) {
    shareQuestion.textContent = consultaActual.pregunta;
    shareHexagramNumber.textContent = consultaActual.hexagramaId;
    shareHexagramName.textContent = consultaActual.hexagramaNombre;
    shareJudgment.textContent = consultaActual.hexagrama.juicio;
    shareImage.textContent = consultaActual.hexagrama.imagen;

    // Formatear la fecha
    const fecha = new Date();
    const opciones = { year: "numeric", month: "long", day: "numeric" };
    document.getElementById("shareDate").textContent = fecha.toLocaleDateString(
      "es-ES",
      opciones
    );

    // Generar visualización del hexagrama
    const hexagramVisual = document.getElementById("shareHexagramVisual");
    if (hexagramVisual) {
      hexagramVisual.innerHTML = "";

      // Convertir binario a líneas (de abajo hacia arriba)
      const lines = consultaActual.hexagramaBinario.split("");
      for (let i = 5; i >= 0; i--) {
        const lineDiv = document.createElement("div");
        lineDiv.className = "hexagram-line";
        if (lines[i] === "0") {
          lineDiv.classList.add("broken");
        }
        hexagramVisual.appendChild(lineDiv);
      }
    }

    // Mostrar líneas mutantes
    const changingLinesContainer = document.getElementById(
      "shareChangingLinesContainer"
    );
    if (changingLinesContainer) {
      changingLinesContainer.innerHTML = "";
      const header = createSafeElement('h5', null, 'Líneas Mutantes');
      changingLinesContainer.appendChild(header);

      const changingLines = consultaActual.lines.filter(
        (line) => line.changing
      );
      if (changingLines.length === 0) {
        const noLines = createSafeElement('p', null, 'No hay líneas mutantes en esta consulta');
        changingLinesContainer.appendChild(noLines);
      } else {
        changingLines.forEach((line, index) => {
          const linePosition = consultaActual.lines.indexOf(line) + 1;
          const lineText =
            consultaActual.hexagrama.lineas &&
            consultaActual.hexagrama.lineas[linePosition - 1]
              ? consultaActual.hexagrama.lineas[linePosition - 1]
              : `Línea ${linePosition} (${line.value}): No hay descripción disponible`;

          const lineDiv = document.createElement("div");
          lineDiv.className = "changing-line-item";
          const strong = document.createElement('strong');
          strong.textContent = `Línea ${linePosition} (${line.value}):`;
          const textNode = document.createTextNode(' ' + lineText);
          lineDiv.appendChild(strong);
          lineDiv.appendChild(textNode);
          changingLinesContainer.appendChild(lineDiv);
        });
      }
    }
  } else {
    console.error("❌ Elementos de la tarjeta de compartir no encontrados");
  }
}

// Función para mostrar mensaje de error
function mostrarMensajeError(mensaje) {
  const errorDiv = document.createElement("div");
  errorDiv.className = "error-message-share";
  errorDiv.textContent = mensaje;
  document.body.appendChild(errorDiv);

  // Eliminar después de 3 segundos
  setTimeout(() => {
    if (document.body.contains(errorDiv)) {
      document.body.removeChild(errorDiv);
    }
  }, 3000);
}

// Verificar si el navegador soporta Web Speech API
function isSpeechRecognitionSupported() {
  return "webkitSpeechRecognition" in window || "SpeechRecognition" in window;
}

// Configurar la funcionalidad de voz
function setupVoiceInput() {
  waitForElement("#voiceInputBtn", function (voiceInputBtn) {
    waitForElement("#voiceStatus", function (voiceStatus) {
      console.log("✅ Configurando funcionalidad de voz");

      // Crear contenedor para mensajes de error
      voiceErrorDiv = document.createElement("div");
      voiceErrorDiv.className = "voice-error hidden";
      const questionForm = document.querySelector(".question-form");
      if (questionForm) {
        questionForm.appendChild(voiceErrorDiv);
      } else {
        console.error("❌ No se encontró el contenedor question-form");
        return;
      }

      // Verificar si el navegador soporta Web Speech API
      if (!isSpeechRecognitionSupported()) {
        voiceInputBtn.style.display = "none";
        showVoiceError(
          "Tu navegador no soporta reconocimiento de voz. Por favor, usa un navegador moderno como Chrome o Edge."
        );
        return;
      }

      // Configurar el reconocimiento de voz
      const SpeechRecognition =
        window.SpeechRecognition || window.webkitSpeechRecognition;
      recognition = new SpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = "es-ES"; // Español

      // Eventos del reconocimiento de voz
      recognition.onstart = () => {
        isListening = true;
        voiceInputBtn.classList.add("listening");
        voiceStatus.classList.remove("hidden");
        console.log("🎤 Iniciando reconocimiento de voz");
      };

      recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        const textarea = document.getElementById("oracleQuestion");

        if (textarea) {
          // Si el textarea está vacío, ponemos el texto
          // Si ya tiene texto, añadimos una nueva línea
          if (textarea.value.trim() === "") {
            textarea.value = transcript;
          } else {
            textarea.value += " " + transcript;
          }

          textarea.focus();
          console.log("📝 Texto reconocido:", transcript);
        }
      };

      recognition.onerror = (event) => {
        console.error("❌ Error de reconocimiento de voz:", event.error);

        if (event.error === "not-allowed") {
          showVoiceError(
            "Permiso de micrófono denegado. Por favor, habilita el micrófono en la configuración del sitio."
          );
        } else if (
          event.error === "aborted" ||
          event.error === "audio-capture"
        ) {
          showVoiceError(
            "No se pudo acceder al micrófono. Verifica que esté conectado y que otros programas no lo estén usando."
          );
        } else {
          showVoiceError(`Error en el reconocimiento: ${event.error}`);
        }

        stopListening();
      };

      recognition.onend = () => {
        stopListening();
        console.log("⏹️ Reconocimiento de voz finalizado");
      };

      // Configurar el botón de voz
      voiceInputBtn.addEventListener("click", toggleVoiceInput);
    });
  });
}

// Alternar escucha de voz
function toggleVoiceInput() {
  if (isListening) {
    console.log("⏹️ Deteniendo escucha de voz");
    stopListening();
  } else {
    console.log("🎤 Iniciando escucha de voz");
    startListening();
  }
}

// Empezar a escuchar
function startListening() {
  try {
    recognition.start();
  } catch (error) {
    console.error("❌ Error al iniciar reconocimiento:", error);
    showVoiceError(
      "Error al iniciar el reconocimiento de voz. Por favor, intenta nuevamente."
    );
    stopListening();
  }
}

// Detener escucha
function stopListening() {
  isListening = false;

  try {
    recognition.stop();
  } catch (e) {
    console.log(
      "⏹️ Error al detener reconocimiento (normal si no estaba activo)"
    );
  }

  const voiceInputBtn = document.getElementById("voiceInputBtn");
  const voiceStatus = document.getElementById("voiceStatus");

  if (voiceInputBtn) {
    voiceInputBtn.classList.remove("listening");
  }

  if (voiceStatus) {
    voiceStatus.classList.add("hidden");
  }
}

// Mostrar mensaje de error de voz
function showVoiceError(message) {
  if (voiceErrorDiv) {
    voiceErrorDiv.textContent = message;
    voiceErrorDiv.classList.remove("hidden");

    // Ocultar después de 5 segundos
    setTimeout(() => {
      voiceErrorDiv.classList.add("hidden");
    }, 5000);
  }
}

// Configurar el botón de instalación PWA
function setupInstallPrompt() {
  console.log("✅ Configurando botón de instalación PWA");

  // Manejar el evento beforeinstallprompt
  window.addEventListener("beforeinstallprompt", (e) => {
    // Prevenir que el mini-infobar aparezca en dispositivos móviles
    e.preventDefault();
    // Guardar el evento para que se pueda activar más tarde
    deferredPrompt = e;

    // Mostrar el botón de instalación después de un retraso
    setTimeout(() => {
      const installButton = document.getElementById("installButton");
      if (installButton) {
        installButton.style.display = "block";
      }
    }, 2000);
  });

  // Manejar el botón de aceptar instalación
  const installAcceptBtn = document.getElementById("installAccept");
  if (installAcceptBtn) {
    installAcceptBtn.addEventListener("click", () => {
      if (deferredPrompt) {
        // Mostrar el prompt de instalación
        deferredPrompt.prompt();

        // Esperar la elección del usuario
        deferredPrompt.userChoice.then((choiceResult) => {
          if (choiceResult.outcome === "accepted") {
            console.log("Usuario aceptó la instalación");
          } else {
            console.log("Usuario rechazó la instalación");
          }
          deferredPrompt = null;

          // Ocultar el botón de instalación
          const installButton = document.getElementById("installButton");
          if (installButton) {
            installButton.style.display = "none";
          }
        });
      }
    });
  }

  // Manejar el botón de cancelar
  const installCancelBtn = document.getElementById("installCancel");
  if (installCancelBtn) {
    installCancelBtn.addEventListener("click", () => {
      const installButton = document.getElementById("installButton");
      if (installButton) {
        installButton.style.display = "none";
      }
      deferredPrompt = null;
    });
  }
}

// Registrar el Service Worker
function registrarServiceWorker() {
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker
        .register("/service-worker.js")
        .then((registration) => {
          console.log(
            "ServiceWorker registrado con éxito:",
            registration.scope
          );

          // Escuchar actualizaciones del service worker
          registration.onupdatefound = () => {
            const installingWorker = registration.installing;
            installingWorker.onstatechange = () => {
              if (installingWorker.state === "installed") {
                if (navigator.serviceWorker.controller) {
                  // Hay una nueva actualización disponible
                  console.log(
                    "Nueva versión disponible. Recarga la página para actualizar."
                  );

                  // Mostrar notificación al usuario
                  if (
                    confirm(
                      "Hay una nueva versión disponible. ¿Quieres actualizar ahora?"
                    )
                  ) {
                    window.location.reload();
                  }
                } else {
                  // Primera instalación
                  console.log("ServiceWorker instalado para offline");
                }
              }
            };
          };
        })
        .catch((error) => {
          console.log("Error al registrar el ServiceWorker:", error);
        });
    });
  }
}

// Verificar si estamos en modo standalone (PWA instalada)
function checkPWAInstallation() {
  if (
    window.matchMedia("(display-mode: standalone)").matches ||
    ("standalone" in navigator && navigator.standalone)
  ) {
    console.log("La aplicación está instalada y en modo standalone");

    // Añadir clase al body para estilos específicos de PWA
    document.body.classList.add("pwa-installed");
  }
}

// Función mejorada para realizar la consulta
function performOracleConsultation(question) {
  try {
    console.log("🔍 Iniciando consulta con pregunta:", question);

    waitForElements(
      {
        consultBtn: "#consultBtn",
        coinsAnimation: "#coinsAnimation",
        hexagramDisplay: "#hexagramDisplay",
      },
      function (elements) {
        const { consultBtn, coinsAnimation, hexagramDisplay } = elements;

        // Mostrar animación de monedas
        consultBtn.disabled = true;
        coinsAnimation.classList.remove("hidden");
        console.log("💰 Mostrando animación de monedas");

        // Animación de monedas
        const coins = coinsAnimation.querySelectorAll(".coin");
        if (coins.length === 0) {
          console.error(
            "❌ No se encontraron elementos de monedas para animar"
          );
          // Continuar sin animación
          setTimeout(() => {
            finalizarConsulta();
          }, 1000);
          return;
        }

        coins.forEach((coin, index) => {
          setTimeout(() => {
            coin.classList.add("flip");
          }, index * 300);
        });

        // Después de 3 segundos, mostrar resultados
        setTimeout(finalizarConsulta, 3000);

        function finalizarConsulta() {
          try {
            console.log("🎉 Finalizando consulta...");

            // Ocultar animación
            coinsAnimation.classList.add("hidden");
            coins.forEach((coin) => coin.classList.remove("flip"));

            // Generar hexagrama
            const lines = castCoins();
            console.log("🎲 Líneas generadas:", lines);

            drawHexagram(lines);

            // Convertir a binario para buscar
            const binaryString = lines
              .map((line) => (line.type === "yang" ? "1" : "0"))
              .join("");
            console.log("🔢 Binario:", binaryString);

            // Buscar hexagrama
            findHexagramByBinary(binaryString)
              .then((hexagram) => {
                console.log("📜 Hexagrama encontrado:", hexagram);

                // Guardar consulta (ahora guarda en consultaActual)
                const consultaGuardada = guardarConsulta(
                  hexagram,
                  lines,
                  question
                );
                console.log("💾 Consulta guardada:", consultaGuardada);

                // Mostrar resultados
                showResults(hexagram, lines);

                // Actualizar historial
                mostrarHistorial();

                console.log("✅ Consulta completada exitosamente");
              })
              .catch((error) => {
                console.error("❌ Error al buscar hexagrama:", error);
                // Mostrar mensaje de error al usuario
                alert(
                  "Hubo un error al procesar tu consulta. Por favor, intenta nuevamente."
                );
                consultBtn.disabled = false;
              });
          } catch (error) {
            console.error("❌ Error al finalizar la consulta:", error);
            // Mostrar mensaje de error al usuario
            alert(
              "Hubo un error al procesar tu consulta. Por favor, intenta nuevamente."
            );
            consultBtn.disabled = false;
          }
        }
      }
    );
  } catch (error) {
    console.error("❌ Error en performOracleConsultation:", error);
    const consultBtn = document.getElementById("consultBtn");
    if (consultBtn) {
      consultBtn.disabled = false;
    }
  }
}

// Inicialización de la aplicación
function initializeApp() {
  console.log("🚀 Iniciando aplicación...");

  try {
    // Añadir estilos de error
    addErrorStyles();

    // Cargar consultas de cookies
    cargarConsultasDeCookies();

    // Cargar los hexagramas destacados (solo 6)
    loadHighlightedHexagrams();

    // Configurar el modal del oráculo
    setupOracleModal();

    // Configurar el modal de valores de monedas
    setupValuesModal();

    // Configurar el botón de compartir
    configurarBotonCompartir();

    // Configurar el modal de compartir
    setupShareModal();

    // Configurar la funcionalidad de voz
    setupVoiceInput();

    // Configurar el botón de instalación PWA
    setupInstallPrompt();

    // Registrar el Service Worker
    registrarServiceWorker();

    // Verificar si estamos en modo PWA
    checkPWAInstallation();

    // Inicializar historial
    mostrarHistorial();

    // Navegación suave
    setupNavigation();

    // Asegurar que el botón de compartir se configure correctamente
    setTimeout(() => {
      configurarBotonCompartir();
      console.log("🔄 Botón de compartir configurado con retraso");
    }, 500);

    isScriptReady = true;
    console.log("✅ Aplicación inicializada correctamente");
  } catch (error) {
    console.error("❌ Error crítico durante la inicialización:", error);
    showErrorOverlay("Error crítico: " + error.message);
  }
}

// Mostrar mensaje de error en overlay
function showErrorOverlay(message) {
  let errorOverlay = document.getElementById("errorOverlay");

  if (!errorOverlay) {
    errorOverlay = document.createElement("div");
    errorOverlay.id = "errorOverlay";
    errorOverlay.style.position = "fixed";
    errorOverlay.style.top = "0";
    errorOverlay.style.left = "0";
    errorOverlay.style.width = "100%";
    errorOverlay.style.backgroundColor = "rgba(220, 53, 69, 0.9)";
    errorOverlay.style.color = "white";
    errorOverlay.style.padding = "10px";
    errorOverlay.style.textAlign = "center";
    errorOverlay.style.zIndex = "9999";
    errorOverlay.style.fontSize = "16px";
    errorOverlay.style.fontFamily = "Arial, sans-serif";
    errorOverlay.style.boxShadow = "0 2px 10px rgba(0,0,0,0.2)";

    document.body.prepend(errorOverlay);
  }

  errorOverlay.innerHTML = `
    <div style="max-width: 800px; margin: 0 auto;">
      <strong>¡Error en la aplicación!</strong> ${message}
      <button id="reloadBtn" style="margin-left: 15px; background: white; color: #dc3545; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">Recargar</button>
    </div>
  `;

  document.getElementById("reloadBtn").addEventListener("click", () => {
    location.reload();
  });
}

// Esperar a que el DOM esté completamente cargado
document.addEventListener("DOMContentLoaded", function () {
  console.log("✅ DOM completamente cargado");

  // Inicializar la aplicación después de un breve retraso
  setTimeout(initializeApp, 200);
});