// Espera a que el DOM esté completamente cargado
document.addEventListener("DOMContentLoaded", function() {
    // Referencias a elementos HTML
    const fileInput = document.getElementById("file-input");
    const uploadBtn = document.getElementById("upload-btn");
    const plannerTable = document.getElementById("planner-table");
    const filterBtns = document.querySelectorAll(".filter-btn");

    uploadBtn.addEventListener("click", function() {
        const file = fileInput.files[0];
        if (file) {
            const downloadLink = document.getElementById("download-link");
            downloadLink.innerHTML = `<a href="${URL.createObjectURL(file)}" download="${file.name}">Descargar archivo</a>`;
        } else {
            alert("Por favor selecciona un archivo para subir.");
        }
    });

    // Manejador de eventos para los botones de filtro
    filterBtns.forEach(function(btn) {
        btn.addEventListener("click", function() {
            const state = btn.dataset.state;
            filterContent(state);
        });
    });

    // Función para filtrar el contenido de la tabla
    function filterContent(state) {
        const rows = plannerTable.querySelectorAll("tbody tr");
        rows.forEach(function(row) {
            const rowState = row.dataset.state;
            if (state === "all" || rowState === state) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    }
    
    const calendarBody = document.querySelector("#calendar tbody");

    function generateCalendar(year, month) {
        calendarBody.innerHTML = "";
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        const firstDayOfMonth = new Date(year, month, 1).getDay();
        let date = 1;

        for (let i = 0; i < 6; i++) {
            const row = document.createElement("tr");
            for (let j = 0; j < 7; j++) {
                const cell = document.createElement("td");
                if (i === 0 && j < firstDayOfMonth) {
                    // Celdas vacías antes del primer día del mes
                    cell.textContent = "";
                } else if (date > daysInMonth) {
                    // Celdas vacías después del último día del mes
                    cell.textContent = "";
                } else {
                    // Celdas con fechas del mes actual
                    cell.textContent = date;
                    date++;
                }
                cell.addEventListener("click", function() {
                    // Lógica para editar la fecha
                    const selectedDate = new Date(year, month, parseInt(this.textContent));
                    console.log("Fecha seleccionada:", selectedDate);
                });
                row.appendChild(cell);
            }
            calendarBody.appendChild(row);
        }
    }

    // Ejemplo: Mostrar el calendario para el mes actual al cargar la página
    const currentDate = new Date();
    generateCalendar(currentDate.getFullYear(), currentDate.getMonth());
});