"use client"

import { Suspense, useEffect, useRef, useState } from "react"
import { usePathname, useSearchParams } from "next/navigation"
import { Progress } from "@/components/ui/progress"

function PageProgressContent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [progress, setProgress] = useState(0)
  const [isVisible, setIsVisible] = useState(false)
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)

  // Start progress on click
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      const target = (e.target as HTMLElement).closest("a")
      if (!target) return
      
      const href = target.getAttribute("href")
      if (!href) return
      
      // Check if it's an internal link
      const isInternal = href.startsWith("/") || href.startsWith(window.location.origin)
      const isSamePage = href === window.location.pathname || href.startsWith(window.location.pathname + "#") || href === window.location.href
      
      // Only show progress for actual page transitions
      if (isInternal && !isSamePage && target.getAttribute("target") !== "_blank") {
        setIsVisible(true)
        setProgress(15)
        
        // Simulate progress while waiting for route change
        // Uses a decaying approach so it slows down as it gets closer to 95%
        const interval = setInterval(() => {
          setProgress((prev) => {
            if (prev >= 95) {
              clearInterval(interval)
              return prev
            }
            return prev + (95 - prev) * 0.1
          })
        }, 100)
        intervalRef.current = interval
      }
    }

    document.addEventListener("click", handleClick)
    return () => document.removeEventListener("click", handleClick)
  }, [])

  // Finish progress on route change
  useEffect(() => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current)
      intervalRef.current = null
    }
    
    if (isVisible) {
      const finishTimeout = setTimeout(() => setProgress(100), 0)
      const timeout = setTimeout(() => {
        setIsVisible(false)
        setTimeout(() => setProgress(0), 300) // Reset after hiding
      }, 400)
      return () => {
        clearTimeout(finishTimeout)
        clearTimeout(timeout)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname, searchParams])

  if (!isVisible && progress === 0) return null

  return (
    <div
      className="fixed top-0 left-0 w-full z-50 pointer-events-none transition-opacity duration-300"
      style={{ opacity: isVisible ? 1 : 0 }}
    >
      <Progress value={progress} className="h-0.75 w-full rounded-none bg-transparent" />
    </div>
  )
}

export function PageProgress() {
  return (
    <Suspense fallback={null}>
      <PageProgressContent />
    </Suspense>
  )
}