let rutinaAEliminarId = null;
let cardAEliminar = null;

const traducciones = {
  es: {
    navInit: "Inicializar Rutina",
    navEquipos: "Equipos Disponibles",
    navPiscina: "Piscina",
    createCardTitle: "Crear nuevo equipo",
    competencia: "Competencia",
    modalidad: "Modalidad",
    atletas: "Atletas",
    sinAtletas: "Sin atletas en formación",
    verDetalles: "Ver detalles",
    eliminar: "Eliminar",
    logout: "Salir"  
  },
  en: {
    navInit: "Initialize Routine",
    navEquipos: "Available Teams",
    navPiscina: "Pool",
    createCardTitle: "Create new team",
    competencia: "Competition",
    modalidad: "Category",
    atletas: "Athletes",
    sinAtletas: "No athletes in formation",
    verDetalles: "View details",
    eliminar: "Delete",
    logout: "Logout"  
  },
  fr: {
    navInit: "Démarrer la routine",
    navEquipos: "Équipes disponibles",
    navPiscina: "Piscine",
    createCardTitle: "Créer une nouvelle équipe",
    competencia: "Compétition",
    modalidad: "Catégorie",
    atletas: "Athlètes",
    sinAtletas: "Aucun athlète en formation",
    verDetalles: "Voir détails",
    eliminar: "Supprimer",
    logout: "Se déconnecter"  
  }
};

let langActual = 'es'; 

function translateStatic() {
  const navInit = document.querySelector('[data-i18n="nav.init"]');
  const navEquip = document.querySelector('[data-i18n="nav.equip"]');
  const navPool = document.querySelector('[data-i18n="nav.pool"]');
  const heading = document.querySelector('h2');
  const logoutBtn = document.querySelector('[data-i18n="logout"]'); 

  if (navInit) navInit.textContent = traducciones[langActual].navInit;
  if (navEquip) navEquip.textContent = traducciones[langActual].navEquipos;
  if (navPool) navPool.textContent = traducciones[langActual].navPiscina;
  if (heading) heading.textContent = traducciones[langActual].navEquipos;
  if (logoutBtn) logoutBtn.textContent = traducciones[langActual].logout; 
}

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

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

async function loadRoutines() {
  const response = await fetch('/api/rutinas');
  const routines = await response.json();
  const routinesList = document.getElementById('routinesList');
  routinesList.innerHTML = '';

  const createCard = document.createElement('div');
  createCard.classList.add('card', 'shadow', 'text-center', 'border-0');
  createCard.style.width = '300px';
  createCard.style.minHeight = '250px';
  createCard.style.cursor = 'pointer';
  createCard.style.display = 'flex';
  createCard.style.flexDirection = 'column';
  createCard.style.alignItems = 'center';
  createCard.style.justifyContent = 'center';
  createCard.style.background = 'linear-gradient(135deg, #0d6efd 0%, #4c94ff 100%)';
  createCard.style.color = 'white';
  createCard.style.borderRadius = '12px';
  createCard.style.transition = 'transform 0.2s ease';

  createCard.innerHTML = `
    <div class="d-flex flex-column align-items-center justify-content-center">
      <div class="rounded-circle bg-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px;">
        <i class="bi bi-plus-lg" style="font-size: 2rem; color: #0d6efd;"></i>
      </div>
      <h6 class="mt-3 fw-semibold">${traducciones[langActual].createCardTitle}</h6>
    </div>
  `;

  createCard.addEventListener('mouseover', () => {
    createCard.style.transform = 'scale(1.05)';
  });
  createCard.addEventListener('mouseout', () => {
    createCard.style.transform = 'scale(1)';
  });
  createCard.addEventListener('click', () => {
    window.location.href = 'coach.html';
  });

  routinesList.appendChild(createCard); // siempre primero

  for (const routine of routines) {
    const formaciones = await fetch(`/api/rutinas/${routine._id}/formations`).then(res => res.json());
    const ultimaFormacion = formaciones?.at(-1);
    const atletas = ultimaFormacion?.atletas || [];

    const atletasHTML = atletas.length
      ? atletas.map(a => `<li>${a.atletaId?.name || a.idPersonalizado || 'Atleta'}${a.rol ? ' - ' + a.rol : ''}</li>`).join('')
      : `<li class="text-muted fst-italic">${traducciones[langActual].sinAtletas}</li>`;

    const card = document.createElement('div');
    card.classList.add('card', 'border-primary', 'shadow');
    card.style.width = '300px';
    card.dataset.id = routine._id;

    card.innerHTML = `
      <div class="card-body">
        <h5 class="card-title fw-bold">${routine.nombreCompetencia}</h5>
        <p><strong>${traducciones[langActual].competencia}:</strong> ${routine.tipoCompetencia}</p>
        <p><strong>${traducciones[langActual].modalidad}:</strong> ${routine.modalidad}</p>
        <h6 class="mt-2">${traducciones[langActual].atletas}:</h6>
        <ul class="text-start px-3">${atletasHTML}</ul>
        <div class="text-center d-grid gap-2 mt-3">
          <button class="btn btn-primary" onclick="redirectToPiscina('${routine._id}')">${traducciones[langActual].verDetalles}</button>
          <button class="btn btn-danger btn-eliminar" data-id="${routine._id}">${traducciones[langActual].eliminar}</button>
        </div>
      </div>
    `;
    routinesList.appendChild(card);
  }

  document.querySelectorAll('.btn-eliminar').forEach(btn => {
    btn.addEventListener('click', () => {
      rutinaAEliminarId = btn.dataset.id;
      cardAEliminar = btn.closest('.card');
      const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
      modal.show();
    });
  });
}

document.getElementById('btnConfirmarEliminar').addEventListener('click', async () => {
  if (!rutinaAEliminarId || !cardAEliminar) return;
  try {
    const res = await fetch(`/api/rutinas/${rutinaAEliminarId}`, { method: 'DELETE' });
    if (res.ok) {
      cardAEliminar.classList.add('fade-out');
      setTimeout(() => cardAEliminar.remove(), 400);
    } else {
      alert('Error al eliminar la rutina.');
    }
  } catch (err) {
    console.error(err);
    alert('Error al conectar con el servidor.');
  }
  bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal')).hide();
  document.activeElement.blur();
});

function redirectToPiscina(routineId) {
  window.location.href = `piscina.html?routineId=${routineId}`;
}

async function loadUserInfoYIdioma() {
  const userId = sessionStorage.getItem("userId");

  if (!userId) {
    alert("Sesión expirada, inicia sesión de nuevo.");
    window.location.href = "index.html";
    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();
    loadRoutines();
  } catch (err) {
    console.error("❌ Error al obtener datos del usuario:", err);
  }
}

function logout() {
  sessionStorage.clear();
  window.location.href = 'index.html';
}

document.addEventListener('DOMContentLoaded', () => {
  loadUserInfoYIdioma();
});