Source: controllers/c_obtenerPruebas.js

import M_obtenerPruebas from "/Torneo_Olimpico/js/models/m_obtenerPruebas.js";

/**
 * Controlador que obtiene las pruebas desde el modelo y las renderiza en la vista.
 * Agrupa las pruebas masculinas y busca su equivalente femenina por nombre.
 * Crea elementos HTML dinámicamente y añade eventos a botones de edición y borrado.
 * También añade un botón para insertar nuevas pruebas.
 *
 * @async
 * @function renderizarPruebas
 * @returns {Promise<void>}
 */
async function renderizarPruebas() {
	try {
		const modelo = new M_obtenerPruebas();
		const pruebas = await modelo.obtenerPruebas();
		const grid = document.querySelector("section.grid");
		grid.innerHTML = "";

		// Filtrar las pruebas por categoría M y agrupar por nombre
		const pruebasFiltradas = pruebas.filter((p) => p.categoria === "M");

		pruebasFiltradas.forEach((pruebaM) => {
			// Buscar su equivalente femenina
			const pruebaF = pruebas.find(
				(p) => p.nombre === pruebaM.nombre && p.categoria === "F",
			);

			const div = document.createElement("div");
			div.classList.add("prueba");

			div.innerHTML = `
<h3>${pruebaM.nombre}</h3>
  <p><strong>Fecha:</strong> ${formatearFecha(pruebaM.fecha)}</p>
  <p><strong>Hora:</strong> ${pruebaM.hora.slice(0, 5)}</p>
  <p><strong>Descripción:</strong> ${pruebaM.bases}</p>
  <div class="acciones">
    <button class="btn-editar">✏️</button>
    <button class="btn-borrar">🗑️</button>

  /**
  * El botón editar y el botón borrar tienen que pasar como parámetro 
  * el id de la prueba en la categoria masculina y el id en la categoria femenina.
  * Ya que luego a la hora de hacer la consulta necesitaré ambos
  */
  </div>
`;

			div
				.querySelector(".btn-editar")
				.addEventListener("click", () =>
					abrirModal("editar", pruebaM.idPrueba, pruebaM, pruebaF?.idPrueba),
				);

			div
				.querySelector(".btn-borrar")
				.addEventListener("click", () =>
					abrirModal("borrar", pruebaM.idPrueba, pruebaM, pruebaF?.idPrueba),
				);

			grid.appendChild(div);
		});

		// Botón "Añadir prueba"
		const addPruebaDiv = document.createElement("div");
		addPruebaDiv.classList.add("prueba");

		addPruebaDiv.innerHTML = `
      <h3>AÑADIR PRUEBA</h3>
      <div class="acciones">
        <button class="btn-mas" onclick="abrirModal('añadir')">➕</button>
      </div>
    `;

		grid.appendChild(addPruebaDiv);
	} catch (error) {
		console.error("Error al renderizar las pruebas:", error);
	}
}

/**
 * Formatea una fecha en formato 'YYYY-MM-DD' a 'DD/MM/YYYY'.
 *
 * @function formatearFecha
 * @param {string} fecha - La fecha en formato ISO (YYYY-MM-DD).
 * @returns {string} La fecha formateada como 'DD/MM/YYYY'.
 */
function formatearFecha(fecha) {
	try {
		const [year, month, day] = fecha.split("-");
		return `${day}/${month}/${year}`;
	} catch (error) {
		console.error("Error al formatear la fecha:", error);
		return fecha;
	}
}

// Ejecutar al cargar la página
document.addEventListener("DOMContentLoaded", () => {
	try {
		renderizarPruebas();
	} catch (error) {
		console.error("Error al ejecutar renderizarPruebas:", error);
	}
});

export { renderizarPruebas };