// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

/**
 * @file TopNav.tsx
 * @input Uses React, ReactNode
 * @output Exports TopNav component and TopNavProps
 * @position Core implementation; consumed by index.ts
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/TopNav/TopNav.doc.mjs
 * - /packages/core/src/TopNav/TopNav.test.tsx
 * - /packages/core/src/TopNav/index.ts
 * - /apps/storybook/stories/TopNav.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
 */
import type { ReactNode } from 'react';
import type { BaseProps } from "../BaseProps.js";
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { spacingVars } from "../theme/tokens.stylex.js";
import { mergeProps } from "../utils/index.js";
import { useTranslator } from "../i18n/index.js";
import { TopNavSlotContext } from "./TopNavContext.js";
import { useTopNavRenderMode } from "./TopNavRenderContext.js";
import { useTopNavMobileContent } from "./TopNavMobileContentContext.js";
import { Divider } from "../Divider/Divider.js";
import { MobileNav } from "../MobileNav/MobileNav.js";
import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
import { themeProps } from "../utils/themeProps.js";

/**
 * Base TopNav styles
 */
const styles = {
  base: {
    kGNEyG: "x6s0dn4",
    kzqmXN: "xh8yej3",
    kmVPX3: "xlsj2fj",
    kB7OPa: "x9f619",
    $$css: true as const
  },
  baseFlex: {
    k1xSpc: "x78zum5",
    $$css: true as const
  },
  baseGrid: {
    k1xSpc: "xrvj5dj",
    kumcoG: "x134kloy",
    $$css: true as const
  },
  mobileBar: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kzqmXN: "xh8yej3",
    kmVPX3: "xlsj2fj",
    kB7OPa: "x9f619",
    $$css: true as const
  },
  drawerDivider: {
    kqGvvJ: "x1g06x3t",
    $$css: true as const
  }
};
export interface TopNavProps extends BaseProps<HTMLElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLElement>;
  /**
   * Heading slot content — typically TopNavHeading with logo and text.
   * Positioned at the left edge of the nav bar.
   */
  heading?: ReactNode;
  /**
   * Start content slot - typically navigation items or breadcrumbs.
   * Positioned after the title, left-aligned.
   */
  startContent?: ReactNode;
  /**
   * Alias for startContent. Prefer startContent when composing with other slots.
   *
   * This keeps the common React children pattern from silently dropping
   * navigation items. If both children and startContent are provided,
   * startContent takes precedence and children are ignored.
   */
  children?: ReactNode;
  /**
   * Center content slot - typically tabs, search bar, or primary navigation.
   * Positioned at the horizontal center of the nav bar.
   * When provided, the layout switches to a three-column CSS grid to ensure
   * true centering regardless of start/end content widths.
   */
  centerContent?: ReactNode;
  /**
   * End content slot - typically search, icons, user profile, utility menus.
   * Positioned at the right edge of the nav bar.
   */
  endContent?: ReactNode;
  /**
   * Accessible label for the navigation landmark.
   * Helps screen readers identify the navigation area.
   * @default 'Top navigation'
   */
  label?: string;
}

/**
 * Top navigation bar for application headers.
 *
 * Slot-based layout with `heading`, `startContent`, `centerContent`, and
 * `endContent`. `children` are accepted as an alias for `startContent`
 * so navigation items do not silently disappear when using the common
 * React children pattern. When `centerContent` is provided, the layout switches
 * to a three-column CSS grid to keep center content horizontally centered.
 *
 * @example
 * ```
 * <TopNav
 *   label="Main navigation"
 *   heading={<TopNavHeading heading="My App" />}
 *   startContent={<TopNavItem label="Home" href="/" isSelected />}
 *   endContent={<Button label="Search" variant="ghost" />}
 * />
 * ```
 */
export function TopNav({
  heading,
  startContent,
  children,
  centerContent,
  endContent,
  label: labelFromProps,
  xstyle,
  className,
  style,
  ref,
  ...props
}: TopNavProps) {
  const t = useTranslator();
  const label = labelFromProps ?? t('@astryx.topNav.landmarkLabel');
  const renderMode = useTopNavRenderMode();
  const mobileContent = useTopNavMobileContent();
  const {
    hasAutoToggle
  } = useAppShellMobile();
  const resolvedStartContent = startContent ?? children;
  const hasCenterContent = centerContent != null;
  const hasCollapsibleContent = resolvedStartContent != null || centerContent != null;
  // Show mobile toggle when there's ANY drawer content — own items OR SideNav via context
  const hasMobileDrawerContent = hasCollapsibleContent || mobileContent != null;

  // =========================================================================
  // Mobile bar mode — heading + endContent + toggle, hide nav items.
  // Falls through to default when there's no drawer content — no reason
  // to strip down the TopNav if there's nothing to put in the drawer.
  // =========================================================================
  if (renderMode === 'mobile-bar') {
    return <nav ref={ref} role="navigation" aria-label={label} {...mergeProps(themeProps('top-nav', {
      mode: 'mobile-bar'
    }), stylex.props(styles.mobileBar, xstyle), className, style)} {...props}>
        {heading && <div className="x78zum5 x6s0dn4 x2lah0s">{heading}</div>}
        <div className="x78zum5 x6s0dn4 xzye2dw xvc5jky">
          {endContent}
          {hasMobileDrawerContent && hasAutoToggle && <MobileNavToggle />}
        </div>
      </nav>;
  }

  // =========================================================================
  // Drawer mode — render nav items vertically inside a MobileNav,
  // plus any additional content passed via context (e.g. SideNav items)
  // =========================================================================
  if (renderMode === 'drawer') {
    // Only render if there are collapsible items or extra content
    if (!hasCollapsibleContent && !mobileContent) {
      return null;
    }
    return <MobileNav header={heading}>
        {hasCollapsibleContent && <div className="x78zum5 xdt5ytf x1lsbc85">
            {resolvedStartContent}
            {centerContent}
          </div>}
        {hasCollapsibleContent && mobileContent && <Divider xstyle={styles.drawerDivider} />}
        {mobileContent && <div {...{}}>
            {mobileContent}
          </div>}
      </MobileNav>;
  }

  // =========================================================================
  // Default mode — full top bar
  // =========================================================================

  return <nav ref={ref} role="navigation" aria-label={label} {...mergeProps(themeProps('top-nav'), stylex.props(styles.base, hasCenterContent ? styles.baseGrid : styles.baseFlex, xstyle), className, style)} {...props}>
      <div className="x78zum5 x6s0dn4 x18g69wz x845mor xeuugli">
        {heading && <div className="x78zum5 x6s0dn4 x2lah0s">{heading}</div>}
        {resolvedStartContent && <TopNavSlotContext value="start">
            <div className="x78zum5 x6s0dn4 xzye2dw">
              {resolvedStartContent}
            </div>
          </TopNavSlotContext>}
      </div>
      {hasCenterContent && <TopNavSlotContext value="center">
          <div className="x78zum5 x6s0dn4 xl56j7k xzye2dw">{centerContent}</div>
        </TopNavSlotContext>}
      {hasCenterContent ? <div className="x78zum5 x6s0dn4 x13a6bvl xzye2dw">
          <TopNavSlotContext value="end">{endContent}</TopNavSlotContext>
        </div> : endContent && <div className="x78zum5 x6s0dn4 xzye2dw x2lah0s xvc5jky">
            <TopNavSlotContext value="end">{endContent}</TopNavSlotContext>
          </div>}
    </nav>;
}
TopNav.displayName = 'TopNav';