mice/app/components/PostHogProvider.tsx

"use client"

import posthog from "posthog-js"
import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
import { Suspense, useEffect } from "react"
import { usePathname, useSearchParams } from "next/navigation"

function PathnameTracker() {
  const posthogClient = usePostHog()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // Only track if PostHog client is available and properly initialized
    if (posthogClient && typeof posthogClient.capture === 'function') {
      posthogClient.capture('$pageview', {
        path: pathname + (searchParams.toString() ? `?${searchParams.toString()}` : ''),
      })
    }
  }, [posthogClient, pathname, searchParams])

  return null
}

function SuspendedPostHogPageView() {
  return (
    <Suspense fallback={null}>
      <PathnameTracker />
    </Suspense>
  )
}

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
    
    // Only initialize PostHog if we have a valid key
    if (posthogKey && posthogKey.trim() !== '') {
      posthog.init(posthogKey, {
        api_host: "/ingest",
        ui_host: "https://us.posthog.com",
        capture_pageview: 'history_change',
        capture_pageleave: true,
        capture_exceptions: true,
        debug: process.env.NODE_ENV === "development",
      });
    } else {
      console.log('PostHog not initialized - NEXT_PUBLIC_POSTHOG_KEY not provided');
    }
  }, [])

  // Only provide PostHog context if we have a key
  const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
  
  if (posthogKey && posthogKey.trim() !== '') {
    return (
      <PHProvider client={posthog}>
        <SuspendedPostHogPageView />
        {children}
      </PHProvider>
    );
  }

  // Return children without PostHog context if no key is provided
  return <>{children}</>;
}