
const CLAVE = "cartasUniversoV22";
const estadoBase = {coleccion:{}, aciertos:0, racha:0, aciertosMate:0, aciertosPalabras:0, felicitacionVista:false};

let progreso = cargarProgreso();
let personajes = [];
let palabras = [];
let mundoActual = "matematicas";
let preguntaActual = null;
let bloqueado = false;
let legendariaGarantizadaPendiente = false;

const pantallas = {
  inicio: document.getElementById("inicio"),
  mundos: document.getElementById("mundos"),
  juego: document.getElementById("juego"),
  coleccion: document.getElementById("coleccion"),
  felicitaciones: document.getElementById("felicitaciones")
};

function cargarProgreso(){
  try{
    return {...estadoBase, ...JSON.parse(localStorage.getItem(CLAVE) || "{}")};
  }catch{
    return {...estadoBase};
  }
}

function guardar(){
  localStorage.setItem(CLAVE, JSON.stringify(progreso));
  actualizarMarcadores();
}

async function cargarDatos(){
  try{
    const [respPersonajes, respPalabras] = await Promise.all([
      fetch("data/personajes.xml"),
      fetch("data/palabras.xml")
    ]);

    const [txtPersonajes, txtPalabras] = await Promise.all([
      respPersonajes.text(),
      respPalabras.text()
    ]);

    const xmlPersonajes = new DOMParser().parseFromString(txtPersonajes, "application/xml");
    personajes = [...xmlPersonajes.querySelectorAll("personaje")].map(n => ({
      id:n.getAttribute("id"),
      nombre:n.getAttribute("nombre"),
      rareza:n.getAttribute("rareza"),
      universo:n.getAttribute("universo") || "especial",
      numero:n.getAttribute("numero"),
      imagen:n.getAttribute("imagen"),
      ataque:Number(n.getAttribute("ataque") || 0),
      velocidad:Number(n.getAttribute("velocidad") || 0),
      defensa:Number(n.getAttribute("defensa") || 0),
      suerte:Number(n.getAttribute("suerte") || 0)
    }));

    const xmlPalabras = new DOMParser().parseFromString(txtPalabras, "application/xml");
    palabras = [...xmlPalabras.querySelectorAll("palabra")].map(n => ({
      palabra:n.textContent.trim(),
      tipo:n.getAttribute("tipo")
    }));

    actualizarMarcadores();
  }catch(error){
    console.error(error);
    alert("No fue posible cargar los archivos XML. Sube la carpeta completa al servidor y abre index.html desde tu dominio.");
  }
}

function mostrar(nombre){
  Object.values(pantallas).forEach(p => p.classList.remove("activa"));
  pantallas[nombre].classList.add("activa");
  if(nombre === "coleccion") renderColeccion();
  if(nombre === "felicitaciones") renderFelicitaciones();
}

function iniciarMundo(mundo){
  mundoActual = mundo;
  mostrar("juego");
  document.getElementById("tarjetaPregunta").classList.toggle("palabras", mundo === "palabras");
  document.getElementById("pregunta").classList.toggle("palabra", mundo === "palabras");
  document.getElementById("etiquetaMision").textContent =
    mundo === "matematicas" ? "RESUELVE LA MULTIPLICACIÓN" : "CLASIFICA LA PALABRA";
  nuevaPregunta();
}

function nuevaPregunta(){
  bloqueado = false;
  document.getElementById("mensaje").textContent = "";
  document.getElementById("opciones").innerHTML = "";

  if(mundoActual === "matematicas") crearPreguntaMate();
  else crearPreguntaPalabras();
}

function crearPreguntaMate(){
  const a = aleatorio(1,10);
  const b = aleatorio(1,10);
  const correcta = a*b;
  preguntaActual = {correcta:String(correcta)};
  document.getElementById("pregunta").textContent = `${a} × ${b}`;

  const opciones = new Set([correcta]);
  while(opciones.size < 3){
    let falsa = Math.random() < .7 ? correcta + aleatorio(-10,10) : aleatorio(1,100);
    if(falsa > 0 && falsa !== correcta) opciones.add(falsa);
  }

  mezclar([...opciones]).forEach(v => crearBoton(String(v), String(v), false));
}

function crearPreguntaPalabras(){
  const item = palabras[aleatorio(0, palabras.length-1)];
  preguntaActual = {correcta:item.tipo};
  document.getElementById("pregunta").textContent = item.palabra;

  [
    ["aguda","Aguda"],
    ["grave","Grave"],
    ["esdrujula","Esdrújula"]
  ].forEach(([valor,texto]) => crearBoton(valor,texto,true));
}

function crearBoton(valor, texto, esPalabra){
  const boton = document.createElement("button");
  boton.className = "opcion" + (esPalabra ? " palabra" : "");
  boton.dataset.valor = valor;
  boton.textContent = texto;
  boton.addEventListener("click", () => responder(valor, boton));
  document.getElementById("opciones").appendChild(boton);
}

function responder(valor, boton){
  if(bloqueado) return;
  bloqueado = true;

  const botones = [...document.querySelectorAll(".opcion")];

  if(valor === preguntaActual.correcta){
    boton.classList.add("correcta");
    progreso.aciertos++;
    progreso.racha++;
    if(mundoActual === "matematicas") progreso.aciertosMate++;
    else progreso.aciertosPalabras++;
    legendariaGarantizadaPendiente = progreso.racha > 0 && progreso.racha % 100 === 0;
    guardar();
    setTimeout(entregarCarta, 450);
  }else{
    boton.classList.add("incorrecta");
    botones.find(b => b.dataset.valor === preguntaActual.correcta)?.classList.add("correcta");
    progreso.racha = 0;
    legendariaGarantizadaPendiente = false;
    const perdida = quitarCartaAleatoria();
    guardar();

    const correctaTexto = preguntaActual.correcta === "esdrujula"
      ? "Esdrújula"
      : preguntaActual.correcta.charAt(0).toUpperCase() + preguntaActual.correcta.slice(1);

    document.getElementById("mensaje").textContent = perdida
      ? `La respuesta era ${correctaTexto}. Perdiste una carta de ${perdida.nombre}.`
      : `La respuesta era ${correctaTexto}. Aún no tenías cartas para perder.`;

    setTimeout(nuevaPregunta, 1800);
  }
}

function entregarCarta(){
  const garantizada = legendariaGarantizadaPendiente;
  const personaje = sortearPersonaje(garantizada);
  legendariaGarantizadaPendiente = false;

  progreso.coleccion[personaje.id] = (progreso.coleccion[personaje.id] || 0) + 1;
  guardar();

  const modal = document.getElementById("modalCarta");
  const sobre = document.getElementById("sobre");
  const contenedor = document.getElementById("cartaGanada");
  const continuar = document.getElementById("btnContinuar");
  const texto = document.getElementById("textoRecompensa");

  texto.textContent = garantizada
    ? "⭐ ¡RACHA DE 100! LEGENDARIA GARANTIZADA ⭐"
    : "¡RESPUESTA CORRECTA!";
  texto.classList.toggle("recompensa-legendaria", garantizada);

  contenedor.innerHTML = crearCartaHTML(personaje, progreso.coleccion[personaje.id], false, true);
  contenedor.classList.remove("visible");
  sobre.classList.remove("abriendo");
  sobre.style.display = "grid";
  continuar.classList.add("oculto");
  modal.classList.add("abierto");

  sobre.onclick = () => {
    sobre.classList.add("abriendo");
    setTimeout(() => {
      sobre.style.display = "none";
      contenedor.classList.add("visible");
      continuar.classList.remove("oculto");
    }, 620);
  };
}

function sortearPersonaje(forzarLegendaria=false){
  const legendarias = personajes.filter(p => p.rareza === "legendario");

  if(forzarLegendaria){
    const noObtenidas = legendarias.filter(p => !(progreso.coleccion[p.id] > 0));
    const grupo = noObtenidas.length ? noObtenidas : legendarias;
    return grupo[aleatorio(0, grupo.length-1)];
  }

  // Probabilidades normales: 52% común, 29% raro, 15% épico y 4% legendario.
  const tirada = Math.random() * 100;
  const rareza = tirada < 52 ? "comun"
    : tirada < 81 ? "raro"
    : tirada < 96 ? "epico"
    : "legendario";

  const grupo = personajes.filter(p => p.rareza === rareza);
  return grupo[aleatorio(0, grupo.length-1)];
}

function quitarCartaAleatoria(){
  const disponibles = personajes.filter(p => (progreso.coleccion[p.id] || 0) > 0);
  if(!disponibles.length) return null;

  const elegido = disponibles[aleatorio(0, disponibles.length-1)];
  progreso.coleccion[elegido.id]--;
  if(progreso.coleccion[elegido.id] <= 0) delete progreso.coleccion[elegido.id];
  return elegido;
}

function totalCartas(){
  return Object.values(progreso.coleccion).reduce((s,n) => s+n, 0);
}

function coleccionCompleta(){
  return personajes.length > 0 && personajes.every(p => (progreso.coleccion[p.id] || 0) > 0);
}

function crearCartaHTML(personaje, cantidad, bloqueada, mostrarStats=false){
  const stats = mostrarStats ? `
    <div class="stats">
      <div class="statline">Ataque <b>${personaje.ataque}</b></div>
      <div class="statline">Velocidad <b>${personaje.velocidad}</b></div>
      <div class="statline">Defensa <b>${personaje.defensa}</b></div>
      <div class="statline">Suerte <b>${personaje.suerte}</b></div>
    </div>` : "";

  return `
    <article class="carta ${personaje.rareza} ${bloqueada ? "bloqueada" : ""}" data-id="${personaje.id}">
      <img src="${personaje.imagen}" alt="${bloqueada ? "Personaje bloqueado" : personaje.nombre}">
      ${bloqueada ? "" : `<span class="numero-carta">#${personaje.numero}/${String(personajes.length).padStart(3,"0")}</span>`}
      ${bloqueada ? "" : `<span class="cantidad">×${cantidad}</span>`}
      <div class="carta-info">
        <h3>${bloqueada ? "???" : personaje.nombre}</h3>
        <span class="rareza">${personaje.rareza}</span>
        ${bloqueada ? "" : `<span class="universo-carta">${nombreUniverso(personaje.universo)}</span>`}
        ${bloqueada ? "" : stats}
      </div>
    </article>
  `;
}

function nombreUniverso(universo){
  if(universo === "forsaken") return "Forsaken";
  if(universo === "animal_hospital") return "Animal Hospital";
  return "Especial";
}

let filtroActual = "todos";

function renderColeccion(){
  let visibles = personajes;
  if(filtroActual === "legendario"){
    visibles = personajes.filter(p => p.rareza === "legendario");
  }else if(filtroActual !== "todos"){
    visibles = personajes.filter(p => p.universo === filtroActual);
  }

  document.getElementById("grillaColeccion").innerHTML = visibles.map(p => {
    const cantidad = progreso.coleccion[p.id] || 0;
    return crearCartaHTML(p, cantidad, cantidad === 0);
  }).join("");

  const unicos = personajes.filter(p => (progreso.coleccion[p.id] || 0) > 0).length;
  document.getElementById("resumenColeccion").textContent =
    `${unicos} de ${personajes.length} personajes desbloqueados · ${totalCartas()} cartas en total`;

  document.getElementById("aciertosMate").textContent = progreso.aciertosMate;
  document.getElementById("aciertosPalabras").textContent = progreso.aciertosPalabras;

  document.querySelectorAll("#grillaColeccion .carta:not(.bloqueada)").forEach(carta => {
    carta.addEventListener("click", () => abrirDetalle(carta.dataset.id));
  });
}

function abrirDetalle(id){
  const p = personajes.find(x => x.id === id);
  if(!p) return;
  document.getElementById("detalleCarta").innerHTML =
    crearCartaHTML(p, progreso.coleccion[p.id] || 0, false, true);
  document.getElementById("modalDetalle").classList.add("abierto");
}

function renderFelicitaciones(){
  document.getElementById("miniColeccion").innerHTML =
    personajes.map(p => `<img src="${p.imagen}" alt="${p.nombre}">`).join("");
}

function revisarFelicitacion(){
  if(coleccionCompleta() && !progreso.felicitacionVista){
    progreso.felicitacionVista = true;
    guardar();
    mostrar("felicitaciones");
    return true;
  }
  return false;
}

function actualizarMarcadores(){
  document.getElementById("aciertos").textContent = progreso.aciertos;
  document.getElementById("racha").textContent = progreso.racha;
  document.getElementById("cartas").textContent = totalCartas();
  document.getElementById("contadorCartas").textContent = totalCartas();

  const avance = progreso.racha % 100;
  const mostrado = progreso.racha > 0 && avance === 0 ? 100 : avance;
  const texto = document.getElementById("rachaLegendariaTexto");
  const barra = document.getElementById("barraRacha");
  if(texto) texto.textContent = `${mostrado}/100`;
  if(barra) barra.style.width = `${mostrado}%`;
}

function aleatorio(min,max){
  return Math.floor(Math.random()*(max-min+1))+min;
}

function mezclar(array){
  for(let i=array.length-1;i>0;i--){
    const j = Math.floor(Math.random()*(i+1));
    [array[i],array[j]]=[array[j],array[i]];
  }
  return array;
}

document.getElementById("btnMundos").addEventListener("click", () => mostrar("mundos"));
document.getElementById("btnVolverInicio").addEventListener("click", () => mostrar("inicio"));
document.querySelectorAll("[data-mundo]").forEach(b => b.addEventListener("click", () => iniciarMundo(b.dataset.mundo)));
document.getElementById("btnCambiarMundo").addEventListener("click", () => mostrar("mundos"));
document.getElementById("btnColeccion").addEventListener("click", () => mostrar("coleccion"));
document.getElementById("btnCerrarColeccion").addEventListener("click", () => mostrar("mundos"));

document.getElementById("btnContinuar").addEventListener("click", () => {
  document.getElementById("modalCarta").classList.remove("abierto");
  document.getElementById("cartaGanada").classList.remove("visible");
  document.getElementById("btnContinuar").classList.add("oculto");
  if(!revisarFelicitacion()) nuevaPregunta();
});

document.getElementById("btnSeguirJugando").addEventListener("click", () => {
  mostrar("juego");
  nuevaPregunta();
});

document.getElementById("btnIrMundos").addEventListener("click", () => mostrar("mundos"));

document.getElementById("btnReiniciar").addEventListener("click", () => {
  if(confirm("¿Seguro que quieres borrar toda la colección y los avances?")){
    localStorage.removeItem(CLAVE);
    progreso = {...estadoBase, coleccion:{}};
    guardar();
    renderColeccion();
  }
});

cargarDatos();

document.querySelectorAll(".filtro").forEach(boton => {
  boton.addEventListener("click", () => {
    document.querySelectorAll(".filtro").forEach(b => b.classList.remove("activo"));
    boton.classList.add("activo");
    filtroActual = boton.dataset.filtro;
    renderColeccion();
  });
});

document.getElementById("btnCerrarDetalle").addEventListener("click", () => {
  document.getElementById("modalDetalle").classList.remove("abierto");
});
