// Funcionalidad para el modo oscuro
document.querySelector('.pa-theme-switcher').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
});

// Funcionalidad para los dropdowns
document.querySelectorAll('.pa-dropdown-toggle').forEach(dropdown => {
    dropdown.addEventListener('click', function() {
        const menu = this.nextElementSibling;
        
        // Cerrar todos los otros dropdowns
        document.querySelectorAll('.pa-dropdown-menu.show').forEach(openMenu => {
            if (openMenu !== menu) {
                openMenu.classList.remove('show');
            }
        });
        
        // Alternar el dropdown actual
        menu.classList.toggle('show');
    });
});

// Cerrar dropdowns al hacer clic fuera
document.addEventListener('click', function(event) {
    if (!event.target.closest('.pa-dropdown')) {
        document.querySelectorAll('.pa-dropdown-menu.show').forEach(menu => {
            menu.classList.remove('show');
        });
    }
});

// Funcionalidad para el modal
const modalButtons = document.querySelectorAll('[data-modal]');
const modalBackdrop = document.getElementById('modalBackdrop');
const modals = document.querySelectorAll('.pa-modal');
const closeButtons = document.querySelectorAll('[data-dismiss="modal"]');

// Abrir modal
modalButtons.forEach(button => {
    button.addEventListener('click', function() {
        const modalId = this.getAttribute('data-modal');
        const modal = document.getElementById(modalId);
        
        if (modal) {
            // Extraer información del botón
            const flowName = this.getAttribute('data-flow-name');
            const flowDesc = this.getAttribute('data-flow-desc');
            const flowCreated = this.getAttribute('data-flow-created');
            const flowOwner = this.getAttribute('data-flow-owner');
            const flowRuns = this.getAttribute('data-flow-runs');
            const flowStatus = this.getAttribute('data-flow-status');
            const flowFrequency = this.getAttribute('data-flow-frequency');
            
            // Actualizar el contenido del modal
            document.getElementById('modalFlowName').textContent = flowName;
            document.getElementById('modalFlowDesc').textContent = flowDesc;
            document.getElementById('modalFlowCreated').textContent = flowCreated;
            document.getElementById('modalFlowOwner').textContent = flowOwner;
            document.getElementById('modalFlowRuns').textContent = flowRuns;
            document.getElementById('modalFlowFrequency').textContent = flowFrequency;
            
            // Actualizar el estado con la clase correcta
            const statusElement = document.getElementById('modalFlowStatus');
            statusElement.textContent = flowStatus;
            
            // Resetear clases
            statusElement.className = 'pa-badge';
            
            // Asignar clase según estado
            if (flowStatus === 'Activo') {
                statusElement.classList.add('pa-success');
            } else if (flowStatus === 'Inactivo') {
                statusElement.classList.add('pa-danger');
            } else if (flowStatus === 'En mantenimiento') {
                statusElement.classList.add('pa-warning');
            }
            
            // Mostrar el modal
            modal.classList.add('show');
            modalBackdrop.classList.add('show');
        }
    });
});

// Cerrar modal
closeButtons.forEach(button => {
    button.addEventListener('click', function() {
        const modal = this.closest('.pa-modal');
        if (modal) {
            modal.classList.remove('show');
            modalBackdrop.classList.remove('show');
        }
    });
});

// Cerrar modal al hacer clic en el backdrop
modalBackdrop.addEventListener('click', function() {
    modals.forEach(modal => {
        modal.classList.remove('show');
    });
    modalBackdrop.classList.remove('show');
});

// Funcionalidad para filtrar por estado
document.querySelectorAll('.pa-dropdown-item[data-filter]').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();
        
        // Desactivar otros items del mismo grupo
        const parent = this.closest('.pa-dropdown-menu');
        parent.querySelectorAll('.pa-dropdown-item').forEach(el => {
            el.classList.remove('active');
        });
        
        // Activar el item actual
        this.classList.add('active');
        
        // Actualizar texto del botón dropdown
        const dropdownButton = parent.previousElementSibling;
        const filterText = this.textContent.trim();
        dropdownButton.innerHTML = `<i class="bi bi-funnel"></i> ${filterText}`;
        
        // Aplicar filtros
        applyFilters();
    });
});

// Funcionalidad para filtrar por frecuencia
document.querySelectorAll('.pa-dropdown-item[data-frequency]').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();
        
        // Desactivar otros items del mismo grupo
        const parent = this.closest('.pa-dropdown-menu');
        parent.querySelectorAll('.pa-dropdown-item').forEach(el => {
            el.classList.remove('active');
        });
        
        // Activar el item actual
        this.classList.add('active');
        
        // Actualizar texto del botón dropdown
        const dropdownButton = parent.previousElementSibling;
        const frequencyText = this.textContent.trim();
        dropdownButton.innerHTML = `<i class="bi bi-clock"></i> ${frequencyText}`;
        
        // Aplicar filtros
        applyFilters();
    });
});

// Funcionalidad para buscar
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', function() {
    applyFilters();
});

// Limpiar búsqueda
document.getElementById('clearSearch').addEventListener('click', function() {
    searchInput.value = '';
    applyFilters();
});

// Función para aplicar todos los filtros
function applyFilters() {
    const searchTerm = searchInput.value.toLowerCase();
    const statusFilter = document.querySelector('#statusFilterMenu .pa-dropdown-item.active')?.getAttribute('data-filter') || 'all';
    const frequencyFilter = document.querySelector('#frequencyFilterMenu .pa-dropdown-item.active')?.getAttribute('data-frequency') || 'all';
    
    const rows = document.querySelectorAll('#flowsTable tbody tr');
    let visibleCount = 0;
    
    rows.forEach(row => {
        const name = row.querySelector('td:nth-child(1)').textContent.toLowerCase();
        const description = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
        const status = row.querySelector('td:nth-child(3) .pa-badge').textContent;
        const frequency = row.querySelector('td:nth-child(4)').textContent;
        
        // Aplicar filtro de búsqueda
        const matchesSearch = searchTerm === '' || 
            name.includes(searchTerm) || 
            description.includes(searchTerm);
        
        // Aplicar filtro de estado
        let matchesStatus = true;
        if (statusFilter !== 'all') {
            if (statusFilter === 'active') {
                matchesStatus = status === 'Activo';
            } else if (statusFilter === 'inactive') {
                matchesStatus = status === 'Inactivo';
            } else if (statusFilter === 'maintenance') {
                matchesStatus = status === 'En mantenimiento';
            }
        }
        
        // Aplicar filtro de frecuencia
        let matchesFrequency = true;
        if (frequencyFilter !== 'all') {
            matchesFrequency = frequency === frequencyFilter;
        }
        
        // Mostrar u ocultar fila según los filtros
        if (matchesSearch && matchesStatus && matchesFrequency) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    });
    
    // Mostrar mensaje si no hay resultados
    const noResults = document.getElementById('noResults');
    if (visibleCount === 0) {
        noResults.classList.add('show');
    } else {
        noResults.classList.remove('show');
    }
}

// Botón de actualizar
document.getElementById('btnRefresh').addEventListener('click', function() {
    // Simular actualización
    this.querySelector('i').classList.add('pa-rotate-animation');
    setTimeout(() => {
        this.querySelector('i').classList.remove('pa-rotate-animation');
    }, 1000);
    
    // Resetear filtros
    document.querySelectorAll('.pa-dropdown-item.active').forEach(item => {
        item.classList.remove('active');
    });
    
    // Resetear texto de botones dropdown
    document.getElementById('dropdownFilter').innerHTML = '<i class="bi bi-funnel"></i> Estado';
    document.getElementById('dropdownFrequency').innerHTML = '<i class="bi bi-clock"></i> Frecuencia';
    
    // Limpiar búsqueda
    searchInput.value = '';
    
    // Mostrar todas las filas
    document.querySelectorAll('#flowsTable tbody tr').forEach(row => {
        row.style.display = '';
    });
    
    // Ocultar mensaje de no resultados
    document.getElementById('noResults').classList.remove('show');
});