/**
 * Función para mostrar la modal de detalles del resumen
 */
async function verDetallesResumen(idResumen) {
  try {
    // Ocultar la modal si está abierta
    const existingModal = document.getElementById("detalleResumenModal");
    if (existingModal) {
      const modal = bootstrap.Modal.getInstance(existingModal);
      if (modal) {
        modal.hide();
      }
      existingModal.remove(); // Eliminar la modal existente
    }

    // Buscar la Modal de Detalles
    const response = await fetch("modales/modalDetalles.php");
    if (!response.ok) {
      throw new Error("Error al cargar la modal de detalles del resumen");
    }

    const modalHTML = await response.text();

    // Crear un elemento div para almacenar el contenido de la modal
    const modalContainer = document.createElement("div");
    modalContainer.innerHTML = modalHTML;

    // Agregar la modal al documento actual
    document.body.appendChild(modalContainer);

    // Mostrar la modal
    const myModal = new bootstrap.Modal(
      modalContainer.querySelector("#detalleResumenModal")
    );
    myModal.show();

    await cargarDetalleResumen(idResumen);
  } catch (error) {
    console.error(error);
  }
}

/**
 * Función para cargar y mostrar los detalles del resumen en la modal
 */
async function cargarDetalleResumen(idResumen) {
  try {
    const response = await axios.get(`acciones/detallesResumen.php?id=${idResumen}`);

  if (response.status === 200) {
  const resumen = response.data;

  // Formatear la fecha de envío a un formato más legible
  const fechaEnvio = new Date(resumen.fecha).toLocaleString();

  // Calcular el total de las calificaciones para cada evaluador
  const calcularTotalEvaluador = (calificaciones) => {
    return calificaciones.reduce((total, calificacion) => total + (parseFloat(calificacion) || 0), 0);
  };

const generarFilaEvaluador = (evaluador, calificaciones, fechaEvaluacion) => {
  const total = calcularTotalEvaluador(calificaciones);
  return `
    <tr>
      <td>${evaluador}</td>
      ${calificaciones.map(cal => `<td>${cal}</td>`).join('')}
      <td><b>${total}</b></td>
      <td>${fechaEvaluacion ? new Date(fechaEvaluacion).toLocaleString() : "No disponible"}</td>
    </tr>
  `;
};

const autores = resumen.autores || []; // Asigna un array vacío si no hay autores

  // Calcular la calificación final promedio, considerando solo evaluadores con fecha válida
  const evaluadoresConFecha = [
    { calificaciones: [resumen.calificacion1_1, resumen.calificacion1_2, resumen.calificacion1_3, resumen.calificacion1_4, resumen.calificacion1_5, resumen.calificacion1_6], fecha: resumen.calificacion1_fecha },
    { calificaciones: [resumen.calificacion2_1, resumen.calificacion2_2, resumen.calificacion2_3, resumen.calificacion2_4, resumen.calificacion2_5, resumen.calificacion2_6], fecha: resumen.calificacion2_fecha },
    { calificaciones: [resumen.calificacion3_1, resumen.calificacion3_2, resumen.calificacion3_3, resumen.calificacion3_4, resumen.calificacion3_5, resumen.calificacion3_6], fecha: resumen.calificacion3_fecha }
  ].filter(evaluador => evaluador.fecha !== null);  // Filtrar evaluadores con fecha válida

  // Calcular la calificación final promedio sumando las calificaciones de los evaluadores con fecha válida
  const calificacionFinal = (
    evaluadoresConFecha
      .map(evaluador => evaluador.calificaciones.reduce((total, calificacion) => total + (parseFloat(calificacion) || 0), 0))  // Sumar las calificaciones de cada evaluador
      .reduce((total, calificacion) => total + calificacion, 0)  // Sumar todas las calificaciones
    / evaluadoresConFecha.length  // Dividir por el número de evaluadores válidos
  ).toFixed(0);

  // Determinar el mensaje y el icono según la calificación final
  let mensajeCalificacion = '';
  let iconoCalificacion = '';
  let colorCalificacion = '';

  if (calificacionFinal >= 76) {
    mensajeCalificacion = '¡Excelente trabajo!';
    iconoCalificacion = '<i class="bi bi-hand-thumbs-up"></i>';
    colorCalificacion = 'text-success';
  } else if (calificacionFinal >= 51) {
    mensajeCalificacion = 'Buen desempeño, pero aún hay áreas por mejorar.';
    iconoCalificacion = '<i class="bi bi-hand-thumbs-up"></i>';
    colorCalificacion = 'text-info';
  } else if (calificacionFinal >= 26) {
    mensajeCalificacion = 'Rendimiento regular, se recomienda revisar los detalles.';
    iconoCalificacion = '<i class="bi bi-hand-thumbs-down"></i>';
    colorCalificacion = 'text-warning';
  } else {
    mensajeCalificacion = 'Desempeño pésimo, se requiere una revisión significativa.';
    iconoCalificacion = '<i class="bi bi-hand-thumbs-down"></i>';
    colorCalificacion = 'text-danger';
  }  

  // Generar la lista de evaluadores pendientes
  const evaluadoresPendientes = [];
  if (!resumen.calificacion1_fecha && resumen.nombre_evaluador1) evaluadoresPendientes.push(resumen.nombre_evaluador1);
  if (!resumen.calificacion2_fecha && resumen.nombre_evaluador2) evaluadoresPendientes.push(resumen.nombre_evaluador2);
  if (!resumen.calificacion3_fecha && resumen.nombre_evaluador3) evaluadoresPendientes.push(resumen.nombre_evaluador3);

  // Generar el mensaje de evaluadores pendientes con estilo de advertencia
  let mensajePendientes = '';

  // Validar si todos los evaluadores ya han evaluado
  const resumenEvaluadoCompletamente = (
    resumen.calificacion1_fecha && resumen.calificacion2_fecha && resumen.calificacion3_fecha
  );

  // Si ya fue evaluado completamente
  if (resumenEvaluadoCompletamente) {
    mensajePendientes = `<p style="color: green;">
      <b><i class="bi bi-check-circle-fill" style="color: green;"></i> Este resumen ya fue evaluado completamente.</b>
    </p>`;
  } else {
    if (evaluadoresPendientes.length > 0) {
      if (evaluadoresPendientes.length === 1) {
        // Si solo hay un evaluador pendiente
        mensajePendientes = `<p style="color: red;">
          <b><i class="bi bi-exclamation-triangle-fill" style="color: orange;"></i> Evaluador pendiente:</b> 
          <span style="color: black;">${evaluadoresPendientes.join(', ')}</span> aún no evalúa este resumen.
        </p>`;
      } else {
        // Si hay más de un evaluador pendiente
        mensajePendientes = `<p style="color: red;">
          <b><i class="bi bi-exclamation-triangle-fill" style="color: orange;"></i> Evaluadores pendientes:</b> 
          <span style="color: black;">${evaluadoresPendientes.join(', ')}</span> aún no evalúan este resumen.
        </p>`;
      }
    } else {
      // Si no hay evaluadores pendientes o si no hay evaluadores asignados
      mensajePendientes = `<p style="color: red;">
        <b><i class="bi bi-exclamation-triangle-fill" style="color: orange;"></i> Este resumen no tiene evaluadores asignados.</b>
      </p>`;
    }
  }


// Determinar el mensaje, ícono y color según la calificación final


if (calificacionFinal >= 76) {
  mensajeCalificacion = '¡Excelente trabajo!';
  iconoCalificacion = '<i class="bi bi-hand-thumbs-up"></i>';
  colorCalificacion = 'text-success';
} else if (calificacionFinal >= 51) {
  mensajeCalificacion = 'Buen desempeño, pero aún hay áreas por mejorar.';
  iconoCalificacion = '<i class="bi bi-hand-thumbs-up"></i>';
  colorCalificacion = 'text-info';
} else if (calificacionFinal >= 26) {
  mensajeCalificacion = 'Rendimiento regular, se recomienda revisar los detalles.';
  iconoCalificacion = '<i class="bi bi-hand-thumbs-down"></i>';
  colorCalificacion = 'text-warning';
} else {
  mensajeCalificacion = 'Desempeño pésimo, se requiere una revisión significativa.';
  iconoCalificacion = '<i class="bi bi-hand-thumbs-down"></i>';
  colorCalificacion = 'text-danger';
}

const tablaEvaluadores = `
  <div style="display: flex; justify-content: center; align-items: center; width: 100%; padding: 10px;">
    <table class="table table-bordered table-striped table-hover table-sm" style="width: 90%; font-size: 0.36em; border-radius: 8px; border: 1px solid #ddd; background-color: #f9f9f9;">
      <thead style="background-color: #f8f9fa; color: #495057; text-align: center; font-weight: bold;">
         <tr>
          <th style="width: 20%;">Evaluador <i class="bi bi-person-fill"></i></th>
          <th><i class="bi bi-award"></i> Objectives</th>
          <th><i class="bi bi-clipboard-check"></i> Methodology</th>
          <th><i class="bi bi-bar-chart-line"></i> Description</th>
          <th><i class="bi bi-lightbulb"></i> Innovation</th>
          <th><i class="bi bi-person-fill-gear"></i> Applicability</th>
          <th><i class="bi bi-search"></i> Relevance</th>
          <th><b>Total <i class="bi bi-check-circle ${colorCalificacion}"></i></b></th>
          <th><b>Fecha <i class="bi bi-calendar"></i></b></th>
        </tr>
      </thead>
      <tbody style="font-size: 0.72em; text-align: center; background-color: #ffffff;">
        ${generarFilaEvaluador(resumen.nombre_evaluador1, [resumen.calificacion1_1, resumen.calificacion1_2, resumen.calificacion1_3, resumen.calificacion1_4, resumen.calificacion1_5, resumen.calificacion1_6], resumen.calificacion1_fecha)}
        ${generarFilaEvaluador(resumen.nombre_evaluador2, [resumen.calificacion2_1, resumen.calificacion2_2, resumen.calificacion2_3, resumen.calificacion2_4, resumen.calificacion2_5, resumen.calificacion2_6], resumen.calificacion2_fecha)}
        ${generarFilaEvaluador(resumen.nombre_evaluador3, [resumen.calificacion3_1, resumen.calificacion3_2, resumen.calificacion3_3, resumen.calificacion3_4, resumen.calificacion3_5, resumen.calificacion3_6], resumen.calificacion3_fecha)}
      </tbody>
      <tfoot>
        <tr style="background-color: #f1f1f1;">
          <td colspan="7" style="text-align: right; font-weight: bold;">Calificación Final</td>
          <td colspan="1" style="text-align: center; font-weight: bold; font-size: 2.26em; color: #007bff;">
            <i class="bi bi-check-circle ${colorCalificacion}"></i> ${calificacionFinal}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
`;




      // Crear el botón de colapso
    const collapseButton = `
  <button id="toggleEvaluacion" class="btn btn-primary" style="margin-bottom: 20px;">
    <i id="collapseIcon" class="bi bi-plus-square-fill"></i> Mostrar/ Ocultar Evaluaciones
  </button>
`;

      // Actualizar el contenido de la modal
      const modalContent = document.querySelector("#detalleResumenContenido");
      modalContent.innerHTML = ''; // Limpiar contenido anterior

      // Agregar el contenido con estilo de revista
      modalContent.innerHTML = `
        <div class="resumen-magazine-container" style="display: flex; flex-direction: column; position: relative; font-family: Arial, sans-serif;">
          <h2 class="resumen-title" style="font-size: 1.2em; font-weight: bold; text-transform: uppercase; margin-top: 40px; color: #000; text-align: center;">
            ${resumen.titulo || "No disponible"}
          </h2>

          <div class="resumen-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <div class="codigo-resumen" style="font-weight: bold; font-size: 1em; padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f1f1f1; color: #007bff; text-align: center;">
              ${resumen.codigo || "No disponible"}
            </div>
          </div>


          <!-- Mensaje con el ícono de calificación -->
          <div class="calificacion-final" style="margin-top: 20px; font-size: 1.1em; font-weight: bold; color: ${colorCalificacion}; text-align: center;">
            ${iconoCalificacion} ${mensajeCalificacion}
          </div>
         
        
         
          <div class="resumen-content">
            <!-- Botón para colapsar/expandir evaluaciones -->
            ${collapseButton}

            <div id="evaluacionesContainer" style="display: none;">
              ${tablaEvaluadores}
            </div>
            
            
<ul class="list-group" style="font-size: 0.8em;">
<li class="list-group-item">
  <b><i class="bi bi-shield-fill"></i> Estado del Resumen:</b> 
  ${resumen.estado == 1 ? "Pendiente por Asignar" : 
   resumen.estado == 2 ? "Pendiente por Evaluar" :
   resumen.estado == 3 ? "En proceso de Evaluación" :
   resumen.estado == 4 ? "Evaluado" :
   resumen.estado == 5 ? "No Aprobado" : "No disponible"}
  <i class="bi bi-circle-fill ${resumen.estado == 1 ? 'text-warning' :
     resumen.estado == 2 ? 'text-info' :
     resumen.estado == 3 ? 'text-primary' :
     resumen.estado == 4 ? 'text-success' :
     resumen.estado == 5 ? 'text-danger' : 'text-muted'}"></i>
          <!-- Mensaje de evaluadores pendientes -->
          ${mensajePendientes}
</li>


            <!-- Información adicional -->
           
            
              <li class="list-group-item" style="text-align: left;">
                <b><i class="bi bi-bookmark"></i> Área Temática:</b> ${resumen.area_tematica || "No disponible"}
              </li>
                  <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-person-video2"></i> Tipo competición:</b> ${resumen.tipo_competicion|| "No disponible"}
              </li>
                  <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-chat-dots-fill"></i> Tipo Presentacion:</b> ${resumen.tipo_presentacion || "No disponible"}
              </li>
              
              
              <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-book"></i> Introducción:</b> ${resumen.introduccion || "No disponible"}
              </li>
              <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-box"></i> Materiales:</b> ${resumen.materiales || "No disponible"}
              </li>
              <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-bar-chart-line"></i> Resultados:</b> ${resumen.resultados || "No disponible"}
              </li>
              <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-check-circle"></i> Conclusiones:</b> ${resumen.conclusiones || "No disponible"}
              </li>
                 <li class="list-group-item"><b><i class="bi bi-person-lines-fill"></i> Autores:</b> ${autores ? autores.join(", ") : "No disponible"}</li>
              <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-building"></i> Institución:</b> ${resumen.inst_autor1 || "No disponible"}
              </li>
              <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-flag"></i> País:</b> ${resumen.pais || "No disponible"}
              </li>
              <li class="list-group-item" style="text-align: justify;">
                <b><i class="bi bi-geo-alt"></i> Ciudad:</b> ${resumen.ciudad || "No disponible"}
              </li>
              <li class="list-group-item">
                <b><i class="bi bi-shield-fill"></i> Activo:</b> ${resumen.activo == 1 ? "Sí" : "No"} 
                <i class="bi bi-circle-fill ${resumen.activo == 1 ? 'text-success' : 'text-danger'}"></i>
              </li>
              
            </ul>
            <p><b>Fecha de Envío:</b> ${fechaEnvio}</p>
            <br>
          </div>
        </div>
      `;

 // Agregar el evento de clic al botón de colapso
const toggleButton = document.getElementById("toggleEvaluacion");
const collapseIcon = document.getElementById("collapseIcon");
const evaluacionesContainer = document.getElementById("evaluacionesContainer");

toggleButton.addEventListener("click", function() {
  // Alternar la visibilidad de las evaluaciones
  if (evaluacionesContainer.style.display === "none") {
    evaluacionesContainer.style.display = "block";
    // Cambiar el ícono a "minus" (−)
    collapseIcon.classList.remove("bi-plus-square-fill");
    collapseIcon.classList.add("bi-dash-square-fill");
  } else {
    evaluacionesContainer.style.display = "none";
    // Cambiar el ícono a "plus" (+)
    collapseIcon.classList.remove("bi-dash-square-fill");
    collapseIcon.classList.add("bi-plus-square-fill");
  }
});
    }
  } catch (error) {
    console.error('Error al cargar el detalle del resumen:', error);
    const modalContent = document.querySelector("#detalleResumenContenido");
    modalContent.innerHTML = `<p>Error al cargar el detalle del resumen.</p>`;
  }
}
