'use client'

import { useEffect, useRef } from 'react'
import { useContentTracking } from '@/lib/hooks/useAnalyticsTracking'

interface BlogAnalyticsProps {
  slug: string
  title: string
}

export function BlogAnalytics({ slug, title }: BlogAnalyticsProps) {
  const { trackBlogView, trackBlogEngagement } = useContentTracking()
  const hasTracked50 = useRef(false)
  const hasTracked90 = useRef(false)
  const startTime = useRef<number>()

  useEffect(() => {
    // Track blog view
    trackBlogView(slug, title)
    startTime.current = Date.now()

    // Track scroll depth
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const windowHeight = window.innerHeight
      const docHeight = document.documentElement.offsetHeight
      const totalDocScrollLength = docHeight - windowHeight
      const scrollPercentage = (scrollTop / totalDocScrollLength) * 100

      if (scrollPercentage >= 50 && !hasTracked50.current) {
        hasTracked50.current = true
        trackBlogEngagement(slug, 'scroll_50')
      }

      if (scrollPercentage >= 90 && !hasTracked90.current) {
        hasTracked90.current = true
        trackBlogEngagement(slug, 'scroll_90')
      }
    }

    // Track time on page when user leaves
    const handleBeforeUnload = () => {
      if (startTime.current) {
        const timeSpent = Date.now() - startTime.current
        if (timeSpent > 30000) { // More than 30 seconds
          trackBlogEngagement(slug, 'time_on_page')
        }
      }
    }

    window.addEventListener('scroll', handleScroll)
    window.addEventListener('beforeunload', handleBeforeUnload)

    return () => {
      window.removeEventListener('scroll', handleScroll)
      window.removeEventListener('beforeunload', handleBeforeUnload)
    }
  }, [slug, title, trackBlogView, trackBlogEngagement])

  return null // This is an invisible tracking component
}