"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { LayoutDashboard, Users2, BadgeCheck, Megaphone } from "lucide-react"
import { cn } from "@/lib/utils"

// Admin section navigation. Kept as a client component so the active tab
// can be highlighted via `usePathname` without any JS detour through the
// server. Mobile-friendly: scrolls horizontally on narrow screens so
// every tab is always reachable without a separate menu component.
const ITEMS = [
  { href: "/admin", label: "Dashboard", icon: LayoutDashboard, exact: true },
  { href: "/admin/users", label: "Registered users", icon: Users2 },
  { href: "/admin/verification", label: "Blue tick", icon: BadgeCheck },
  { href: "/admin/ads", label: "Ads", icon: Megaphone },
] as const

export function AdminNav() {
  const pathname = usePathname() || ""
  return (
    <nav
      aria-label="Admin sections"
      className="sticky top-0 z-10 -mx-4 overflow-x-auto border-b border-border bg-background/90 px-4 backdrop-blur md:mx-0 md:rounded-xl md:border md:shadow-sm"
    >
      <ul className="flex min-w-max items-center gap-1 py-2">
        {ITEMS.map((item) => {
          const active = item.exact
            ? pathname === item.href
            : pathname === item.href || pathname.startsWith(`${item.href}/`)
          const Icon = item.icon
          return (
            <li key={item.href}>
              <Link
                href={item.href}
                className={cn(
                  "inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  active
                    ? "bg-primary text-primary-foreground shadow-sm"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
                aria-current={active ? "page" : undefined}
              >
                <Icon className="h-4 w-4" aria-hidden="true" />
                {item.label}
              </Link>
            </li>
          )
        })}
      </ul>
    </nav>
  )
}