import Script from 'next/script'

const GA_TRACKING_ID = 'G-XXXXXXXXXX' // Remplacer par l'ID Google Analytics réel

export const GoogleAnalytics = () => {
  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_title: document.title,
              page_location: window.location.href,
            });
            
            // Track custom events for fsociety
            gtag('config', '${GA_TRACKING_ID}', {
              custom_map: {
                'custom_parameter_1': 'business_type',
                'custom_parameter_2': 'service_interest'
              }
            });

            // Track WhatsApp clicks
            document.addEventListener('DOMContentLoaded', function() {
              const whatsappLinks = document.querySelectorAll('[href*="wa.me"]');
              whatsappLinks.forEach(link => {
                link.addEventListener('click', () => {
                  gtag('event', 'whatsapp_click', {
                    event_category: 'contact',
                    event_label: 'whatsapp_contact',
                    value: 1
                  });
                });
              });
            });

            // Track email clicks
            document.addEventListener('DOMContentLoaded', function() {
              const emailLinks = document.querySelectorAll('[href^="mailto:"]');
              emailLinks.forEach(link => {
                link.addEventListener('click', () => {
                  gtag('event', 'email_click', {
                    event_category: 'contact',
                    event_label: 'email_contact',
                    value: 1
                  });
                });
              });
            });

            // Track blog article engagement
            function trackArticleEngagement() {
              let startTime = Date.now();
              let scrollDepth = 0;
              
              window.addEventListener('scroll', () => {
                const currentScroll = Math.round((window.scrollY / document.body.scrollHeight) * 100);
                if (currentScroll > scrollDepth) {
                  scrollDepth = currentScroll;
                }
              });
              
              window.addEventListener('beforeunload', () => {
                const timeSpent = Math.round((Date.now() - startTime) / 1000);
                gtag('event', 'article_engagement', {
                  event_category: 'blog',
                  event_label: window.location.pathname,
                  custom_parameter_1: timeSpent,
                  custom_parameter_2: scrollDepth
                });
              });
            }
            
            if (window.location.pathname.includes('/blog/')) {
              trackArticleEngagement();
            }
          `,
        }}
      />
    </>
  )
}

export const trackEvent = (eventName: string, parameters?: Record<string, any>) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', eventName, parameters)
  }
}

// Types for better TypeScript support
declare global {
  interface Window {
    gtag: (command: string, ...args: any[]) => void
  }
}