// src/components/PostHogProvider.js
import React, { useEffect, useState } from 'react';
import { initPostHog } from '../lib/posthog';
import { usePageTracking } from '../hooks/usePageTracking';

/**
 * PostHog Provider Component
 * Initializes PostHog SDK and provides automatic page view tracking
 *
 * Usage:
 * <PostHogProvider>
 *   <App />
 * </PostHogProvider>
 */
export const PostHogProvider = ({ children }) => {
  const [isInitialized, setIsInitialized] = useState(false);

  // Initialize PostHog once when component mounts
  useEffect(() => {
    // Only run in browser
    if (typeof window === 'undefined') return;

    // Initialize PostHog
    initPostHog();
    setIsInitialized(true);

    // Log initialization
    if (process.env.NODE_ENV === 'development') {
      console.log('✅ PostHogProvider initialized');
    }
  }, []);

  // Automatically track page views
  usePageTracking({
    enabled: isInitialized,
    getProperties: (location) => {
      // Add custom properties based on route
      const properties = {};

      // Identify page type based on path
      if (location.pathname === '/home' || location.pathname === '/home/') {
        properties.page_type = 'landing';
      } else if (location.pathname.startsWith('/home/center')) {
        properties.page_type = 'dashboard';
      } else if (location.pathname.startsWith('/auth/')) {
        properties.page_type = 'auth';
      } else if (location.pathname.startsWith('/community')) {
        properties.page_type = 'feature';
        properties.feature_name = 'community';
      } else if (location.pathname.startsWith('/concepts')) {
        properties.page_type = 'feature';
        properties.feature_name = 'concepts';
      } else if (location.pathname.startsWith('/stocks')) {
        properties.page_type = 'feature';
        properties.feature_name = 'stocks';
      } else if (location.pathname.startsWith('/limit-analyse')) {
        properties.page_type = 'feature';
        properties.feature_name = 'limit_analyse';
      } else if (location.pathname.startsWith('/trading-simulation')) {
        properties.page_type = 'feature';
        properties.feature_name = 'trading_simulation';
      } else if (location.pathname.startsWith('/company')) {
        properties.page_type = 'detail';
        properties.content_type = 'company';
      } else if (location.pathname.startsWith('/event-detail')) {
        properties.page_type = 'detail';
        properties.content_type = 'event';
      }

      return properties;
    },
  });

  // Don't render children until PostHog is initialized
  // This prevents tracking events before SDK is ready
  if (!isInitialized) {
    return children; // Or return a loading spinner
  }

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

export default PostHogProvider;