// Contact Page GA4 Tracking
let contactPageListeners = [];

// 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: 'contacto',
      utm_campaign: 'contacto_whatsapp',
      utm_content: location
    });
    console.log('GA4 Event: whatsapp_click', { location: location, page: 'contacto' });
  };
}

// Phone click handler
function handlePhoneClick(location) {
  return function() {
    fireGA('phone_click', { 
      location: location, 
      page: 'contacto'
    });
    console.log('GA4 Event: phone_click', { location: location, page: 'contacto' });
  };
}

// Form submit handler
function handleFormSubmit() {
  fireGA('contact_form_submit', { 
    page: 'contacto',
    form_type: 'contact_form',
    source: 'website'
  });
  console.log('GA4 Event: contact_form_submit', { page: 'contacto' });
}

// Initialize tracking
function init() {
  // WhatsApp buttons tracking
  const whatsappButtons = [
    { id: 'ctaHeroWhatsapp', location: 'hero' },
    { id: 'ctaFormSuccessWhatsapp', location: 'form_success' },
    { id: 'ctaBlockWhatsapp', location: 'contact_block' },
    { id: 'ctaFinalWhatsapp', location: 'cta_final' }
  ];
  
  whatsappButtons.forEach(({ id, location }) => {
    const element = document.getElementById(id);
    if (element) {
      const handler = handleWhatsAppClick(location);
      element.addEventListener('click', handler);
      contactPageListeners.push({ element, handler, event: 'click' });
      console.log(`WhatsApp tracking added for: ${id} (${location})`);
    } else {
      console.warn(`WhatsApp element not found: ${id}`);
    }
  });

  // Phone buttons tracking
  const phoneButtons = [
    { id: 'ctaHeroTel', location: 'hero' },
    { id: 'ctaFinalTel', location: 'cta_final' }
  ];
  
  phoneButtons.forEach(({ id, location }) => {
    const element = document.getElementById(id);
    if (element) {
      const handler = handlePhoneClick(location);
      element.addEventListener('click', handler);
      contactPageListeners.push({ element, handler, event: 'click' });
      console.log(`Phone tracking added for: ${id} (${location})`);
    } else {
      console.warn(`Phone element not found: ${id}`);
    }
  });

  // Contact form tracking
  const form = document.getElementById('contactForm');
  if (form) {
    form.addEventListener('submit', handleFormSubmit);
    contactPageListeners.push({ element: form, handler: handleFormSubmit, event: 'submit' });
    console.log('Contact form tracking added');
  } else {
    console.warn('Contact form not found: contactForm');
  }

  console.log('GA4 Contact Page Tracking Initialized');
  console.log(`Total listeners added: ${contactPageListeners.length}`);
}

// Cleanup function
function teardown() {
  contactPageListeners.forEach(({ element, handler, event }) => {
    element.removeEventListener(event, handler);
  });
  contactPageListeners = [];
  console.log('GA4 Contact Page Tracking Cleaned Up');
}

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