// memoria/script.js
(function () {
  const cards = document.querySelectorAll(".card");
  const totalPairs = cards.length / 2;

  let matched = 0;
  let cardOne = null, cardTwo = null;
  let disableDeck = false;
  const startTime = Date.now();

  function flipCard({ target: clickedCard }) {
    if (disableDeck || clickedCard === cardOne || clickedCard.classList.contains("flip")) return;
    clickedCard.classList.add("flip");
    if (!cardOne) { cardOne = clickedCard; return; }
    cardTwo = clickedCard;
    disableDeck = true;

    const k1 = cardOne.getAttribute("data-key");
    const k2 = cardTwo.getAttribute("data-key");
    matchCards(k1, k2);
  }

  function matchCards(k1, k2) {
    if (k1 === k2) {
      matched++;
      cardOne.removeEventListener("click", flipCard);
      cardTwo.removeEventListener("click", flipCard);
      cardOne = cardTwo = null;
      disableDeck = false;

      if (matched === totalPairs) {
        // Juego terminado
        setTimeout(onGameFinished, 600);
      }
      return;
    }
    setTimeout(() => {
      cardOne.classList.add("shake");
      cardTwo.classList.add("shake");
    }, 300);

    setTimeout(() => {
      cardOne.classList.remove("shake", "flip");
      cardTwo.classList.remove("shake", "flip");
      cardOne = cardTwo = null;
      disableDeck = false;
    }, 1000);
  }

  function onGameFinished() {
    const elapsedMs = Date.now() - startTime;
    const C = window.MEMORIA_CONFIG || {};
    const juego_id = C.juego_id || 1;

    // Registrar jugada y obtener premio (usando la ruleta vinculada en la config del juego)
    fetch("registrar_jugada.php", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        juego_id,
        elapsed_ms: elapsedMs,
        aciertos: matched,
        // ruleta_id es opcional aquí; el servidor puede leerlo de la config
      }),
    })
    .then(r => r.json())
    .then(data => {
      const nombrePremio = data && data.premio ? data.premio : "¡Completado!";
      mostrarConfetiConTexto(nombrePremio);
      // Si quieres, podrías reiniciar el mazo o redirigir:
      // setTimeout(() => location.reload(), 2500);
    })
    .catch(err => {
      console.error(err);
      mostrarConfetiConTexto("¡Completado!");
    });
  }

  // Eventos
  cards.forEach(card => card.addEventListener("click", flipCard));

  function toggleFullScreen() {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch(err => console.log(err));
    } else {
      document.exitFullscreen().catch(err => console.log(err));
    }
  }
  document.getElementById("fullscreen-btn").addEventListener("click", toggleFullScreen);

  // Confeti
  function mostrarConfetiConTexto(texto = "") {
    const duration = 4000, end = Date.now() + duration;
    (function frame() {
      confetti({ particleCount: 7, angle: 60, spread: 55, origin: { x: 0 }, scalar: 1.1 });
      confetti({ particleCount: 7, angle: 120, spread: 55, origin: { x: 1 }, scalar: 1.1 });
      if (Date.now() < end) requestAnimationFrame(frame);
    })();
    if (texto) console.log("🎉 Premio:", texto);
  }
})();