// @design-system: layout/VendorBottomNav
/**
 * VendorBottomNav — mobile bottom navigation bar for the vendor console.
 *
 * 5 slots: Dashboard / Deals / Scan (prominent center) / Analytics / More
 * Visible only on <1024px (hidden on desktop — VendorSidebar handles desktop).
 *
 * Tokens: `--color-mode-vendor-600/700`, `--color-surface-raised`, `--color-border`,
 *          `--color-text-muted`, `--color-text-primary`
 */

'use client';

import { pickLocalized } from '@/lib/i18n';
import { useLocale, useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { VENDOR_NAV } from '@/lib/vendor-nav';
import { usePrefetchOnIntent } from '@/lib/query/prefetch-registry';

export interface VendorBottomNavProps {
  /** Current pathname — used to highlight active slot. */
  currentPath: string;
  /** Render without prefetching vendor data on link intent. */
  demo?: boolean;
  /** Extra class names. */
  className?: string;
}

/**
 * VendorBottomNav
 *
 * Mobile-only bottom bar (`lg:hidden`).
 * Scan slot has vendor-green prominent style to draw attention.
 */
export function VendorBottomNav({ currentPath, demo = false, className }: VendorBottomNavProps) {
  const { locale } = useLocale();
  const t = useT('vendor_sidebar');
  const prefetchOnIntent = usePrefetchOnIntent();
  const getPrefetchProps = demo ? () => ({}) : prefetchOnIntent;

  const bottomItems = VENDOR_NAV.flatMap((g) => g.items)
    .filter((i) => i.bottomNav != null)
    .sort((a, b) => a.bottomNav!.slot - b.bottomNav!.slot);

  return (
    <nav
      aria-label={t('nav_label')}
      className={cn(
        'lg:hidden',
        'fixed inset-x-0 bottom-0 z-40',
        'flex min-h-[calc(var(--bottom-nav-height)+var(--safe-area-bottom))] items-stretch',
        'bg-surface-raised border-border border-t',
        'pb-[var(--safe-area-bottom)]',
        'ps-[var(--safe-area-start)]',
        'pe-[var(--safe-area-end)]',
        className,
      )}
    >
      {bottomItems.map((item) => {
        const isActive =
          item.path === '/vendor/dashboard'
            ? currentPath === item.path
            : currentPath.startsWith(item.path);
        const label = pickLocalized(item, locale, 'title');
        const prominent = item.bottomNav!.prominent === true;

        if (prominent) {
          return (
            <a
              key={item.path}
              href={item.path}
              {...getPrefetchProps(item.path)}
              aria-current={isActive ? 'page' : undefined}
              aria-label={label}
              className={cn(
                'flex min-h-[var(--touch-target-min)] flex-1 flex-col items-center justify-center gap-0.5',
                'focus-visible:ring-mode-vendor-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
              )}
            >
              <div
                className={cn(
                  'flex items-center justify-center',
                  'h-8 w-12 rounded-full',
                  isActive
                    ? 'bg-mode-vendor-600 text-white'
                    : 'bg-mode-vendor-50 text-mode-vendor-700',
                )}
              >
                <Icon name={item.icon} size="sm" aria-hidden />
              </div>
              <span className="text-text-muted text-xs">{label}</span>
            </a>
          );
        }

        return (
          <a
            key={item.path}
            href={item.path}
            {...getPrefetchProps(item.path)}
            aria-current={isActive ? 'page' : undefined}
            aria-label={label}
            className={cn(
              'flex min-h-[var(--touch-target-min)] flex-1 flex-col items-center justify-center gap-0.5 pt-1',
              'transition-colors',
              'focus-visible:ring-mode-vendor-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
              isActive ? 'text-mode-vendor-700' : 'text-text-muted',
            )}
          >
            <Icon name={item.icon} size="sm" aria-hidden />
            <span className="text-xs">{label}</span>
          </a>
        );
      })}
    </nav>
  );
}