recursos-catolicos/frontend/js/header.js

/* ================================
   1. CARGAR HEADER Y LUEGO INICIAR
================================ */

fetch("header.html")
  .then(res => res.text())
  .then(html => {
    document.getElementById("header-container").innerHTML = html;

    // Ahora que el header YA existe en el DOM:
    inicializarVariables();
    difuntos();
    santoDelDia();
    visualizarDatos();
    cargarYActualizarTodo();
    mostrarSesionEnHeader();
  })
  .catch(err => console.error("Error cargando header:", err));



/* ================================
   2. VARIABLES GLOBALES
================================ */

let fechaHoyElem, santoDelDiaElem, indicadorLiturgicoElem, cabeceraHoy, menuPrincipalElem,
    nombreCicloElem, cicloParImparElem, descripcionSantoDelDiaElem,
    errorElem, difuntoHoyElem;



/* ================================
   3. INICIALIZAR VARIABLES
================================ */

function inicializarVariables() {
    cabeceraHoy = document.getElementById('header-hoy');
    fechaHoyElem = document.getElementById('fecha-hoy');
    nombreCicloElem = document.getElementById('nombre_ciclo');
    cicloParImparElem = document.getElementById('ciclo_par_impar');
    santoDelDiaElem = document.getElementById('santo-del-dia');
    descripcionSantoDelDiaElem = document.getElementById('descripcion-santo-del-dia');
    indicadorLiturgicoElem = document.getElementById('indicador-liturgico');
    menuPrincipalElem = document.getElementById('menu-principal');
    difuntoHoyElem = document.getElementById('difunto-hoy');
    console.log('[inicializarVariables] santoDelDiaElem:', santoDelDiaElem);
    console.log('[inicializarVariables] descripcionSantoDelDiaElem:', descripcionSantoDelDiaElem);
    console.log('[inicializarVariables] header-hoy:', cabeceraHoy);
}



/* ================================
   4. CALENDARIO LITÚRGICO
================================ */

async function cargarYActualizarTodo() {
    const hoy = new Date();
    const offset = hoy.getTimezoneOffset() * 60000;
    const fechaISO = new Date(hoy - offset).toISOString().split('T')[0];

    cicloParImparElem.textContent = hoy.getFullYear() % 2 === 0 ? "Año Par" : "Año Impar";
    const ciclo = hoy.getFullYear() % 3;
    nombreCicloElem.textContent = ciclo === 0 ? "Ciclo C -" : ciclo === 1 ? "Ciclo A -" : "Ciclo B -";

    try {
        const respuesta = await fetch(`${API_BASE}/calendario/hoy`);
        if (!respuesta.ok) throw new Error("Sin datos litúrgicos");
        const datosHoy = await respuesta.json();

        // Fondos oscuros litúrgicos (más oscuros que el cuerpo #0D1B2E)
        const mapaFondos = {
            "verde":          "#228B22", // Verde Esperanza (Tiempo Ordinario) - Más vivo
            "morado":         "#2E0854", // Morado Penitencial (Adviento/Cuaresma) - Más real
            "blanco":         "#FFFFFF", // Blanco Pureza (Pascua/Navidad/Santos) - Blanco puro
            "rojo":           "#B22222", // Rojo Sangre/Fuego (Mártires/Pentecostés) - Un rojo con fuerza
            "azul":           "#1E90FF", // Azul Purísima (Inmaculada) - Un azul cielo celestial
            "rosa":           "#F49AC2", // Rosa Gaudete/Laetare (Domingos de alegría)
            "morado/negro":   "#2E0854", // Un morado muy solemne para momentos de luto/difuntos
            "violeta":        "#9932CC"  // Violeta para destacar elementos de oración
        };

        // Colores vivos para el dot indicador
        const mapaColoresVivos = {
            "verde": "#4CAF50", "morado": "#5d2d91", "blanco": "#F0E8D0",
            "rojo": "#F44336", "azul": "#42A5F5", "rosa": "#EC407A",
            "morado/negro": "#5d2d91", "violeta": "#78909C"
        };

        if (datosHoy) {
            const colorBg = mapaFondos[datosHoy.color] || "#060D18";
            cabeceraHoy.style.backgroundColor = colorBg;
            if (menuPrincipalElem) menuPrincipalElem.style.backgroundColor = colorBg;

            // Actualizar solo los spans internos, no destruir el div entero
            const nombreTiempoElem = document.getElementById('tiempo-liturgico');
            const colorDiaElem = document.getElementById('color-liturgico');

            if (nombreTiempoElem) nombreTiempoElem.textContent = datosHoy.tiempo;
            if (colorDiaElem) {
                colorDiaElem.style.backgroundColor = mapaColoresVivos[datosHoy.color] || "#8BAAD4";
            }
        }

    } catch (error) {
        console.error("Error cargando el calendario:", error);
    }
}



/* ================================
   5. DIFUNTOS
================================ */

async function difuntos() {
    const hoy = new Date();
    const mesHoy = hoy.getMonth() + 1;
    const diaHoy = hoy.getDate();

    try {
        const res = await fetch('data/difuntos.json');
        const listaDifuntos = await res.json();

        const elDifunto = listaDifuntos.find(d => {
            if (!d.fallecimiento || d.fallecimiento.includes('XXXX')) return false;
            const f = d.fallecimiento.split('-');
            return parseInt(f[1]) === mesHoy && parseInt(f[2]) === diaHoy;
        });

        if (elDifunto && difuntoHoyElem) {
            const anioFallecimiento = parseInt(elDifunto.fallecimiento.split('-')[0]);
            const anosPasados = hoy.getFullYear() - anioFallecimiento;

            difuntoHoyElem.innerHTML = `<span class="nombre-difunto">DEP 🕊️ ${elDifunto.nombre} — ${anosPasados}º aniversario</span>`;
        }
    } catch (e) {
        console.error("Error en la carga de difuntos:", e);
    }
}



/* ================================
   6. SANTO DEL DÍA
================================ */

async function santoDelDia() {
    try {
        const res = await apiCall('/santo/hoy');
        if (!res || !res.ok) {
            if (santoDelDiaElem) santoDelDiaElem.textContent = "";
            if (descripcionSantoDelDiaElem) descripcionSantoDelDiaElem.textContent = "";
            return;
        }
        const data = await res.json();
        console.log("Actualizando santo:", data.santo, santoDelDiaElem, descripcionSantoDelDiaElem);
        if (santoDelDiaElem) santoDelDiaElem.textContent = data.santo || "";
        if (descripcionSantoDelDiaElem) descripcionSantoDelDiaElem.textContent = data.descripcion || "";
        console.log("Santo del día:", data.santo);
        console.log("try: Actualizando santo:", data.santo, santoDelDiaElem);
    } catch (e) {
        console.error("Error obteniendo el santo del día desde la API:", e);
        console.log("catch: No se pudo actualizar el santo del día, manteniendo el texto actual:", santoDelDiaElem ? santoDelDiaElem.textContent : "Elemento no encontrado");
    }
}


/* ================================
   7. FECHA HUMANA
================================ */

function visualizarDatos() {
    const opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    const hoy = new Date();
    fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha);
}

/* ================================
    8. MENÚ MÓVIL
================================ */
document.addEventListener("click", (e) => {
    const toggle = document.getElementById("menu-toggle");
    const menu = document.getElementById("menu-principal");

    if (!toggle || !menu) return;

    if (e.target === toggle) {
        menu.classList.toggle("activo");
    }
});