document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.getElementById('blog-search');
  const searchClear = document.getElementById('search-clear');
  const categoryBtns = document.querySelectorAll('.category-btn');
  const filterBtns = document.querySelectorAll('.filter-btn');
  const resetBtn = document.getElementById('reset-filters');
  const resultsCount = document.getElementById('results-count');
  const emptyState = document.getElementById('empty-state');
  
  const allCards = document.querySelectorAll('.blog-card, .featured-card');
  let activeCategory = 'all';
  let activeFilter = 'all';
  let searchQuery = '';

  function filterArticles() {
    let visibleCount = 0;

    allCards.forEach(card => {
      const categories = card.dataset.categories || '';
      const isFeatured = card.dataset.featured === 'true';
      const title = card.querySelector('.featured-title, .card-title')?.textContent.toLowerCase() || '';
      const excerpt = card.querySelector('.featured-excerpt, .card-excerpt')?.textContent.toLowerCase() || '';

      // 1. Filtro de categoría
      const matchCategory = activeCategory === 'all' || categories.includes(activeCategory);
      
      // 2. Filtro de tipo (Todos / Destacados)
      const matchFilter = activeFilter === 'all' || (activeFilter === 'destacados' && isFeatured);
      
      // 3. Filtro de búsqueda
      const matchSearch = searchQuery === '' || title.includes(searchQuery) || excerpt.includes(searchQuery);

      if (matchCategory && matchFilter && matchSearch) {
        card.style.display = 'flex';
        visibleCount++;
      } else {
        card.style.display = 'none';
      }
    });

    // Actualizar contador y estado vacío
    if (resultsCount) {
      resultsCount.innerHTML = `Mostrando <strong>${visibleCount}</strong> artículo${visibleCount !== 1 ? 's' : ''}`;
    }
    
    if (emptyState) {
      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
    }

    // Mostrar/ocultar botón de limpiar búsqueda
    if (searchClear) {
      searchClear.classList.toggle('visible', searchQuery.length > 0);
    }
  }

  // Event Listeners
  if (searchInput) {
    searchInput.addEventListener('input', (e) => {
      searchQuery = e.target.value.toLowerCase().trim();
      filterArticles();
    });
  }

  if (searchClear) {
    searchClear.addEventListener('click', () => {
      searchInput.value = '';
      searchQuery = '';
      searchInput.focus();
      filterArticles();
    });
  }

  categoryBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      categoryBtns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      activeCategory = btn.dataset.category;
      filterArticles();
    });
  });

  filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      filterBtns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      activeFilter = btn.dataset.filter;
      filterArticles();
    });
  });

  if (resetBtn) {
    resetBtn.addEventListener('click', () => {
      activeCategory = 'all';
      activeFilter = 'all';
      searchQuery = '';
      if (searchInput) searchInput.value = '';
      
      categoryBtns.forEach(b => b.classList.remove('active'));
      document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
      
      filterBtns.forEach(b => b.classList.remove('active'));
      document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
      
      filterArticles();
    });
  }

  // Ejecutar al inicio
  filterArticles();
});