"use client"

import { useEffect, useRef, type RefObject } from "react"

interface UseDiscoveryScrollLoadOptions {
  sentinelRef: RefObject<HTMLElement | null>
  hasNextPage: boolean
  isFetchingNextPage: boolean
  onLoadMore: () => void
  /** Pages chargées auto sans scroll (évite de tout prefetch si le sentinel est visible) */
  maxAutoLoads?: number
  scrollRootSelector?: string
}

export function useDiscoveryScrollLoad({
  sentinelRef,
  hasNextPage,
  isFetchingNextPage,
  onLoadMore,
  maxAutoLoads = 1,
  scrollRootSelector = "main.overflow-y-auto",
}: UseDiscoveryScrollLoadOptions) {
  const autoLoadsRef = useRef(0)
  const userScrolledRef = useRef(false)

  useEffect(() => {
    if (hasNextPage) {
      autoLoadsRef.current = 0
      userScrolledRef.current = false
    }
  }, [hasNextPage])

  useEffect(() => {
    const root =
      document.querySelector(scrollRootSelector) ??
      sentinelRef.current?.closest("main")

    if (!root) return

    const onScroll = () => {
      if (root.scrollTop > 40) userScrolledRef.current = true
    }
    root.addEventListener("scroll", onScroll, { passive: true })
    return () => root.removeEventListener("scroll", onScroll)
  }, [scrollRootSelector, sentinelRef])

  useEffect(() => {
    const el = sentinelRef.current
    if (!el || !hasNextPage) return

    const root =
      document.querySelector(scrollRootSelector) ??
      el.closest("main")

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry?.isIntersecting || isFetchingNextPage) return
        if (!userScrolledRef.current && autoLoadsRef.current >= maxAutoLoads) return
        autoLoadsRef.current += 1
        onLoadMore()
      },
      {
        root: root instanceof Element ? root : null,
        rootMargin: "160px",
        threshold: 0,
      },
    )

    observer.observe(el)
    return () => observer.disconnect()
  }, [
    sentinelRef,
    hasNextPage,
    isFetchingNextPage,
    onLoadMore,
    scrollRootSelector,
    maxAutoLoads,
  ])
}