// Función de escape colocada arriba para evitar el ReferenceError
function escapeHTML(str) {
  return $("<div>").text(str ?? "").html();
}

// Comprobar estado de sesión al cargar la página
$(document).ready(function () {
  comprobarSesion();
});


// Comprobar estado de sesión al cargar la página
function comprobarSesion() {
  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    data: { orden: "comprobarSesion" },
  }).done(function (respuesta) {
    try {
      if (typeof respuesta === "string") {
        respuesta = JSON.parse(respuesta);
      }
      
      const contenedor = $("#contenedorUsuarioCabecera");
      contenedor.empty();

      if (respuesta.activa && respuesta.usuario) {
        // 1. Renderizar Menú de Usuario en la Cabecera
        const htmlUsuario = `
          <div class="dropdown">
            <button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2"
                    type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
              <i class="fa-solid fa-circle-user fa-lg text-warning"></i>
              <span>${escapeHTML(respuesta.usuario.nombreUsuario)}</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
              <li>
                <a class="dropdown-item d-flex align-items-center gap-2" href="perfil.php">
                  <i class="fa-solid fa-user text-primary"></i> Perfil
                </a>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item logout-item d-flex align-items-center gap-2" href="#" id="botonCerrarSesion">
                  <i class="fa-solid fa-right-from-bracket"></i> Cerrar Sesión
                </a>
              </li>
            </ul>
          </div>
        `;
        contenedor.html(htmlUsuario);

        // 2. Muestra el botón JUGAR y ajusta columnas
        $("#colBotonJugar").removeClass("d-none");
        $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");

      } else {
        // 1. Renderizar Botones de Invitado
        const htmlInvitado = `
          <button type="button" class="btn btn-kahoot-login rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalLogin">
            <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar Sesión
          </button>
          <button type="button" class="btn btn-kahoot-register rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalRegistro">
            <i class="fa-solid fa-user-plus me-1"></i> Registrarse
          </button>
        `;
        contenedor.html(htmlInvitado);

        // 2. Ocultar el botón JUGAR y expandir ranking
        $("#colBotonJugar").addClass("d-none");
        $("#colRanking").removeClass("col-lg-7 col-xl-8").addClass("col-lg-8");
      }
    } catch (e) {
      console.error("Error al procesar la respuesta de la sesión:", e);
    }
  });
}

// Registro
$("#botonAceptarRegistro").click(function (event) {
  event.preventDefault();
  let nombreUsuario = $("#regNombre").val().trim();
  let email = $("#regEmail").val().trim();
  let contrasena = $("#regPassword").val();
  let contrasenaConfirmacion = $("#regPasswordConfirm").val();

  $("#regNombre").removeClass("is-invalid");
  $("#regEmail").removeClass("is-invalid");
  $("#regPassword").removeClass("is-invalid");
  $("#regPasswordConfirm").removeClass("is-invalid");
  $("#errorRegistro").text("");

  if (contrasena !== contrasenaConfirmacion) {
    $("#regPassword").addClass("is-invalid");
    $("#regPasswordConfirm").addClass("is-invalid");
    $("#errorRegistro").text("Las contraseñas no coinciden.");
    return;
  }

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    data: {
      nombreUsuario: nombreUsuario,
      email: email,
      contrasena: contrasena,
      orden: "registrarUsuario",
    },
  }).done(function (respuesta) {
    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);

    if (respuesta.error) {
      $("#errorRegistro").text(respuesta.error);
      $("#regNombre").addClass("is-invalid");
      $("#regEmail").addClass("is-invalid");
    } else {
      $("#errorRegistro")
        .removeClass("text-danger")
        .addClass("text-success")
        .text(respuesta.exito);

      $("#formRegistro")[0].reset();

      setTimeout(function () {
        location.reload();
      }, 1000);
    }
  });
});

// Login
$("#botonAceptarLogin").click(function (event) {
  event.preventDefault();

  let email = $("#loginEmail").val().trim();
  let contrasena = $("#loginPassword").val();

  $("#loginEmail").removeClass("is-invalid");
  $("#loginPassword").removeClass("is-invalid");
  $("#errorLogin").text("");

  if (email === "" || contrasena === "") {
    $("#errorLogin").text("Todos los campos son obligatorios.");
    if (email === "") $("#loginEmail").addClass("is-invalid");
    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
    return;
  }

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    data: {
      email: email,
      contrasena: contrasena,
      orden: "comprobarUsuario",
    },
  }).done(function (respuesta) {
    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);

    if (respuesta.error) {
      $("#loginEmail").addClass("is-invalid");
      $("#loginPassword").addClass("is-invalid");
      $("#errorLogin").text(respuesta.error);
    } else {
      location.reload();
    }
  });
});

// Cerrar sesión
$(document).on("click", "#botonCerrarSesion", function (event) {
  event.preventDefault();

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    data: { orden: "cerrarSesion" },
  }).done(function (respuesta) {
    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);

    if (respuesta.error) {
      console.log(respuesta.error);
    } else {
      window.location.href = "index.php";
    }
  });
});

// Registro
$("#botonAceptarRegistro").click(function (event) {
  event.preventDefault();
  let nombreUsuario = $("#regNombre").val().trim();
  let email = $("#regEmail").val().trim();
  let contrasena = $("#regPassword").val();
  let contrasenaConfirmacion = $("#regPasswordConfirm").val();

  $("#regNombre").removeClass("is-invalid");
  $("#regEmail").removeClass("is-invalid");
  $("#regPassword").removeClass("is-invalid");
  $("#regPasswordConfirm").removeClass("is-invalid");
  $("#errorRegistro").text("");

  if (contrasena !== contrasenaConfirmacion) {
    $("#regPassword").addClass("is-invalid");
    $("#regPasswordConfirm").addClass("is-invalid");
    $("#errorRegistro").text("Las contraseñas no coinciden.");
    return;
  }

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    data: {
      nombreUsuario: nombreUsuario,
      email: email,
      contrasena: contrasena,
      orden: "registrarUsuario",
    },
  }).done(function (respuesta) {
    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);

    if (respuesta.error) {
      $("#errorRegistro").text(respuesta.error);
      $("#regNombre").addClass("is-invalid");
      $("#regEmail").addClass("is-invalid");
    } else {
      $("#errorRegistro")
        .removeClass("text-danger")
        .addClass("text-success")
        .text(respuesta.exito);

      $("#formRegistro")[0].reset();

      setTimeout(function () {
        location.reload();
      }, 1000);
    }
  });
});

// Login
$("#botonAceptarLogin").click(function (event) {
  event.preventDefault();

  let email = $("#loginEmail").val().trim();
  let contrasena = $("#loginPassword").val();

  $("#loginEmail").removeClass("is-invalid");
  $("#loginPassword").removeClass("is-invalid");
  $("#errorLogin").text("");

  if (email === "" || contrasena === "") {
    $("#errorLogin").text("Todos los campos son obligatorios.");
    if (email === "") $("#loginEmail").addClass("is-invalid");
    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
    return;
  }

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    data: {
      email: email,
      contrasena: contrasena,
      orden: "comprobarUsuario",
    },
  }).done(function (respuesta) {
    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);

    if (respuesta.error) {
      $("#loginEmail").addClass("is-invalid");
      $("#loginPassword").addClass("is-invalid");
      $("#errorLogin").text(respuesta.error);
    } else {
      location.reload();
    }
  });
});

// Cerrar sesión (Usa delegación de eventos por si el botón se crea dinámicamente)
$(document).on("click", "#botonCerrarSesion", function (event) {
  event.preventDefault();

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    data: { orden: "cerrarSesion" },
  }).done(function (respuesta) {
    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);

    if (respuesta.error) {
      console.log(respuesta.error);
    } else {
      window.location.href = "index.php";
    }
  });
});