'use client';

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

export interface AccountNavItem {
  href: string;
  label: string;
  badge?: number;
}

export const ACCOUNT_NAV: Array<{ label: string; items: AccountNavItem[] }> = [
  {
    label: 'My RareIndex',
    items: [
      { href: '/collections', label: 'Collections' },
      { href: '/my-index', label: 'My Index' },
      { href: '/watchlist', label: 'Watchlist' },
      { href: '/targets', label: 'Price targets' },
      { href: '/deals', label: 'Deal Radar' },
      { href: '/saved', label: 'Saved searches' },
    ],
  },
  {
    label: 'Signals',
    items: [
      { href: '/alerts', label: 'Alerts' },
      { href: '/notifications', label: 'Inbox' },
    ],
  },
  {
    label: 'Account',
    items: [
      { href: '/account/settings', label: 'Profile' },
      { href: '/account/security', label: 'Security' },
      { href: '/account/notifications', label: 'Notifications' },
      { href: '/account/api-keys', label: 'API keys' },
      { href: '/account/data', label: 'Data & privacy' },
    ],
  },
];

export function AccountNav({ unread, handle }: { unread: number; handle: string | null }) {
  const pathname = usePathname();
  return (
    <nav aria-label="Account" className="text-[13px]">
      {/* mobile: horizontal scroll */}
      <div className="-mx-4 flex gap-1 overflow-x-auto px-4 pb-2 scrollbar-none lg:hidden">
        {ACCOUNT_NAV.flatMap((g) => g.items).map((i) => {
          const active = pathname === i.href || pathname.startsWith(`${i.href}/`);
          return (
            <Link key={i.href} href={i.href} className={cn('shrink-0 rounded-full border px-3 py-1.5', active ? 'border-fg bg-accent text-accent-fg' : 'border-border text-muted')}>
              {i.label}
              {i.href === '/notifications' && unread > 0 ? <span className="ml-1.5 rounded-full bg-alert px-1.5 text-[10px] font-semibold text-white">{unread}</span> : null}
            </Link>
          );
        })}
      </div>
      {/* desktop: sidebar */}
      <div className="hidden lg:block">
        {ACCOUNT_NAV.map((g) => (
          <div key={g.label} className="mb-4">
            <p className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-subtle">{g.label}</p>
            <ul className="space-y-0.5">
              {g.items.map((i) => {
                const active = pathname === i.href || pathname.startsWith(`${i.href}/`);
                return (
                  <li key={i.href}>
                    <Link href={i.href} className={cn('flex items-center justify-between rounded-md px-2 py-1.5', active ? 'bg-inset font-medium text-fg' : 'text-muted hover:bg-inset hover:text-fg')}>
                      {i.label}
                      {i.href === '/notifications' && unread > 0 ? <span className="rounded-full bg-alert px-1.5 text-[10px] font-semibold text-white">{unread}</span> : null}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
        {handle ? (
          <Link href={`/u/${handle}`} className="block rounded-md border border-dashed border-border px-2 py-1.5 text-xs text-muted hover:text-fg">
            Public profile → /u/{handle}
          </Link>
        ) : (
          <Link href="/account/settings#handle" className="block rounded-md border border-dashed border-border px-2 py-1.5 text-xs text-muted hover:text-fg">
            Claim a public handle →
          </Link>
        )}
      </div>
    </nav>
  );
}