// @design-system: layout/SiteNav
'use client';

/**
 * SiteNav - unified navigation wrapper that replaces the TopBar + DesktopTopBar
 * boilerplate repeated across customer-facing feature files.
 *
 * Mobile: renders <TopBar> with HamburgerDrawer in start slot (logical start),
 *   and CartNavButton + optional back button in end slot (opposite corner).
 *
 * Desktop: renders <DesktopTopBar> with MDLogo, customer nav items, and
 *   CustomerDesktopEnd (auth/lang) + CartNavButton end slot.
 *
 * @example
 * // Mobile customer page with back button
 * <SiteNav variant="mobile" title={t('page_title')} currentPath="/deal/123" isGuest={false} />
 *
 * // Desktop customer page
 * <SiteNav variant="desktop" isGuest={false} isAdmin={false} />
 *
 * // Vendor mode mobile
 * <SiteNav variant="mobile" title={t('vendor_title')} currentPath="/vendor" isGuest={false} isVendor />
 */

import type { ReactNode } from 'react';
import { TopBar } from '@/components/ui/layout/TopBar';
import { DesktopTopBar, useCustomerDesktopNavItems } from '@/components/ui/layout/DesktopTopBar';
import { HamburgerDrawer } from '@/components/ui/layout/HamburgerDrawer';
import { CustomerDesktopEnd } from '@/components/ui/layout/CustomerDesktopEnd';
import { CartNavButton } from '@/components/ui/domain/cart/CartNavButton';
import { IconButton } from '@/components/ui/primitives/IconButton';
import { Icon } from '@/components/ui/icons/Icon';
import { MDLogo } from '@/components/ui/icons/MDLogo';
import { useT, useLocale } from '@/lib/i18n/react';
import { NotificationBell } from '@/components/ui/notification/NotificationBell';

export interface SiteNavProps {
  /** Controls which bar to render. */
  variant: 'mobile' | 'desktop';
  /** Mobile only — bar title text. */
  title?: string;
  /**
   * Mobile only — current page path.
   * '/' = no back button shown. Any other path = back button rendered.
   */
  currentPath?: string;
  /** True when no session exists (guest). */
  isGuest: boolean;
  /** True when user has admin privileges. */
  isAdmin?: boolean;
  /**
   * True = show VendorModeBadge in end slot.
   * False / undefined = show CartNavButton in end slot.
   */
  isVendor?: boolean;
  /** True = show affiliate section/link in badge and hamburger drawer. */
  isAffiliate?: boolean;
  /** User display name from SSR session. Passed to ProfileBadge in desktop bar. */
  userName?: string;
  /** Last 3 digits of phone — display hint. Passed to ProfileBadge and HamburgerDrawer. */
  phoneHint?: string;
  /** Extra content appended after CartNavButton / VendorModeBadge in end slot. */
  endExtra?: ReactNode;
  /** Desktop-only content prepended before notifications/cart in the end slot. */
  desktopEndExtra?: ReactNode;
}

function SiteDesktopNav({
  isGuest,
  isAdmin,
  isVendor,
  isAffiliate,
  currentPath,
  userName,
  phoneHint,
  desktopEndExtra,
}: {
  isGuest: boolean;
  isAdmin?: boolean;
  isVendor?: boolean;
  isAffiliate?: boolean;
  currentPath: string;
  userName?: string;
  phoneHint?: string;
  desktopEndExtra?: ReactNode;
}) {
  const items = useCustomerDesktopNavItems(currentPath, { isGuest });
  const { locale } = useLocale();
  const isHe = locale === 'he';
  const tNav = useT('nav');
  return (
    <DesktopTopBar
      mode="customer"
      items={items}
      logoSlot={
        <a
          href="/"
          aria-label={tNav('home_aria_label')}
          className="focus-visible:outline-brand-primary-600 flex items-center gap-2 rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
        >
          <MDLogo size={36} />
          {isHe ? (
            <span
              className="text-brand-primary-900 text-base font-extrabold tracking-tight"
              style={{ direction: 'rtl' }}
              aria-hidden="true"
            >
              {tNav('brand_logo_part1')}
              <span className="text-brand-primary-700">{tNav('brand_logo_part2')}</span>
            </span>
          ) : (
            <span
              className="text-brand-primary-900 text-base font-extrabold tracking-tight"
              style={{ direction: 'ltr' }}
              aria-hidden="true"
            >
              MULTI<span className="text-brand-primary-700">DEAL</span>
            </span>
          )}
        </a>
      }
      endSlot={
        <CustomerDesktopEnd
          isGuest={isGuest}
          isAdmin={isAdmin ?? false}
          isVendor={isVendor ?? false}
          isAffiliate={isAffiliate ?? false}
          userName={userName}
          phoneHint={phoneHint}
          extra={
            <>
              {desktopEndExtra}
              <NotificationBell />
              <CartNavButton />
            </>
          }
        />
      }
    />
  );
}

function SiteMobileNav({
  title,
  currentPath,
  isGuest,
  isAdmin,
  isVendor,
  isAffiliate,
  userName,
  phoneHint,
  endExtra,
}: Omit<SiteNavProps, 'variant'>) {
  const tCommon = useT('common');
  const path = currentPath ?? '/';

  return (
    <TopBar
      variant={isVendor ? 'vendor' : 'customer'}
      title={title ?? ''}
      startSlot={
        <HamburgerDrawer
          isGuest={isGuest}
          isAdmin={isAdmin}
          isVendor={isVendor}
          isAffiliate={isAffiliate}
          currentPath={path}
          displayName={userName}
          phoneHint={phoneHint}
        />
      }
      endSlot={
        <div className="[&_button:not([aria-pressed='true'])]:text-text-primary flex items-center gap-1">
          <CartNavButton />
          {endExtra}
          {path !== '/' && (
            <IconButton
              variant="ghost"
              size="md"
              aria-label={tCommon('back')}
              onClick={() => window.history.back()}
            >
              <Icon name="ChevronRight" size="md" mirror />
            </IconButton>
          )}
        </div>
      }
    />
  );
}

export function SiteNav({ variant, ...props }: SiteNavProps) {
  if (variant === 'desktop') {
    return (
      <SiteDesktopNav
        isGuest={props.isGuest}
        isAdmin={props.isAdmin}
        isVendor={props.isVendor}
        isAffiliate={props.isAffiliate}
        userName={props.userName}
        phoneHint={props.phoneHint}
        currentPath={props.currentPath ?? '/'}
        desktopEndExtra={props.desktopEndExtra}
      />
    );
  }
  return <SiteMobileNav {...props} />;
}