let idUsuarioSesion = null;

$(document).ready(function () {
  // Cargar la cabecera HTML e iniciar comprobación de sesión SOLO al terminar de cargar
  $("#cabecera-container").load("cabecera.html", function (response, status, xhr) {
    if (status === "error") {
      console.error("Error al cargar cabecera.html:", xhr.status, xhr.statusText);
    } else {
      comprobarSesion();
    }
  });
});

// Función auxiliar para escapar texto HTML
function escapeHTML(str) {
  return $("<div>").text(str ?? "").html();
}

// Comprobar estado de sesión al cargar la página
function comprobarSesion() {
  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    dataType: "json",
    data: { orden: "comprobarSesion" },
  })
  .done(function (respuesta) {
    const contenedor = $("#contenedorUsuarioCabecera");
    if (!contenedor.length) return; // Si aún no existe el contenedor en HTML, cancelamos

    contenedor.empty();

    if (respuesta && respuesta.activa && respuesta.usuario) {
      // Guardar idUsuario globalmente
      idUsuarioSesion = respuesta.usuario.idUsuario;
      const avatarUrl = respuesta.usuario.avatar || "img/avatars/defaultProfile.jpeg";

      // Usuario autenticado: Menú desplegable
      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">
            <img src="${escapeHTML(avatarUrl)}" alt="Avatar" class="rounded-circle" style="width: 32px; height: 32px; object-fit: cover;">
            <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);

      // Si estamos en la página de perfil, rellenamos nombre y foto
      if ($("#nombre").length) {
        $("#nombre").text(respuesta.usuario.nombreUsuario);
        // ?t= evita que el navegador enseñe la foto antigua en caché
        $("#fotoPerfil").attr("src", avatarUrl + "?t=" + new Date().getTime());
      }

      // Si estamos en la página principal, mostramos el botón JUGAR
      if ($("#colBotonJugar").length) {
        $("#colBotonJugar").removeClass("d-none");
        $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");
      }
    } else {
      // Si estamos en el perfil y no hay sesión, volvemos al inicio
      if ($("#nombre").length) {
        window.location.href = "index.php";
        return;
      }

      // No hay sesión: Botones de Login y Registro
      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);

      if ($("#colBotonJugar").length) {
        $("#colBotonJugar").addClass("d-none");
        $("#colRanking").removeClass("col-lg-7 col-xl-8").addClass("col-lg-8");
      }
    }
  })
  .fail(function (xhr, status, error) {
    console.error("Error en comprobarSesion AJAX:", error, xhr.responseText);
  });
}

// Registro de usuario
$(document).on("click", "#botonAceptarRegistro", function (event) {
  event.preventDefault();

  let nombreUsuario = $("#regNombre").val().trim();
  let email = $("#regEmail").val().trim();
  let contrasena = $("#regPassword").val();
  let contrasenaConfirmacion = $("#regPasswordConfirm").val();

  // Resetear estados visuales
  $("#regNombre, #regEmail, #regPassword, #regPasswordConfirm").removeClass("is-invalid");
  $("#errorRegistro").removeClass("text-danger text-success").text("").show();

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

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    dataType: "json",
    data: {
      nombreUsuario: nombreUsuario,
      email: email,
      contrasena: contrasena,
      orden: "registrarUsuario",
    },
  })
  .done(function (respuesta) {
    if (respuesta.error) {
      $("#errorRegistro").addClass("text-danger").text(respuesta.error);
      $("#regNombre, #regEmail").addClass("is-invalid");
    } else {
      // Mostrar mensaje de confirmación
      $("#errorRegistro")
        .removeClass("text-danger")
        .addClass("text-success fw-bold")
        .text(respuesta.exito || "¡Registro completado con éxito!");

      if ($("#formRegistro").length) {
        $("#formRegistro")[0].reset();
      }

      // Recargar para iniciar sesión tras 1.5 segundos
      setTimeout(function () {
        location.reload();
      }, 1500);
    }
  })
  .fail(function (xhr, status, error) {
    console.error("Error en el registro:", error, xhr.responseText);
    $("#errorRegistro").addClass("text-danger").text("Error de conexión con el servidor.");
  });
});

// Login de usuario
$(document).on("click", "#botonAceptarLogin", function (event) {
  event.preventDefault();

  let email = $("#loginEmail").val().trim();
  let contrasena = $("#loginPassword").val();
  let recuerdame = $("#recordar").is(":checked");

  $("#loginEmail, #loginPassword").removeClass("is-invalid");
  $("#errorLogin").removeClass("text-success").addClass("text-danger").text("").show();

  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",
    dataType: "json",
    data: {
      email: email,
      contrasena: contrasena,
      recuerdame: recuerdame,
      orden: "comprobarUsuario",
    },
  })
  .done(function (respuesta) {
    if (respuesta.error) {
      $("#loginEmail, #loginPassword").addClass("is-invalid");
      $("#errorLogin").text(respuesta.error);
    } else {
      // Login correcto: Recargar la vista
      location.reload();
    }
  })
  .fail(function (xhr, status, error) {
    console.error("Error en el login:", error, xhr.responseText);
    $("#errorLogin").text("Error de conexión o respuesta no válida del servidor.");
  });
});

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

  $.ajax({
    method: "POST",
    url: "controladores/controladorUsuario.php",
    dataType: "json",
    data: { orden: "cerrarSesion" },
  })
  .done(function (respuesta) {
    window.location.href = "index.php"; 
  })
  .fail(function () {
    window.location.href = "index.php";
  });
});