'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/cn';

export const ADMIN_NAV = [
  { href: '/admin', label: 'Overview', exact: true },
  { href: '/admin/raw', label: 'Raw records' },
  { href: '/admin/data-quality', label: 'Data quality' },
  { href: '/admin/entity-resolution', label: 'Entity resolution' },
  { href: '/admin/costs', label: 'Costs' },
] as const;

/** Admin navigation: horizontal scrollable tabs on mobile, vertical sidebar from lg. Connector detail pages highlight Overview. */
export function AdminNav({ className }: { className?: string }) {
  const pathname = usePathname() ?? '/admin';
  return (
    <nav aria-label="Admin" className={cn('no-scrollbar -mx-4 flex gap-1 overflow-x-auto px-4 lg:mx-0 lg:flex-col lg:gap-0.5 lg:overflow-visible lg:px-0', className)}>
      {ADMIN_NAV.map((item) => {
        const active = 'exact' in item && item.exact ? pathname === item.href || pathname.startsWith('/admin/connectors') : pathname.startsWith(item.href);
        return (
          <Link
            key={item.href}
            href={item.href}
            aria-current={active ? 'page' : undefined}
            className={cn(
              'inline-flex min-h-11 shrink-0 items-center rounded-md px-3 text-sm transition-colors lg:min-h-10',
              active ? 'bg-plane-3 text-ink' : 'text-ink-2 hover:bg-plane-2 hover:text-ink',
            )}
          >
            {item.label}
          </Link>
        );
      })}
      <form action="/api/admin/logout" method="post" className="ml-auto shrink-0 lg:ml-0 lg:mt-4 lg:border-t lg:border-rule lg:pt-3">
        <button type="submit" className="inline-flex min-h-11 items-center rounded-md px-3 text-sm text-ink-3 hover:bg-plane-2 hover:text-ink lg:min-h-10">
          Sign out
        </button>
      </form>
    </nav>
  );
}