// Google Analytics and GTM composable
import { onMounted } from 'vue';

// Google Analytics types
declare global {
  interface Window {
    gtag?: (command: string, action: string, parameters?: any) => void;
    dataLayer?: any[];
  }
}

export const useAnalytics = () => {
  // Initialize GTM dataLayer if not exists
  const initializeGTM = () => {
    if (typeof window !== 'undefined' && !window.dataLayer) {
      window.dataLayer = [];
    }
  };

  // Track page view
  const trackPageView = (page_title?: string, page_path?: string) => {
    if (typeof window.gtag !== 'undefined') {
      window.gtag('config', 'GA_TRACKING_ID', {
        page_title,
        page_path,
      });
    }
  };

  // Track custom event
  const trackEvent = (action: string, category: string, label?: string, value?: number) => {
    if (typeof window.gtag !== 'undefined') {
      window.gtag('event', action, {
        event_category: category,
        event_label: label,
        value: value,
      });
    }
  };

  // Track CTA clicks
  const trackCTAClick = (buttonText: string, section?: string) => {
    trackEvent('click', 'cta', buttonText, undefined);

    // Also push to dataLayer for GTM
    if (window.dataLayer) {
      window.dataLayer.push({
        event: 'cta_click',
        cta_text: buttonText,
        cta_section: section || 'unknown',
      });
    }
  };

  // Track article engagement
  const trackArticleEngagement = (action: 'like' | 'save', articleTitle?: string) => {
    trackEvent(action + '_article', 'engagement', articleTitle);

    if (window.dataLayer) {
      window.dataLayer.push({
        event: 'article_engagement',
        engagement_type: action,
        article_title: articleTitle || 'unknown',
      });
    }
  };

  // Track scroll depth
  const trackScrollDepth = (percentage: number) => {
    trackEvent('scroll', 'engagement', 'scroll_depth', percentage);

    if (window.dataLayer) {
      window.dataLayer.push({
        event: 'scroll_depth',
        scroll_percentage: percentage,
      });
    }
  };

  // Track search
  const trackSearch = (searchTerm: string, resultsCount?: number) => {
    trackEvent('search', 'engagement', searchTerm, resultsCount);

    if (window.dataLayer) {
      window.dataLayer.push({
        event: 'site_search',
        search_term: searchTerm,
        search_results: resultsCount || 0,
      });
    }
  };

  // Track form submission
  const trackFormSubmission = (formName: string, formSection?: string) => {
    trackEvent('form_submit', 'conversion', formName);

    if (window.dataLayer) {
      window.dataLayer.push({
        event: 'form_submission',
        form_name: formName,
        form_section: formSection || 'unknown',
      });
    }
  };

  // Initialize on mount
  onMounted(() => {
    initializeGTM();
  });

  return {
    initializeGTM,
    trackPageView,
    trackEvent,
    trackCTAClick,
    trackArticleEngagement,
    trackScrollDepth,
    trackSearch,
    trackFormSubmission,
  };
};