'use client';

import { useEffect, useRef, useCallback } from 'react';
import { usePathname } from 'next/navigation';
import { trackScrollDepth } from '@/lib/analytics';

const MILESTONES = [25, 50, 75, 100] as const;

export function ScrollDepthTracker() {
  const trackedRef = useRef<Set<number>>(new Set());
  const pathname = usePathname();

  const handleScroll = useCallback(() => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;

    if (docHeight <= 0) {
      return;
    }

    const scrollPercent = Math.round((scrollTop / docHeight) * 100);

    MILESTONES.forEach((milestone) => {
      if (scrollPercent >= milestone && !trackedRef.current.has(milestone)) {
        trackedRef.current.add(milestone);
        trackScrollDepth(milestone);
      }
    });
  }, []);

  useEffect(() => {
    trackedRef.current = new Set();

    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [pathname, handleScroll]);

  return null;
}