document.addEventListener('DOMContentLoaded', () => {
  console.log('Blog JS cargado');
  
  const searchInput = document.getElementById('blog-search');
  const searchClear = document.getElementById('search-clear');
  const blogGrid = document.getElementById('blog-grid');
  const emptyState = document.getElementById('empty-state');
  const resultsCount = document.getElementById('results-count');
  const filtersHeader = document.getElementById('blog-filters-header');
  
  if (!searchInput || !blogGrid) {
    console.error('Faltan elementos del DOM');
    return;
  }

  let currentFilters = {
    search: '',
    category: 'all',
    featured: 'all',
    sort: 'recent'
  };

  // ===== EFECTO SCROLL EN FILTROS =====
  window.addEventListener('scroll', () => {
    if (window.scrollY > 100) {
      filtersHeader.classList.add('is-scrolled');
    } else {
      filtersHeader.classList.remove('is-scrolled');
    }
  });

  // ===== BUSCADOR =====
  searchInput.addEventListener('input', (e) => {
    const value = e.target.value.trim();
    currentFilters.search = value;
    
    if (searchClear) {
      searchClear.classList.toggle('visible', value.length > 0);
    }
    
    filterArticles();
  });

  if (searchClear) {
    searchClear.addEventListener('click', () => {
      searchInput.value = '';
      searchClear.classList.remove('visible');
      currentFilters.search = '';
      filterArticles();
      searchInput.focus();
    });
  }

  // ===== FILTROS PRINCIPALES =====
  document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentFilters.featured = btn.dataset.filter;
      filterArticles();
    });
  });

  // ===== CATEGORÍAS =====
  document.querySelectorAll('.category-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentFilters.category = btn.dataset.category;
      filterArticles();
    });
  });

  // ===== ORDENAMIENTO =====
  const sortSelect = document.getElementById('sort-select');
  if (sortSelect) {
    sortSelect.addEventListener('change', (e) => {
      currentFilters.sort = e.target.value;
      sortArticles();
    });
  }

  // ===== RESET =====
  const resetFilters = document.getElementById('reset-filters');
  if (resetFilters) {
    resetFilters.addEventListener('click', () => {
      currentFilters = { search: '', category: 'all', featured: 'all', sort: 'recent' };
      searchInput.value = '';
      searchClear?.classList.remove('visible');
      
      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
      document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
      
      document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
      document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
      
      if (sortSelect) sortSelect.value = 'recent';
      
      filterArticles();
    });
  }

  // ===== FUNCIÓN DE FILTRADO =====
  const filterArticles = () => {
    const articles = document.querySelectorAll('.blog-card, .featured-card');
    let visibleCount = 0;

    articles.forEach(article => {
      const categories = article.dataset.categories || '';
      const tags = article.dataset.tags || '';
      const isFeatured = article.dataset.featured === 'true';
      
      const title = article.querySelector('.card-title, .featured-title')?.textContent.toLowerCase() || '';
      const excerpt = article.querySelector('.card-excerpt, .featured-excerpt')?.textContent.toLowerCase() || '';
      
      const searchTerm = currentFilters.search.toLowerCase();
      const matchSearch = searchTerm === '' || 
        title.includes(searchTerm) || 
        excerpt.includes(searchTerm) ||
        categories.toLowerCase().includes(searchTerm) ||
        tags.toLowerCase().includes(searchTerm);
      
      const matchCategory = currentFilters.category === 'all' || 
        categories.toLowerCase().includes(currentFilters.category.toLowerCase());
      
      let matchFeatured = true;
      if (currentFilters.featured === 'destacados') {
        matchFeatured = isFeatured;
      }
      
      if (matchSearch && matchCategory && matchFeatured) {
        article.style.display = '';
        visibleCount++;
      } else {
        article.style.display = 'none';
      }
    });

    sortArticles();
    updateResultsCount(visibleCount);
    
    if (emptyState) {
      emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
    }
  };

  const sortArticles = () => {
    const articles = Array.from(document.querySelectorAll('.blog-card'));
    const container = blogGrid;
    
    switch(currentFilters.sort) {
      case 'recent':
        articles.sort((a, b) => {
          const dateA = new Date(a.querySelector('time')?.datetime || 0);
          const dateB = new Date(b.querySelector('time')?.datetime || 0);
          return dateB - dateA;
        });
        break;
      case 'alphabetical':
        articles.sort((a, b) => {
          const titleA = a.querySelector('.card-title')?.textContent || '';
          const titleB = b.querySelector('.card-title')?.textContent || '';
          return titleA.localeCompare(titleB);
        });
        break;
    }
    
    articles.forEach(article => container.appendChild(article));
  };

  const updateResultsCount = (count) => {
    if (!resultsCount) return;
    
    if (count === 0) {
      resultsCount.innerHTML = 'No se encontraron artículos';
    } else if (currentFilters.category === 'all' && currentFilters.search === '') {
      resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículos`;
    } else {
      resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículo${count !== 1 ? 's' : ''}`;
    }
  };

  // Inicializar
  filterArticles();
});