document.addEventListener("DOMContentLoaded", async () => {
  const atletaId = sessionStorage.getItem("userId");
  const contenedor = document.getElementById("rutinas-list");

  if (!atletaId) {
    contenedor.innerHTML = "<p>No se encontró tu sesión. Inicia sesión nuevamente.</p>";
    return;
  }

  try {
    const res = await fetch(`/api/rutinas/atleta/${atletaId}/formaciones`);
    if (!res.ok) throw new Error("Error al obtener formaciones del atleta");

    const formaciones = await res.json();
    if (formaciones.length === 0) {
      contenedor.innerHTML = "<p>No estás asignado a ninguna formación aún.</p>";
      return;
    }

    formaciones.forEach(f => {
      const card = document.createElement("div");
      card.className = "card text-start my-3 shadow-sm";

      card.innerHTML = `
        <div class="card-body">
          <h5 class="card-title text-primary fw-bold">${f.rutinaNombre || "Rutina sin nombre"}</h5>
          <h6 class="card-subtitle mb-2 text-muted">Formación: ${f.nombreColoquial || "(sin nombre)"}</h6>
          <p class="card-text small mb-1">
            <strong>Duración:</strong> ${f.duracion || "?"}s<br>
            <strong>Notas:</strong> ${f.notasTacticas || "Sin notas"}<br>
            <strong>Rol:</strong> ${f.atleta.rol || "N/A"} |
            <strong>ID:</strong> ${f.atleta.idPersonalizado || "N/A"} |
            <strong>Figura:</strong> ${f.atleta.figura || "—"}
          </p>
          <button class="btn btn-sm btn-outline-success" onclick="verSimulador('${f.rutinaId}', ${f.index})">
            Ver simulación
          </button>
        </div>
      `;
      contenedor.appendChild(card);
    });
  } catch (err) {
    console.error("❌ Error al obtener formaciones:", err);
    contenedor.innerHTML = "<p>Error al cargar tus asignaciones.</p>";
  }
});

function verSimulador(rutinaId, index) {
  window.location.href = `simulador.html?routineId=${rutinaId}&formationIndex=${index}`;
}

function logout() {
  sessionStorage.clear();
  alert("Sesión cerrada");
  window.location.href = "../index.html";
}

// Mostrar nombre de usuario
window.addEventListener("DOMContentLoaded", async () => {
  const userId = sessionStorage.getItem("userId");

  if (!userId) return;

  try {
    const res = await fetch(`/api/users/${userId}`);
    const user = await res.json();

    if (user?.name) {
      document.getElementById("nombreUsuarioHeader").textContent = user.name;
    }
  } catch (err) {
    console.error("❌ Error al obtener usuario:", err);
  }
});