'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// Configuration de NProgress
NProgress.configure({
  showSpinner: false,    // Masquer le spinner
  trickleSpeed: 200,     // Vitesse d'animation
  minimum: 0.3,          // Valeur minimum
  easing: 'ease',        // Type d'animation
  speed: 500,            // Durée de l'animation
  trickle: true          // Animation progressive
})

export default function ProgressBar() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // Terminer la barre de progression quand la route change
    NProgress.done()
  }, [pathname, searchParams])

  useEffect(() => {
    // Démarrer la barre de progression pour les navigations
    const handleStart = () => NProgress.start()
    const handleStop = () => NProgress.done()

    // Écouter les événements de navigation (pour les liens)
    const handleClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement
      const anchor = target.closest('a')
      
      if (anchor && anchor.href) {
        const url = new URL(anchor.href)
        const currentUrl = new URL(window.location.href)
        
        // Si c'est une navigation vers une autre page de notre app
        if (url.origin === currentUrl.origin && url.pathname !== currentUrl.pathname) {
          NProgress.start()
        }
      }
    }

    // Écouter les clics sur les liens
    document.addEventListener('click', handleClick)

    // Écouter les changements d'historique (boutons précédent/suivant)
    window.addEventListener('popstate', handleStart)

    return () => {
      document.removeEventListener('click', handleClick)
      window.removeEventListener('popstate', handleStart)
    }
  }, [])

  return null
}