portfolio/components/AnalyticsProvider.tsx

'use client';

import { useEffect } from 'react';
import { useWebVitals } from '@/lib/useWebVitals';
import { trackEvent, trackPageLoad } from '@/lib/analytics';

interface AnalyticsProviderProps {
  children: React.ReactNode;
}

export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }) => {
  // Initialize Web Vitals tracking
  useWebVitals();

  useEffect(() => {
    if (typeof window === 'undefined') return;

    // Track page view
    const trackPageView = async () => {
      const path = window.location.pathname;
      const projectMatch = path.match(/\/projects\/([^\/]+)/);
      const projectId = projectMatch ? projectMatch[1] : null;

      // Track to Umami (if available)
      trackEvent('page-view', {
        url: path,
        referrer: document.referrer,
        timestamp: Date.now(),
      });

      // Track to our API
      try {
        await fetch('/api/analytics/track', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            type: 'pageview',
            projectId: projectId,
            page: path
          })
        });
      } catch (error) {
        // Silently fail
        if (process.env.NODE_ENV === 'development') {
          console.error('Error tracking page view:', error);
        }
      }
    };

    // Track page load performance
    trackPageLoad();

    // Track initial page view
    trackPageView();

    // Track performance metrics to our API
    const trackPerformanceToAPI = async () => {
      try {
        // Get current page path to extract project ID if on project page
        const path = window.location.pathname;
        const projectMatch = path.match(/\/projects\/([^\/]+)/);
        const projectId = projectMatch ? projectMatch[1] : null;

        // Wait for page to fully load
        setTimeout(async () => {
          const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
          const paintEntries = performance.getEntriesByType('paint');
          const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
          
          const fcp = paintEntries.find((e: PerformanceEntry) => e.name === 'first-contentful-paint');
          const lcp = lcpEntries[lcpEntries.length - 1];
          
          const performanceData = {
            loadTime: navigation ? navigation.loadEventEnd - navigation.fetchStart : 0,
            fcp: fcp ? fcp.startTime : 0,
            lcp: lcp ? lcp.startTime : 0,
            ttfb: navigation ? navigation.responseStart - navigation.fetchStart : 0,
            cls: 0, // Will be updated by CLS observer
            fid: 0, // Will be updated by FID observer
            si: 0 // Speed Index - would need to calculate
          };

          // Send performance data
          await fetch('/api/analytics/track', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              type: 'performance',
              projectId: projectId,
              page: path,
              performance: performanceData
            })
          });
        }, 2000); // Wait 2 seconds for page to stabilize
      } catch (error) {
        // Silently fail
        if (process.env.NODE_ENV === 'development') {
          console.error('Error tracking performance:', error);
        }
      }
    };

    // Track performance after page load
    if (document.readyState === 'complete') {
      trackPerformanceToAPI();
    } else {
      window.addEventListener('load', trackPerformanceToAPI);
    }

    // Track route changes (for SPA navigation)
    const handleRouteChange = () => {
      setTimeout(() => {
        trackPageView();
        trackPageLoad();
      }, 100);
    };

    // Listen for popstate events (back/forward navigation)
    window.addEventListener('popstate', handleRouteChange);

    // Track user interactions
    const handleClick = (event: MouseEvent) => {
      const target = event.target as HTMLElement;
      const element = target.tagName.toLowerCase();
      const className = target.className;
      const id = target.id;
      
      trackEvent('click', {
        element,
        className: (typeof className === 'string' && className) ? className.split(' ')[0] : undefined,
        id: id || undefined,
        url: window.location.pathname,
      });
    };

    // Track form submissions
    const handleSubmit = (event: SubmitEvent) => {
      const form = event.target as HTMLFormElement;
      trackEvent('form-submit', {
        formId: form.id || undefined,
        formClass: form.className || undefined,
        url: window.location.pathname,
      });
    };

    // Track scroll depth
    let maxScrollDepth = 0;
    const handleScroll = () => {
      const scrollDepth = Math.round(
        (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
      );
      
      if (scrollDepth > maxScrollDepth) {
        maxScrollDepth = scrollDepth;
        
        // Track scroll milestones
        if (scrollDepth >= 25 && scrollDepth < 50 && maxScrollDepth >= 25) {
          trackEvent('scroll-depth', { depth: 25, url: window.location.pathname });
        } else if (scrollDepth >= 50 && scrollDepth < 75 && maxScrollDepth >= 50) {
          trackEvent('scroll-depth', { depth: 50, url: window.location.pathname });
        } else if (scrollDepth >= 75 && scrollDepth < 90 && maxScrollDepth >= 75) {
          trackEvent('scroll-depth', { depth: 75, url: window.location.pathname });
        } else if (scrollDepth >= 90 && maxScrollDepth >= 90) {
          trackEvent('scroll-depth', { depth: 90, url: window.location.pathname });
        }
      }
    };

    // Add event listeners
    document.addEventListener('click', handleClick);
    document.addEventListener('submit', handleSubmit);
    window.addEventListener('scroll', handleScroll, { passive: true });

    // Track errors
    const handleError = (event: ErrorEvent) => {
      trackEvent('error', {
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        url: window.location.pathname,
      });
    };

    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
      trackEvent('unhandled-rejection', {
        reason: event.reason?.toString(),
        url: window.location.pathname,
      });
    };

    window.addEventListener('error', handleError);
    window.addEventListener('unhandledrejection', handleUnhandledRejection);

    // Cleanup
    return () => {
      window.removeEventListener('popstate', handleRouteChange);
      document.removeEventListener('click', handleClick);
      document.removeEventListener('submit', handleSubmit);
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('error', handleError);
      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
    };
  }, []);

  return <>{children}</>;
};