let indiceMisterio = 0;
let misteriosHoy = null;

const MISTERIOS_DATA = {
    0: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
    1: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] },
    2: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
    3: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
    4: { nombre: "Luminosos", titulos: ["El Bautismo", "Las Bodas de Caná", "El Anuncio del Reino", "La Transfiguración", "La Institución de la Eucaristía"] },
    5: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
    6: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] }
};


function inicializarRosario() {
    const hoy = new Date();
    misteriosHoy = MISTERIOS_DATA[hoy.getDay()];

  
    const nombreMistElem = document.getElementById('nombre_misterio');
    if (nombreMistElem) nombreMistElem.textContent = `Misterios ${misteriosHoy.nombre}`;
    
    actualizarVistaMisterio();

    // Eventos de los botones con comprobación de existencia (buena práctica)
    const btnSiguiente = document.getElementById('siguiente');
    const btnAnterior = document.getElementById('anterior');

    if (btnSiguiente) {
        btnSiguiente.addEventListener('click', () => {
            indiceMisterio = (indiceMisterio + 1) % 5;
            actualizarVistaMisterio();
        });
    }

    if (btnAnterior) {
        btnAnterior.addEventListener('click', () => {
            indiceMisterio = (indiceMisterio - 1 + 5) % 5;
            actualizarVistaMisterio();
        });
    }
}

function actualizarVistaMisterio() {
    const titulo = document.getElementById('titulo_misterio');
    const imagen = document.getElementById('imagen-misterio');
    const paso = document.getElementById('paso-actual');

    if (titulo) {
        titulo.textContent = `${indiceMisterio + 1}º Misterio: ${misteriosHoy.titulos[indiceMisterio]}`;
    }
    
    if (paso) paso.textContent = indiceMisterio + 1;

    if (imagen) {
        const carpeta = misteriosHoy.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
        // Asegúrate de que las fotos sean jpg y sigan este patrón: gozosos1.jpg, gozosos2.jpg...
        imagen.src = `img/${carpeta}${indiceMisterio + 1}.jpg`;
        
        // Animación suave
        imagen.style.opacity = 0;
        setTimeout(() => { imagen.style.opacity = 1; }, 50);
    }
}

window.addEventListener('load', inicializarRosario);