"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useRef } from "react"
import type { LucideIcon } from "lucide-react"
import type React from "react"
import { cn } from "@/lib/utils/styles"

interface NavItemProps {
  href: string
  icon: LucideIcon
  children: React.ReactNode
  onClick?: () => void
}

export const NavItem: React.FC<NavItemProps> = ({ href, icon: Icon, children, onClick }) => {
  const pathname = usePathname()
  // More precise active state detection - exact match or starts with href followed by /
  const isActive = pathname === href || (href !== '/dashboard' && pathname?.startsWith(href + '/'))
  const isNavigatingRef = useRef(false)
  
  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    // Prevent rapid double-clicks
    if (isNavigatingRef.current) {
      e.preventDefault()
      return
    }
    
    // Mark as navigating to prevent double-clicks
    isNavigatingRef.current = true
    
    // Always allow navigation - close mobile menu if needed
    if (onClick) {
      onClick()
    }
    
    // Reset flag after navigation completes
    setTimeout(() => {
      isNavigatingRef.current = false
    }, 500)
  }

  return (
    <Link
      href={href}
      onClick={handleClick}
      className={cn(
        "flex items-center px-3 py-2 text-sm rounded-md transition-colors",
        "text-muted-foreground hover:text-foreground hover:bg-accent",
        "active:scale-[0.98] transition-transform duration-75",
        "touch-manipulation will-change-transform",
        isActive && "bg-accent text-foreground font-medium"
      )}
      prefetch={true}
      style={{ WebkitTapHighlightColor: 'transparent' }}
    >
      <Icon className="h-4 w-4 mr-3 flex-shrink-0" />
      {children}
    </Link>
  )
}