'use client';

import { useCallback } from 'react';
import { getAppServices } from '@/lib/services/create-services';
import type { AnalyticsEventProperties } from '@/lib/services/analytics/analytics-service';

/**
 * Custom hook for tracking analytics events with Umami.
 * 
 * Provides a convenient way to track custom events throughout your application.
 * 
 * @example
 * ```tsx
 * import { useAnalytics } from '@/components/analytics/useAnalytics';
 * 
 * function MyComponent() {
 *   const { trackEvent, trackPageview } = useAnalytics();
 * 
 *   const handleButtonClick = () => {
 *     trackEvent('button_click', {
 *       button_id: 'cta-primary',
 *       page: 'homepage'
 *     });
 *   };
 * 
 *   return <button onClick={handleButtonClick}>Click me</button>;
 * }
 * ```
 * 
 * @example
 * ```tsx
 * // Track a custom pageview
 * const { trackPageview } = useAnalytics();
 * trackPageview('/custom-path?param=value');
 * ```
 */
export function useAnalytics() {
  const services = getAppServices();

  /**
   * Track a custom event with optional properties.
   * 
   * @param eventName - The name of the event to track
   * @param properties - Optional event properties (metadata)
   */
  const trackEvent = useCallback(
    (eventName: string, properties?: AnalyticsEventProperties) => {
      services.analytics.track(eventName, properties);
      
      if (process.env.NODE_ENV === 'development') {
        console.log('[Umami] Tracked event:', eventName, properties);
      }
    },
    [services]
  );

  /**
   * Track a pageview (useful for custom navigation or SPA routing).
   * 
   * @param url - The URL to track (defaults to current location)
   */
  const trackPageview = useCallback(
    (url?: string) => {
      services.analytics.trackPageview(url);
      
      if (process.env.NODE_ENV === 'development') {
        console.log('[Umami] Tracked pageview:', url ?? 'current location');
      }
    },
    [services]
  );

  return {
    trackEvent,
    trackPageview,
  };
}