'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { HugeiconsIcon } from '@hugeicons/react'

import { cn } from '@/lib/utils'
import { useAuth } from '@/contexts/auth-context'
import { BOTTOM_NAV_CANDIDATES, type NavItem } from '@/config/nav'

const MAX_TABS = 5

export function BottomNav() {
  const pathname = usePathname()
  const { permissions } = useAuth()

  const visibleItems: NavItem[] = BOTTOM_NAV_CANDIDATES.filter((item) => {
    if (!item.permission) return true
    return permissions.includes('*') || permissions.includes(item.permission)
  }).slice(0, MAX_TABS)

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background md:hidden">
      <div className="flex h-16 items-stretch">
        {visibleItems.map((item) => {
          const isActive =
            pathname === item.href ||
            (item.href !== '/' && pathname.startsWith(item.href))
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex flex-1 flex-col items-center justify-center gap-1 text-xs transition-colors',
                isActive
                  ? 'text-primary'
                  : 'text-muted-foreground hover:text-foreground',
              )}
            >
              <HugeiconsIcon
                icon={item.icon}
                size={22}
                className={isActive ? 'text-primary' : undefined}
              />
              <span className="truncate">{item.title}</span>
            </Link>
          )
        })}
      </div>
    </nav>
  )
}