/**
 * Analytics Provider Setup
 *
 * This file shows how to configure the analytics provider for a React SPA.
 * Wrap your application root with this provider.
 */

import { AnalyticsProvider } from '@analytics/client/react';
import type { ReactNode } from 'react';

interface AnalyticsSetupProps {
  children: ReactNode;
}

/**
 * Get analytics configuration based on environment.
 *
 * In production, point to your analytics backend.
 * In development, you can use a local instance or disable tracking.
 */
function getAnalyticsConfig() {
  const isDev = process.env.NODE_ENV === 'development';

  return {
    // Your analytics backend URL
    apiBaseUrl: isDev
      ? 'http://localhost:4001'
      : process.env.REACT_APP_ANALYTICS_URL || 'https://analytics.yoursite.com',

    // Unique identifier for this application
    appName: 'my-react-app',

    // Disable in development if you don't want noise
    enabled: !isDev || process.env.REACT_APP_ANALYTICS_DEV === 'true',

    // Enable debug logging in development
    enableDebugLogging: isDev,

    // Automatic scroll depth tracking
    scrollTracking: {
      enabled: true,
      thresholds: [25, 50, 75, 100] as const, // Percentages to track
      debounceMs: 150,
    },

    // Batch settings for performance
    batchSize: 10,
    batchInterval: 5000, // 5 seconds
  };
}

/**
 * Analytics provider wrapper.
 *
 * Place this at the root of your application, typically in App.tsx or index.tsx.
 */
export function AnalyticsSetup({ children }: AnalyticsSetupProps) {
  const config = getAnalyticsConfig();

  return (
    <AnalyticsProvider config={config}>
      {children}
    </AnalyticsProvider>
  );
}

/**
 * Example usage in App.tsx:
 *
 * ```tsx
 * import { AnalyticsSetup } from './analytics-setup';
 * import { Router } from './router';
 *
 * export function App() {
 *   return (
 *     <AnalyticsSetup>
 *       <Router />
 *     </AnalyticsSetup>
 *   );
 * }
 * ```
 */