// 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.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;
		})
	}
})




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

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

    // Solo agrega el evento si ambos existen
    if (icon && menuLink) {
        icon.addEventListener('click', function () {
            menuLink.classList.toggle('show');
        });
    }
});


window.addEventListener('click', function (e) {
    if (profile) {
        const imgProfile = profile.querySelector('img');
        const dropdownProfile = profile.querySelector('.profile-link');
        if (imgProfile && dropdownProfile) {
            if (e.target !== imgProfile && 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 (icon && menuLink) {
            if (e.target !== icon && 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,
    setFiltroActivo,
    getFiltroActivo,
    obtenerResumenGenero
} from './funcionesGraficos.js';

let chartGenero = null;
let chartEdad = null;
let chartEstado = null;
let chartExamen = null;
let chartFecha = null;
let filtroFechaActivo = false;

function deshabilitarFiltros(excepto = null) {
    const combos = ['id_rango_edad', 'id_genero', 'id_examen'];
    combos.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.disabled = (excepto !== id);
    });
    const date1 = document.getElementById('date1');
    const date2 = document.getElementById('date2');
    const btnBuscar = document.getElementById('buscar');
    if (date1) date1.disabled = (excepto !== 'fechas');
    if (date2) date2.disabled = (excepto !== 'fechas');
    if (btnBuscar) btnBuscar.disabled = (excepto !== 'fechas');
}

function habilitarTodosFiltros() {
    ['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.disabled = false;
    });
    const date1 = document.getElementById('date1');
    const date2 = document.getElementById('date2');
    const btnBuscar = document.getElementById('buscar');
    if (date1) date1.disabled = false;
    if (date2) date2.disabled = false;
    if (btnBuscar) btnBuscar.disabled = false;
}

async function inicializarGrafico(filtros) {
    const datos = await obtenerDatosGeneros(filtros);
    const series = datos.map(d => d.cantidad);
    const categories = datos.map(d => d.genero);
    const options = {
        series: [{ name: 'Cantidad', data: series }],
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: true },
        xaxis: { categories },
        tooltip: { y: { formatter: val => val + " personas" } }
    };
    if (chartGenero) chartGenero.destroy();
    chartGenero = new ApexCharts(document.querySelector("#chart"), options);
    chartGenero.render();
}

async function inicializarGrafico2(filtros) {
    const datos = await obtenerDatosEdades(filtros);
    const series = datos.map(d => d.cantidad);
    const categories = datos.map(d => d.rango_edad);
    const options2 = {
        series: [{ name: 'Cantidad', data: series }],
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: true },
        xaxis: { categories },
        tooltip: { y: { formatter: val => val + " personas" } }
    };
    if (chartEdad) chartEdad.destroy();
    chartEdad = new ApexCharts(document.querySelector("#chart2"), options2);
    chartEdad.render();
}

async function inicializarGrafico3(filtros) {
    const datos = await obtenerDatosEstados(filtros);
    const series = datos.map(d => d.cantidad);
    const categories = datos.map(d => d.estado);
    const options3 = {
        series: [{ name: 'Cantidad', data: series }],
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: true },
        xaxis: { categories },
        tooltip: { y: { formatter: val => val + " personas" } }
    };
    if (chartEstado) chartEstado.destroy();
    chartEstado = new ApexCharts(document.querySelector("#chart3"), options3);
    chartEstado.render();
}

async function inicializarGrafico4(filtros) {
    const datos = await obtenerDatosExamenes(filtros);
    const series = datos.map(d => d.cantidad);
    const categories = datos.map(d => d.examen);
    const options4 = {
        series: [{ name: 'Cantidad', data: series }],
        chart: { height: 350, type: 'bar' },
        plotOptions: { bar: { horizontal: false, columnWidth: '55%', borderRadius: 5 } },
        dataLabels: { enabled: true },
        xaxis: { categories },
        tooltip: { y: { formatter: val => val + " examenes" } }
    };
    if (chartExamen) chartExamen.destroy();
    chartExamen = new ApexCharts(document.querySelector("#chart4"), options4);
    chartExamen.render();
}

async function inicializarGraficoFecha(filtros) {
    if (!filtroFechaActivo || !filtros.fechaInicio || !filtros.fechaFin) {
        if (chartFecha) {
            chartFecha.destroy();
            chartFecha = null;
        }
        return;
    }
    const datos = await obtenerDatosFechas(filtros);
    if (!datos.length) {
        if (chartFecha) {
            chartFecha.destroy();
            chartFecha = null;
        }
        return;
    }
    const cantidad = datos[0].cantidad;
    const label = `Del ${filtros.fechaInicio} al ${filtros.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();
}

// ----------- AQUÍ VA LA FUNCIÓN PRINCIPAL DE ACTUALIZACIÓN -----------
async function actualizarTodosLosGraficos() {
    let filtros = getFiltrosSeleccionados();
    if (!filtroFechaActivo) {
        filtros.fechaInicio = "";
        filtros.fechaFin = "";
    }
    await inicializarGrafico(filtros);
    await inicializarGrafico2(filtros);
    await inicializarGrafico3(filtros);
    await inicializarGrafico4(filtros);
    await inicializarGraficoFecha(filtros);
}
// ---------------------------------------------------------------------

async function actualizarTarjetasGenero() {
    const filtros = getFiltrosSeleccionados();
    const resumen = await obtenerResumenGenero(filtros);
    // Limpia las tarjetas
    document.getElementById('card-masculino').textContent = '0';
    document.getElementById('card-femenino').textContent = '0';
    document.getElementById('card-prefiero').textContent = '0';
    // Actualiza según los datos
    resumen.forEach(item => {
        if (item.genero === 'Masculino') {
            document.getElementById('card-masculino').textContent = item.cantidad;
        } else if (item.genero === 'Femenino') {
            document.getElementById('card-femenino').textContent = item.cantidad;
        } else if (item.genero === 'Prefiero no decir') {
            document.getElementById('card-prefiero').textContent = item.cantidad;
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    // Solo un filtro a la vez
    ['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('change', () => {
                if (el.value !== "NULL") {
                    setFiltroActivo(id);
                    filtroFechaActivo = false;
                    // Limpiar y deshabilitar los otros filtros
                    ['id_rango_edad', 'id_genero', 'id_examen'].forEach(oid => {
                        if (oid !== id) {
                            const oel = document.getElementById(oid);
                            if (oel) oel.value = "NULL";
                        }
                    });
                    // Limpiar fechas
                    const date1 = document.getElementById('date1');
                    const date2 = document.getElementById('date2');
                    if (date1) date1.value = '';
                    if (date2) date2.value = '';
                    deshabilitarFiltros(id);
                    actualizarTodosLosGraficos();
                } else {
                    setFiltroActivo(null);
                    filtroFechaActivo = false;
                    habilitarTodosFiltros();
                    actualizarTodosLosGraficos();
                }
            });
        }
    });

    const btnBuscar = document.getElementById('buscar');
    if (btnBuscar) {
        btnBuscar.addEventListener('click', () => {
            const date1 = document.getElementById('date1')?.value;
            const date2 = document.getElementById('date2')?.value;
            if (date1 && date2) {
                setFiltroActivo('fechas');
                filtroFechaActivo = true;
                // Limpiar y deshabilitar combos
                ['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
                    const el = document.getElementById(id);
                    if (el) el.value = "NULL";
                });
                deshabilitarFiltros('fechas');
            } else {
                filtroFechaActivo = false;
                setFiltroActivo(null);
                habilitarTodosFiltros();
            }
            actualizarTodosLosGraficos();
        });
    }

    function limpiarTodo() {
        ['id_rango_edad', 'id_genero', 'id_examen'].forEach(id => {
            const el = document.getElementById(id);
            if (el) {
                el.value = "NULL";
                el.disabled = false;
            }
        });
        const date1 = document.getElementById('date1');
        const date2 = document.getElementById('date2');
        const btnBuscar = document.getElementById('buscar');
        if (date1) { date1.value = ''; date1.disabled = false; }
        if (date2) { date2.value = ''; date2.disabled = false; }
        if (btnBuscar) btnBuscar.disabled = false;
        filtroFechaActivo = false;
        setFiltroActivo(null);
        actualizarTodosLosGraficos();
    }

    const btnLimpiar = document.getElementById('limpiar');
    if (btnLimpiar) {
        btnLimpiar.addEventListener('click', limpiarTodo);
    }

    const btnLimpiar2 = document.getElementById('limpiar2');
    if (btnLimpiar2) {
        btnLimpiar2.addEventListener('click', limpiarTodo);
    }

    filtroFechaActivo = false;
    setFiltroActivo(null);
    habilitarTodosFiltros();
    actualizarTodosLosGraficos();
});