'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';
import { TOPICS } from '@/lib/topics';

/**
 * Topic navigation for a country: horizontally scrollable chips on mobile, sticky sub-nav on desktop.
 * The active chip scrolls into view on mount. Counts (optional) show indicators with data per topic.
 */
export function TopicNav({ slug, counts, sticky = true, className }: { slug: string; counts?: Record<string, number>; sticky?: boolean; className?: string }) {
  const pathname = usePathname();
  const ref = useRef<HTMLElement>(null);
  useEffect(() => {
    const el = ref.current?.querySelector<HTMLElement>('[aria-current="page"]');
    if (el) el.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'instant' as ScrollBehavior });
  }, [pathname]);
  const items = [{ id: '', short: t('country.overview'), href: routes.country(slug) }, ...TOPICS.map((tp) => ({ id: tp.id, short: tp.short, href: routes.countryTopic(slug, tp.id) }))];
  return (
    <nav
      ref={ref}
      aria-label={t('country.topics.title', { name: '' }).trim()}
      className={cn(sticky && 'sticky top-[52px] z-20 md:top-[56px]', '-mx-4 border-b border-rule bg-paper/95 backdrop-blur supports-[backdrop-filter]:bg-paper/85 sm:-mx-6', className)}
    >
      <ul className="scrollbar-none flex snap-x gap-1 overflow-x-auto px-4 py-1 sm:px-6 md:py-1.5">
        {items.map((it) => {
          const active = pathname === it.href;
          const n = it.id ? counts?.[it.id] : undefined;
          return (
            <li key={it.href} className="snap-start">
              <Link
                href={it.href}
                aria-current={active ? 'page' : undefined}
                className={cn(
                  'inline-flex h-11 items-center gap-1.5 whitespace-nowrap rounded-sm px-3 text-sm md:h-9 md:px-2.5',
                  active ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2 hover:text-ink',
                )}
              >
                {it.short}
                {n != null ? <span className={cn('tnum text-2xs', active ? 'text-paper/70' : 'text-ink-3')}>{n}</span> : null}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}