const traducciones = {
  es: {
    logout: "Salir",
    role: "Atleta",
    titulo: "Equipos Disponibles",
    subtitulo: "Consulta las competencias en las que estás asignado",
    sinSesion: "No se encontró tu sesión. Inicia sesión nuevamente.",
    sinAsignacion: "No estás asignado a ninguna formación aún.",
    errorCarga: "Error al cargar tus asignaciones.",
    rutinaSinNombre: "Rutina sin nombre",
    formacion: "Formación",
    duracion: "Duración",
    notas: "Notas",
    rol: "Rol",
    id: "ID",
    figura: "Figura",
    verSimulacion: "Ver simulación"
  },
  en: {
    logout: "Logout",
    role: "Athlete",
    titulo: "Available Teams",
    subtitulo: "Check the competitions you are assigned to",
    sinSesion: "Session not found. Please log in again.",
    sinAsignacion: "You are not assigned to any formation yet.",
    errorCarga: "Error loading your assignments.",
    rutinaSinNombre: "Unnamed routine",
    formacion: "Formation",
    duracion: "Duration",
    notas: "Notes",
    rol: "Role",
    id: "ID",
    figura: "Figure",
    verSimulacion: "View simulation"
  },
  fr: {
    logout: "Se déconnecter",
    role: "Athlète",
    titulo: "Équipes disponibles",
    subtitulo: "Consultez les compétitions auxquelles vous êtes affecté",
    sinSesion: "Session introuvable. Veuillez vous reconnecter.",
    sinAsignacion: "Vous n'êtes affecté à aucune formation pour le moment.",
    errorCarga: "Erreur lors du chargement de vos affectations.",
    rutinaSinNombre: "Routine sans nom",
    formacion: "Formation",
    duracion: "Durée",
    notas: "Remarques",
    rol: "Rôle",
    id: "ID",
    figura: "Figure",
    verSimulacion: "Voir la simulation"
  }
};

let langActual = 'es';

function translateStatic() {
  document.querySelector('[data-i18n="logout"]').textContent = traducciones[langActual].logout;
  document.querySelector('h2').textContent = traducciones[langActual].titulo;
  document.querySelector('p.text-muted').textContent = traducciones[langActual].subtitulo;

  const rolEl = document.querySelector('[data-i18n="role"]');
  if (rolEl) rolEl.textContent = traducciones[langActual].role;
}

document.getElementById('langSelector')?.addEventListener('change', async (e) => {
  langActual = e.target.value;
  translateStatic();
  cargarAsignaciones();

  const userId = sessionStorage.getItem("userId");
  if (userId) {
    await fetch(`/api/users/${userId}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ language: langActual })
    });
  }
});

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

function verSimuladorCompleto(rutinaId) {
  window.location.href = `simulador.html?routineId=${rutinaId}`;
}

async function cargarAsignaciones() {
  const atletaId = sessionStorage.getItem("userId");
  const contenedor = document.getElementById("rutinas-list");

  if (!atletaId) {
    contenedor.innerHTML = `<p>${traducciones[langActual].sinSesion}</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>${traducciones[langActual].sinAsignacion}</p>`;
      return;
    }

    // Agrupar por rutinaId
    const grupos = {};
    formaciones.forEach(f => {
      if (!grupos[f.rutinaId]) {
        grupos[f.rutinaId] = {
          nombre: f.rutinaNombre,
          formaciones: []
        };
      }
      grupos[f.rutinaId].formaciones.push(f);
    });

    contenedor.innerHTML = '';

    Object.entries(grupos).forEach(([rutinaId, grupo]) => {
      const card = document.createElement("div");
      card.className = "card text-start my-3 shadow-sm";

      const formacionesHTML = grupo.formaciones.map(f => `
        <div class="mb-2">
          <strong>${traducciones[langActual].formacion}:</strong> ${f.nombreColoquial || "—"}<br>
          <strong>${traducciones[langActual].duracion}:</strong> ${f.duracion || "?"}s<br>
          <strong>${traducciones[langActual].notas}:</strong> ${f.notasTacticas || "—"}<br>
          <strong>${traducciones[langActual].rol}:</strong> ${f.atleta.rol || "—"} |
          <strong>${traducciones[langActual].id}:</strong> ${f.atleta.idPersonalizado || "—"} |
          <strong>${traducciones[langActual].figura}:</strong> ${f.atleta.figura || "—"}
        </div>
      `).join('');

      card.innerHTML = `
        <div class="card-body">
          <h5 class="card-title text-primary fw-bold">${grupo.nombre || traducciones[langActual].rutinaSinNombre}</h5>
          ${formacionesHTML}
          <button class="btn btn-sm btn-outline-success mt-2" onclick="verSimuladorCompleto('${rutinaId}')">
            ${traducciones[langActual].verSimulacion}
          </button>
        </div>
      `;

      contenedor.appendChild(card);
    });

  } catch (err) {
    console.error("❌ Error al obtener formaciones:", err);
    contenedor.innerHTML = `<p>${traducciones[langActual].errorCarga}</p>`;
  }
}

async function loadUserInfoYIdioma() {
  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;
    }

    if (user?.language && traducciones[user.language]) {
      langActual = user.language;
      const selector = document.getElementById('langSelector');
      if (selector) selector.value = langActual;
    }

    translateStatic();
    cargarAsignaciones();
  } catch (err) {
    console.error("❌ Error al obtener usuario:", err);
  }
}

document.addEventListener("DOMContentLoaded", loadUserInfoYIdioma);