// @design-system: layout/BottomNav
/**
 * BottomNav - sticky bottom navigation bar.
 *
 * Per FDS §4.1: Home / Search / Purchases / Profile (customer).
 * Vendor mode: Dashboard / Deals / Offers / Settings.
 *
 * Uses logical properties throughout for RTL-native layout.
 *
 * @example
 * <BottomNav
 *   mode="customer"
 *   items={[
 *     { href: '/', icon: <HomeIcon />, label: t('home'), active: true },
 *     ...
 *   ]}
 * />
 */

import React, { type ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';

export interface BottomNavItem {
  href: string;
  /** Icon node - use <Icon> from icons/. */
  icon: ReactNode;
  /** Accessible label (also rendered as visible text). */
  label: string;
  /** Whether this item is the active route. */
  active?: boolean;
  /**
   * Optional click handler. When provided the item renders as a `<button>`
   * instead of an `<a>` (e.g. cart icon that opens a drawer rather than navigating).
   */
  onClick?: () => void;
}

export interface BottomNavProps {
  items: BottomNavItem[];
  mode?: 'customer' | 'vendor';
  className?: string;
}

function BottomNavInner({ items, mode = 'customer', className }: BottomNavProps) {
  const isVendor = mode === 'vendor';
  const t = useT('nav');

  return (
    <nav
      data-bottom-nav
      aria-label={isVendor ? t('nav_vendor') : t('nav_customer')}
      className={cn(
        'flex items-stretch justify-around',
        'min-h-[calc(var(--bottom-nav-height)+var(--safe-area-bottom))]',
        'bg-surface-default',
        'shadow-md',
        'rounded-t-2xl',
        'pb-[var(--safe-area-bottom)]',
        'ps-[var(--safe-area-start)]',
        'pe-[var(--safe-area-end)]',
        className,
      )}
    >
      {items.map((item) => {
        const sharedClassName = cn(
          'flex min-h-[var(--touch-target-min)] flex-1 flex-col items-center justify-center gap-0.5',
          'px-1 py-2',
          'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',
          'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
          item.active
            ? isVendor
              ? 'text-mode-vendor-700'
              : 'text-brand-primary-700'
            : 'text-text-muted hover:text-text-secondary',
        );

        const innerContent = (
          <>
            <span
              className={cn(
                'flex items-center justify-center',
                'size-6',
                item.active && (isVendor ? 'text-mode-vendor-700' : 'text-brand-primary-700'),
              )}
              aria-hidden="true"
            >
              {item.icon}
            </span>
            <span className={cn('text-xs', item.active ? 'font-semibold' : 'text-text-muted')}>
              {item.label}
            </span>
          </>
        );

        const content = item.active ? (
          <span
            className={cn(
              'flex flex-col items-center justify-center gap-0.5',
              'rounded-full px-3 py-1',
              isVendor ? 'bg-mode-vendor-50' : 'bg-mode-customer-50',
            )}
          >
            {innerContent}
          </span>
        ) : (
          innerContent
        );

        return item.onClick ? (
          <button
            key={item.href}
            type="button"
            aria-label={item.label}
            onClick={item.onClick}
            className={sharedClassName}
          >
            {content}
          </button>
        ) : (
          <a
            key={item.href}
            href={item.href}
            aria-current={item.active ? 'page' : undefined}
            className={sharedClassName}
          >
            {content}
          </a>
        );
      })}
    </nav>
  );
}

export const BottomNav = React.memo(BottomNavInner);