// SIDEBAR DROPDOWN
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
const sidebar = document.getElementById('sidebar');


allDropdown.forEach(item=> {
	const a = item.parentElement.querySelector('a:first-child');
	a.addEventListener('click', function (e) {
		e.preventDefault();

		if(!this.classList.contains('active')) {
			allDropdown.forEach(i=> {
				const aLink = i.parentElement.querySelector('a:first-child');

				aLink.classList.remove('active');
				i.classList.remove('show');
			})
		}

		this.classList.toggle('active');
		item.classList.toggle('show');
	})
})





// SIDEBAR COLLAPSE
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
const allSideDivider = document.querySelectorAll('#sidebar .divider');

if(sidebar.classList.contains('hide')) {
	allSideDivider.forEach(item=> {
		item.textContent = '-'
	})
	allDropdown.forEach(item=> {
		const a = item.parentElement.querySelector('a:first-child');
		a.classList.remove('active');
		item.classList.remove('show');
	})
} else {
	allSideDivider.forEach(item=> {
		item.textContent = item.dataset.text;
	})
}

toggleSidebar.addEventListener('click', function () {
	sidebar.classList.toggle('hide');

	if(sidebar.classList.contains('hide')) {
		allSideDivider.forEach(item=> {
			item.textContent = '-'
		})

		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
	} else {
		allSideDivider.forEach(item=> {
			item.textContent = item.dataset.text;
		})
	}
})




sidebar.addEventListener('mouseleave', function () {
	if(this.classList.contains('hide')) {
		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
		allSideDivider.forEach(item=> {
			item.textContent = '-'
		})
	}
})



sidebar.addEventListener('mouseenter', function () {
	if(this.classList.contains('hide')) {
		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
		allSideDivider.forEach(item=> {
			item.textContent = item.dataset.text;
		})
	}
})




// PROFILE DROPDOWN
const profile = document.querySelector('nav .profile');
const imgProfile = profile.querySelector('img');
const dropdownProfile = profile.querySelector('.profile-link');

imgProfile.addEventListener('click', function () {
	dropdownProfile.classList.toggle('show');
})




// MENU
const allMenu = document.querySelectorAll('main .content-data .head .menu');

allMenu.forEach(item=> {
	const icon = item.querySelector('.icon');
	const menuLink = item.querySelector('.menu-link');

	icon.addEventListener('click', function () {
		menuLink.classList.toggle('show');
	})
})



window.addEventListener('click', function (e) {
	if(e.target !== imgProfile) {
		if(e.target !== dropdownProfile) {
			if(dropdownProfile.classList.contains('show')) {
				dropdownProfile.classList.remove('show');
			}
		}
	}

	allMenu.forEach(item=> {
		const icon = item.querySelector('.icon');
		const menuLink = item.querySelector('.menu-link');

		if(e.target !== icon) {
			if(e.target !== menuLink) {
				if (menuLink.classList.contains('show')) {
					menuLink.classList.remove('show')
				}
			}
		}
	})
})





// PROGRESSBAR
const allProgress = document.querySelectorAll('main .card .progress');

allProgress.forEach(item=> {
	item.style.setProperty('--value', item.dataset.value)
})





import {
    obtenerDatosGeneros,
    obtenerDatosEdades,
    obtenerDatosEstados,
    obtenerDatosExamenes,
    obtenerDatosFechas,
    getFiltrosSeleccionados
} from './funcionesGraficos.js';

// Variables globales para los graficos
let chartGenero = null;
let chartEdad = null;
let chartEstado = null;
let chartExamen = null;
let chartFecha = null;

// Controla si el filtro de fecha está activo
let filtroFechaActivo = false;

async function inicializarGraficoFecha(filtros) {
    // Solo dibujar si ambas fechas están presentes y el filtro está activo
    if (!filtroFechaActivo || !filtros.fechaInicio || !filtros.fechaFin) {
        if (chartFecha) {
            chartFecha.destroy();
            chartFecha = null;
        }
        return;
    }

    const fechas = await obtenerDatosFechas(filtros);

    if (!fechas.length) {
        if (chartFecha) {
            chartFecha.destroy();
            chartFecha = null;
        }
        return;
    }

    // Solo un valor total
    const cantidad = fechas[0].cantidad;
    const label = `Del ${fechas[0].fechaInicio} al ${fechas[0].fechaFin}`;

    const options = {
        series: [{
            name: 'Candidatos',
            data: [cantidad]
        }],
        chart: { height: 350, type: 'bar' },
        xaxis: { categories: [label] },
        dataLabels: { enabled: true },
        tooltip: { y: { formatter: val => val + " candidatos" } }
    };

    if (chartFecha) chartFecha.destroy();
    chartFecha = new ApexCharts(document.querySelector("#chart5"), options);
    chartFecha.render();
}

async function inicializarGrafico(filtros) {
    const [femenino, masculino, noDefinido] = await obtenerDatosGeneros(filtros);

    const options = {
        series: [
            { name: 'Femenino', data: [femenino] },
            { name: 'Masculino', data: [masculino] },
            { name: 'Prefiero no decirlo', data: [noDefinido] },
        ],
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: false },
        xaxis: { categories: ['Géneros'] },
        tooltip: { y: { formatter: val => val + " personas" } }
    };

    if (chartGenero) chartGenero.destroy();
    chartGenero = new ApexCharts(document.querySelector("#chart"), options);
    chartGenero.render();
}

async function inicializarGrafico2(filtros) {
    const [edad1, edad2, edad3, edad4, edad5, edad6, edad7] = await obtenerDatosEdades(filtros);

    const options2 = {
        series: [
            { name: 'Menor de 18 años', data: [edad1] },
            { name: '18 a 24 años', data: [edad2] },
            { name: '25 a 34 años', data: [edad3] },
            { name: '35 a 44 años', data: [edad4] },
            { name: '45 a 54 años', data: [edad5] },
            { name: '55 a 64 años', data: [edad6] },
            { name: '65 años o más', data: [edad7] },
        ],
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: false },
        xaxis: { categories: ['Edades'] },
        tooltip: { y: { formatter: val => val + " Años" } }
    };

    if (chartEdad) chartEdad.destroy();
    chartEdad = new ApexCharts(document.querySelector("#chart2"), options2);
    chartEdad.render();
}

async function inicializarGrafico3(filtros) {
    const estados = await obtenerDatosEstados(filtros);

    const seriesData = estados.map(estado => ({
        name: estado.estado,
        data: [estado.cantidad]
    }));

    const options3 = {
        series: seriesData,
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: false },
        xaxis: { categories: estados.map(estado => estado.estado) },
        tooltip: { y: { formatter: val => val + " personas" } }
    };

    if (chartEstado) chartEstado.destroy();
    chartEstado = new ApexCharts(document.querySelector("#chart3"), options3);
    chartEstado.render();
}

async function inicializarGrafico4(filtros) {
    const examenes = await obtenerDatosExamenes(filtros);

    const seriesData = examenes.map(examen => ({
        name: examen.examen,
        data: [examen.cantidad]
    }));

    const options4 = {
        series: seriesData,
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: false },
        xaxis: { categories: examenes.map(examen => examen.examen) },
        tooltip: { y: { formatter: val => val + " examenes" } }
    };

    if (chartExamen) chartExamen.destroy();
    chartExamen = new ApexCharts(document.querySelector("#chart4"), options4);
    chartExamen.render();
}

async function actualizarTodosLosGraficos() {
    // Si el filtro de fecha está activo, se pasan las fechas, si no, se limpian
    let filtros = getFiltrosSeleccionados();
    if (!filtroFechaActivo) {
        filtros.fechaInicio = "";
        filtros.fechaFin = "";
    }
    await inicializarGrafico(filtros);
    await inicializarGrafico2(filtros);
    await inicializarGrafico3(filtros);
    await inicializarGrafico4(filtros);
    await inicializarGraficoFecha(filtros);
}

// Espera a que el DOM esté listo antes de agregar eventos
document.addEventListener('DOMContentLoaded', () => {
    // Solo combos, NO fechas
    ['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.addEventListener('change', actualizarTodosLosGraficos);
    });

    // Botón buscar para fechas
    const btnBuscar = document.getElementById('buscar');
    if (btnBuscar) {
        btnBuscar.addEventListener('click', () => {
            const date1 = document.getElementById('date1').value;
            const date2 = document.getElementById('date2').value;
            // Solo activa el filtro si ambas fechas están presentes
            filtroFechaActivo = !!(date1 && date2);
            actualizarTodosLosGraficos();
        });
    }

    // Botón limpiar para quitar filtro de fecha
    const btnLimpiar = document.getElementById('limpiar');
    if (btnLimpiar) {
        btnLimpiar.addEventListener('click', () => {
            document.getElementById('date1').value = '';
            document.getElementById('date2').value = '';
            filtroFechaActivo = false;
            actualizarTodosLosGraficos();
        });
    }

    filtroFechaActivo = false;
    actualizarTodosLosGraficos();
});