// FAQ Page - Tracking, Search and Filters
let faqPageListeners = [];
let faqItems = [];
let currentSearchQuery = '';
let currentCategory = 'all';

// Helper function to fire GA4 events safely
function fireGA(eventName, params) {
  if (window.gtag) { 
    window.gtag('event', eventName, params || {}); 
  }
  if (window.dataLayer && Array.isArray(window.dataLayer)) {
    window.dataLayer.push(Object.assign({ 'event': eventName }, params || {}));
  }
}

// WhatsApp click handler
function handleWhatsAppClick(location) {
  return function() {
    fireGA('whatsapp_click', { 
      location: location, 
      page: 'faq',
      utm_campaign: 'faq_whatsapp',
      utm_content: location
    });
    console.log('GA4 Event: whatsapp_click', { location: location, page: 'faq' });
  };
}

// FAQ toggle handler
function handleFAQToggle(question, action) {
  return function() {
    fireGA('faq_toggle', { 
      question: question.substring(0, 100), // Limit length
      action: action,
      page: 'faq'
    });
    console.log('GA4 Event: faq_toggle', { question: question.substring(0, 50), action: action });
  };
}

// Search functionality
function handleSearch() {
  const searchInput = document.getElementById('faqSearch');
  const query = searchInput.value.toLowerCase().trim();
  currentSearchQuery = query;
  
  // Fire search event
  if (query.length > 0) {
    const visibleItems = filterFAQs();
    fireGA('faq_search', { 
      query: query,
      results_count: visibleItems,
      page: 'faq'
    });
    console.log('GA4 Event: faq_search', { query: query, results: visibleItems });
    
    // Show results count
    const resultsDiv = document.getElementById('searchResults');
    const resultsCount = document.getElementById('resultsCount');
    if (resultsDiv && resultsCount) {
      resultsCount.textContent = `${visibleItems} resultados para "${query}"`;
      resultsDiv.classList.remove('hidden');
    }
  } else {
    const resultsDiv = document.getElementById('searchResults');
    if (resultsDiv) {
      resultsDiv.classList.add('hidden');
    }
  }
  
  filterFAQs();
}

// Category filter functionality
function handleCategoryFilter(category) {
  currentCategory = category;
  
  // Update active state of filter buttons
  document.querySelectorAll('.category-filter').forEach(btn => {
    if (btn.dataset.category === category) {
      btn.classList.add('active');
      btn.querySelector('span').className = 'px-4 py-2 bg-[var(--accent-color)] text-white rounded-full text-sm font-medium hover:bg-[var(--accent2-color)] transition-colors cursor-pointer';
    } else {
      btn.classList.remove('active');
      btn.querySelector('span').className = 'px-4 py-2 bg-white border-2 border-[var(--light-border-color)] text-[var(--dark-text-color)] rounded-full text-sm font-medium hover:border-[var(--accent-color)] hover:text-[var(--accent-color)] transition-colors cursor-pointer';
    }
  });
  
  fireGA('faq_category_filter', { 
    category: category,
    page: 'faq'
  });
  console.log('GA4 Event: faq_category_filter', { category: category });
  
  filterFAQs();
}

// Filter FAQ items based on search and category
function filterFAQs() {
  let visibleCount = 0;
  
  faqItems.forEach(item => {
    let showItem = true;
    
    // Category filter
    if (currentCategory !== 'all') {
      const categories = item.dataset.categories || '';
      if (!categories.includes(currentCategory)) {
        showItem = false;
      }
    }
    
    // Search filter
    if (currentSearchQuery && showItem) {
      const searchText = item.dataset.searchText || '';
      const questionText = item.querySelector('h3').textContent || '';
      const answerText = item.querySelector('[data-landingsite-faq-answer]').textContent || '';
      
      const fullText = (searchText + ' ' + questionText + ' ' + answerText).toLowerCase();
      if (!fullText.includes(currentSearchQuery)) {
        showItem = false;
      }
    }
    
    // Show/hide item
    if (showItem) {
      item.style.display = 'block';
      visibleCount++;
    } else {
      item.style.display = 'none';
    }
  });
  
  // Show/hide no results message
  const noResults = document.getElementById('noResults');
  if (noResults) {
    if (visibleCount === 0) {
      noResults.classList.remove('hidden');
    } else {
      noResults.classList.add('hidden');
    }
  }
  
  return visibleCount;
}

// Clear search function
function clearSearch() {
  const searchInput = document.getElementById('faqSearch');
  if (searchInput) {
    searchInput.value = '';
  }
  currentSearchQuery = '';
  currentCategory = 'all';
  
  // Reset category filters
  handleCategoryFilter('all');
  
  const resultsDiv = document.getElementById('searchResults');
  if (resultsDiv) {
    resultsDiv.classList.add('hidden');
  }
}

// Make clearSearch available globally
window.clearSearch = clearSearch;

// Initialize FAQ functionality
function init() {
  // Get all FAQ items
  faqItems = Array.from(document.querySelectorAll('.faq-item'));
  
  // WhatsApp buttons tracking
  const whatsappButtons = [
    { id: 'ctaFaqHero', location: 'faq_hero' },
    { id: 'ctaFaqMid', location: 'faq_mid' },
    { id: 'ctaFaqFinal', location: 'faq_final' }
  ];
  
  whatsappButtons.forEach(({ id, location }) => {
    const element = document.getElementById(id);
    if (element) {
      const handler = handleWhatsAppClick(location);
      element.addEventListener('click', handler);
      faqPageListeners.push({ element, handler, event: 'click' });
    }
  });

  // FAQ toggle tracking - attach to existing FAQ functionality
  faqItems.forEach(item => {
    const question = item.querySelector('[data-landingsite-faq-question]');
    const answer = item.querySelector('[data-landingsite-faq-answer]');
    const questionText = item.querySelector('h3').textContent || 'Unknown';
    
    if (question) {
      // Track when FAQ opens
      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            const isOpen = !answer.classList.contains('hidden') && answer.style.display !== 'none';
            const action = isOpen ? 'open' : 'close';
            handleFAQToggle(questionText, action)();
          }
        });
      });
      
      if (answer) {
        observer.observe(answer, { attributes: true, attributeFilter: ['class', 'style'] });
        faqPageListeners.push({ type: 'observer', observer });
      }
    }
  });

  // Search functionality
  const searchInput = document.getElementById('faqSearch');
  if (searchInput) {
    const searchHandler = debounce(handleSearch, 300);
    searchInput.addEventListener('input', searchHandler);
    faqPageListeners.push({ element: searchInput, handler: searchHandler, event: 'input' });
  }

  // Category filter functionality
  document.querySelectorAll('.category-filter').forEach(button => {
    const clickHandler = () => handleCategoryFilter(button.dataset.category);
    button.addEventListener('click', clickHandler);
    faqPageListeners.push({ element: button, handler: clickHandler, event: 'click' });
  });

  console.log('FAQ Page functionality initialized');
  console.log(`Total FAQ items: ${faqItems.length}`);
}

// Debounce function for search
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Cleanup function
function teardown() {
  faqPageListeners.forEach(listener => {
    if (listener.type === 'observer') {
      listener.observer.disconnect();
    } else {
      listener.element.removeEventListener(listener.event, listener.handler);
    }
  });
  faqPageListeners = [];
  faqItems = [];
  currentSearchQuery = '';
  currentCategory = 'all';
  
  // Clean up global function
  if (window.clearSearch) {
    delete window.clearSearch;
  }
  
  console.log('FAQ Page functionality cleaned up');
}

// Export functions for the page system
export { init, teardown };