'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'

const TABS = [
  { href: '/dashboard', label: 'Dashboard',  icon: '◈' },
  { href: '/listings',  label: 'Listings',   icon: '≡' },
  { href: '/keywords',  label: 'Targets',    icon: '⌖' },
  { href: '/sites',     label: 'Sites',      icon: '⬡' },
  { href: '/settings',  label: 'Settings',   icon: '⚙' },
  { href: '/ai-log',    label: 'AI Log',     icon: '◎' },
]

export default function Nav() {
  const pathname = usePathname()
  return (
    <nav className="glass sticky top-[56px] z-30">
      <div className="absolute bottom-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-g-border to-transparent" />
      <div className="flex gap-0.5 px-6 overflow-x-auto scrollbar-none">
        {TABS.map((tab) => {
          const active = pathname === tab.href || pathname.startsWith(tab.href + '/')
          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={cn(
                'relative flex items-center gap-1.5 px-4 py-3 text-[13px] font-semibold whitespace-nowrap transition-all duration-200',
                active
                  ? 'text-g-green'
                  : 'text-g-faint hover:text-g-muted'
              )}
            >
              <span className={cn(
                'text-[11px] transition-all duration-200',
                active ? 'text-g-green opacity-100' : 'text-g-faint opacity-50'
              )}>
                {tab.icon}
              </span>
              {tab.label}

              {/* Active indicator — glowing underline */}
              {active && (
                <span className="absolute bottom-0 inset-x-2 h-[2px] rounded-full bg-gradient-to-r from-g-green to-g-cyan shadow-[0_0_8px_rgba(0,232,123,0.5)]" />
              )}
            </Link>
          )
        })}
      </div>
    </nav>
  )
}