import { useEffect, useRef } from 'react';

import { trackEvent } from '@/lib/analytics';
import { SCROLL_DEPTH } from '@/lib/event-catalog';

/**
 * Tracks scroll depth milestones (25%, 50%, 75%, 100%) for a page.
 * Each milestone fires exactly once per page load.
 */
export function useScrollDepthTracking(page: string): void {
  const firedRef = useRef<Set<number>>(new Set());

  useEffect(() => {
    const milestones = [25, 50, 75, 100];

    const handleScroll = () => {
      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
      if (scrollHeight <= 0) return;

      const scrollPercent = (window.scrollY / scrollHeight) * 100;

      for (const milestone of milestones) {
        if (scrollPercent >= milestone && !firedRef.current.has(milestone)) {
          firedRef.current.add(milestone);
          trackEvent(SCROLL_DEPTH, { depth: milestone, page });
        }
      }
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, [page]);
}