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

'use client';
declare const process: {env: {NODE_ENV?: string}};

/**
 * @file BreadcrumbItem.tsx
 * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
 *   rtlStyles for the contextual default slash, and (for the menu trigger)
 *   usePopover + the shared DropdownMenu item API (renderDropdownItems,
 *   DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
 * @output Exports BreadcrumbItem component and BreadcrumbItemProps
 * @position Individual breadcrumb item; used inside Breadcrumbs
 *
 * A `menu` prop turns the item's link-styled button into a menu trigger whose
 * popover reuses DropdownMenu's item pipeline — the same wiring ContextMenu
 * uses — so menu-item definitions are portable across the menu family.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Breadcrumbs/Breadcrumbs.doc.mjs
 * - /packages/core/src/Breadcrumbs/Breadcrumbs.test.tsx
 * - /packages/core/src/Breadcrumbs/index.ts
 * - /apps/storybook/stories/Breadcrumbs.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Breadcrumbs/ (showcase blocks)
 */
import React, { use, useCallback, useId, useMemo, useRef, useEffect, type ReactNode, type MouseEvent } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, typeScaleVars, radiusVars, fontWeightVars } from "../theme/tokens.stylex.js";
import { BreadcrumbContext, type BreadcrumbsVariant } from "./Breadcrumbs.js";
import { useLinkComponent } from "../Link/useLinkComponent.js";
import type { LinkComponentType } from "../Link/types.js";
import { mergeProps, rtlStyles } from "../utils/index.js";
import type { BaseProps } from "../BaseProps.js";
import { themeProps } from "../utils/themeProps.js";
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
import { Icon } from "../Icon/index.js";
import { usePopover } from "../Popover/usePopover.js";
import { useListFocus } from "../hooks/useListFocus.js";
import { useTypeahead } from "../hooks/useTypeahead.js";
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
import { DropdownMenuContext, type DropdownMenuContextValue, type DropdownMenuSize } from "../DropdownMenu/DropdownMenuContext.js";
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
import type { DropdownMenuOption } from "../DropdownMenu/DropdownMenu.js";
import { useMergedRefs } from "../hooks/useMergedRefs.js";
// =============================================================================
// Props
// =============================================================================

export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onClick'> {
  ref?: React.Ref<HTMLLIElement>;
  /**
   * Custom component to render instead of `<a>` for breadcrumb links.
   * Overrides the provider-level default set by LinkProvider.
   * Only applies for non-current items. Must accept href, className, style, and children props.
   */
  as?: LinkComponentType;
  /**
   * Label content of the breadcrumb item.
   */
  children: ReactNode;
  /**
   * URL for the breadcrumb link. Omit for the current page.
   */
  href?: string;
  /**
   * Click handler. Works with or without href.
   */
  onClick?: (e: MouseEvent<HTMLElement>) => void;
  /**
   * Marks this item as the current page. Renders as a span with aria-current="page".
   * When omitted, the last item is auto-detected as current if no item is
   * explicitly current. Pass `false` to opt this item out of auto-detection.
   * @default undefined
   */
  isCurrent?: boolean;
  /**
   * Optional icon rendered before the label.
   */
  startIcon?: ReactNode;
  /**
   * Menu opened when the item is activated. Accepts the SAME item API as
   * DropdownMenu / MoreMenu / ContextMenu, so a consumer's existing menu-item
   * definitions are portable into a breadcrumb with no rewrite:
   * - a `DropdownMenuOption[]` data array (items, sections, dividers), or
   * - composed `DropdownMenuItem` / `DropdownMenuCheckboxItem` /
   *   `DropdownMenuRadioGroup` children.
   *
   * When set, the item renders as a link-styled menu trigger (button + a
   * trailing chevron, `aria-haspopup="menu"` / `aria-expanded`) whose popover
   * is a `role="menu"` container that provides `DropdownMenuContext` and runs
   * `useListFocus`. Takes precedence over `href` / `onClick` (which are
   * ignored when `menu` is set — a dev-time warning is logged).
   */
  menu?: DropdownMenuOption[] | ReactNode;
  /**
   * Size passed to the menu items via `DropdownMenuContext` (item
   * padding/typography). Defaults from the breadcrumb variant:
   * `'supporting'` → `'sm'`, otherwise `'md'`.
   */
  menuSize?: DropdownMenuSize;
}

// =============================================================================
// Styles
// =============================================================================

const itemStyles = {
  root: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kOIVth: "xzye2dw",
    kogj98: "x1ghz6dp",
    "--separator-display": "xkce8z9 x1ibt0lz",
    $$css: true as const
  },
  defaultSize: {
    kGuDYH: "xjm74w1",
    kLWn49: "xw6l6zx",
    $$css: true as const
  },
  supportingSize: {
    kGuDYH: "x141an7d",
    kLWn49: "x1ltkj2j",
    $$css: true as const
  },
  link: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kOIVth: "xzye2dw",
    k8WAf4: "xu0wf1k",
    kybGjl: "x1hl2dhg x13nosk6",
    kkrTdU: "x1ypdohk x16khyan",
    $$css: true as const
  },
  buttonReset: {
    kg3NbH: "xnjsko4",
    kogj98: "x1ghz6dp",
    kVVagm: "xln7xf2",
    $$css: true as const
  },
  defaultLink: {
    kMwMTN: "xv1l7n4",
    $$css: true as const
  },
  supportingLink: {
    kMwMTN: "xv1l7n4",
    $$css: true as const
  },
  chevron: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kmuXW: "x2lah0s",
    kzqmXN: "x5livx5",
    kZKoxP: "x15rwvks",
    kGuDYH: "x141an7d",
    $$css: true as const
  }
};
function BreadcrumbSeparator({
  separator
}: {
  separator: ReactNode;
}) {
  return <span aria-hidden="true" className="x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o">
      {separator === '/' ? <span {...stylex.props(rtlStyles.mirror)}>/</span> : separator}
    </span>;
}
const menuStyles = {
  popover: {
    k7Eaqz: "x5w4yej",
    kqGvvJ: "xsq74q5",
    $$css: true as const
  }
};

// =============================================================================
// Component
// =============================================================================

/**
 * An individual breadcrumb item. Renders as a link (`<a>`) or a span
 * depending on whether it represents the current page.
 *
 * Each item renders its own leading separator, hidden on :first-child via
 * CSS. Auto-current detection uses a post-render effect that checks the
 * DOM — no React child introspection.
 *
 * @example
 * ```
 * <BreadcrumbItem href="/projects">Projects</BreadcrumbItem>
 * <BreadcrumbItem isCurrent>My Project</BreadcrumbItem>
 * ```
 */
export function BreadcrumbItem({
  ref,
  as,
  children,
  href,
  onClick,
  isCurrent: isCurrentProp,
  startIcon,
  menu,
  menuSize,
  xstyle,
  className,
  style,
  'data-testid': testId,
  ...rest
}: BreadcrumbItemProps) {
  const ctx = use(BreadcrumbContext);
  const LinkComponent = useLinkComponent(as);
  const isSupporting = ctx.variant === 'supporting';
  const liRef = useRef<HTMLLIElement>(null);
  // Points at the element we render to hold the item's content (the
  // link/button/span in the auto-candidate path). Auto-current detection sets
  // aria-current on this instead of guessing the <li>'s last child.
  const contentRef = useRef<HTMLElement>(null);
  const isCurrent = isCurrentProp === true;
  const isAutoCandidate = isCurrentProp == null;
  const hasMenu = menu != null;
  const resolvedMenuSize: DropdownMenuSize = menuSize ?? (isSupporting ? 'sm' : 'md');

  // `menu` owns the click interaction; a label can't both navigate/act and
  // open a menu on the same activation. Warn once so the (ignored) href/onClick
  // don't silently disappear on the consumer.
  useEffect(() => {
    if (process.env.NODE_ENV !== 'production' && hasMenu) {
      if (href != null) {
        console.warn('BreadcrumbItem: `menu` and `href` are mutually exclusive; `menu` ' + 'takes precedence and `href` is ignored.');
      } else if (onClick != null) {
        console.warn('BreadcrumbItem: `menu` and `onClick` are mutually exclusive; ' + '`menu` takes precedence and `onClick` is ignored.');
      }
    }
  }, [hasMenu, href, onClick]);

  // Auto-detect: if no sibling has aria-current="page" and this is the last
  // non-separator item, set aria-current on our content element.
  // Runs as useEffect (not layout) — only sets an aria attribute, no visual change.
  // Placed on the item's content element (the link/button/span after the
  // separator), matching where the explicit `isCurrent` path sets it, so
  // aria-current lands on the actual interactive element — including when the
  // last item is a link — rather than on the outer <li> (navigation-11).
  useEffect(() => {
    if (!isAutoCandidate) {
      return;
    }
    const li = liRef.current;
    if (!li) {
      return;
    }
    const ol = li.parentElement;
    if (!ol) {
      return;
    }

    // All breadcrumb items (li without aria-hidden are items, with aria-hidden are separators — but we no longer have separator lis)
    const items = Array.from(ol.children) as HTMLElement[];
    const isLast = items.length > 0 && items[items.length - 1] === li;
    const hasExplicit = ol.querySelector('[aria-current="page"]');
    if (isLast && !hasExplicit) {
      // We control the element that holds the content (see the auto-candidate
      // render path below), so set aria-current on that ref rather than
      // assuming a positional last child. Fall back to the <li> only if the
      // ref is somehow unresolved.
      const target = contentRef.current ?? li;
      target.setAttribute('aria-current', 'page');
      return () => {
        target.removeAttribute('aria-current');
      };
    }
  });
  const mergedItemRef = useMergedRefs(ref, liRef);
  const content = <>
      {startIcon && <span className="x78zum5 x6s0dn4 x2lah0s">{startIcon}</span>}
      {children}
    </>;
  if (isCurrent) {
    return <li ref={mergedItemRef} {...mergeProps(themeProps('breadcrumb-item', {
      variant: ctx.variant
    }), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style)} data-testid={testId} {...rest}>
        <BreadcrumbSeparator separator={ctx.separator} />
        {hasMenu ?
      // A current crumb can also open a sibling menu — the trigger keeps
      // both aria-current="page" and aria-haspopup="menu".
      <BreadcrumbMenuTrigger ref={contentRef} menu={menu} menuSize={resolvedMenuSize} variant={ctx.variant} isCurrent>
            {content}
          </BreadcrumbMenuTrigger> : <span {...{
        0: {
          className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok x1tgivj0"
        },
        1: {
          className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok xv1l7n4"
        }
      }[Number(!!isSupporting) << 0]} aria-current="page">
            {content}
          </span>}
      </li>;
  }

  // Items without isCurrent set render as links (if href) or plain spans.
  // The effect handles adding aria-current for auto-last detection.
  return <li ref={mergedItemRef} {...mergeProps(themeProps('breadcrumb-item', {
    variant: ctx.variant
  }), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style)} data-testid={testId} {...rest}>
      <BreadcrumbSeparator separator={ctx.separator} />
      {hasMenu ? <BreadcrumbMenuTrigger ref={contentRef} menu={menu} menuSize={resolvedMenuSize} variant={ctx.variant}>
          {content}
        </BreadcrumbMenuTrigger> : href != null ? <LinkComponent ref={contentRef} href={href} onClick={onClick} {...focusOutlineProps.focusVisible(itemStyles.link, isSupporting ? itemStyles.supportingLink : itemStyles.defaultLink)}>
          {content}
        </LinkComponent> : onClick != null ? <button ref={contentRef as React.RefObject<HTMLButtonElement | null>} type="button" onClick={onClick} {...focusOutlineProps.focusVisible(itemStyles.link, itemStyles.buttonReset, isSupporting ? itemStyles.supportingLink : itemStyles.defaultLink)}>
          {content}
        </button> : <span ref={contentRef} {...{
      0: {
        className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok x1tgivj0"
      },
      1: {
        className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok xv1l7n4"
      }
    }[Number(!!isSupporting) << 0]}>
          {content}
        </span>}
    </li>;
}
BreadcrumbItem.displayName = 'BreadcrumbItem';

// =============================================================================
// Menu trigger
// =============================================================================

interface BreadcrumbMenuTriggerProps {
  ref: React.Ref<HTMLElement>;
  /** The link-styled label content rendered inside the trigger button. */
  children: ReactNode;
  menu: DropdownMenuOption[] | ReactNode;
  menuSize: DropdownMenuSize;
  variant: BreadcrumbsVariant;
  isCurrent?: boolean;
}

/**
 * The link-styled `<button>` trigger + its `role="menu"` popover. Reuses the
 * DropdownMenu item pipeline (`renderDropdownItems` for arrays, the item
 * components for children) inside a `useListFocus` container that provides
 * `DropdownMenuContext` — the same wiring ContextMenu uses — so menu-item
 * definitions are portable into a breadcrumb with no rewrite.
 */
function BreadcrumbMenuTrigger({
  ref,
  children,
  menu,
  menuSize,
  variant,
  isCurrent = false
}: BreadcrumbMenuTriggerProps) {
  const menuId = useId();
  const triggerId = useId();
  const buttonRef = useRef<HTMLButtonElement>(null);
  const isSupporting = variant === 'supporting';
  const popover = usePopover({
    hasLightDismiss: true,
    hasCloseButton: false,
    hasAutoFocus: false,
    // The popup's own role="menu" is the exposed semantics; a modal dialog
    // wrapper would announce an unnamed dialog around the menu.
    role: 'none'
  });
  const closeMenu = useCallback(() => {
    popover.hide();
  }, [popover]);
  const {
    listRef,
    handleKeyDown: listNavKeyDown,
    focusFirst,
    focusItem,
    ownsEvent,
    getItems: getMenuItems
  } = useListFocus<HTMLDivElement>({
    itemSelector: MENU_ITEM_SELECTOR,
    boundarySelector: MENU_BOUNDARY_SELECTOR,
    wrap: false,
    onEscape: closeMenu
  });
  const typeahead = useTypeahead({
    getItemLabels: () => getMenuItems().map(el => el.textContent),
    onMatch: focusItem,
    getCurrentIndex: () => getMenuItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
  });
  const listKeyDown = useCallback((e: React.KeyboardEvent) => {
    // A submenu flyout renders inline inside this menu; its key events bubble
    // up here. Let that level own them — only handle events from this level.
    if (!ownsEvent(e)) {
      return;
    }
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      const focused = document.activeElement as HTMLElement | null;
      if (focused && MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')) {
        focused.click();
      }
      return;
    }
    // APG menu-button pattern: Tab closes the menu (items are tabIndex={-1}).
    if (e.key === 'Tab') {
      closeMenu();
      return;
    }
    if (typeahead.onKeyDown(e)) {
      e.preventDefault();
      return;
    }
    listNavKeyDown(e);
  }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
  const openAndFocus = useCallback(() => {
    popover.show();
    requestAnimationFrame(() => focusFirst());
  }, [popover, focusFirst]);
  const handleClick = useCallback(() => {
    if (popover.isOpen) {
      popover.hide();
    } else {
      openAndFocus();
    }
  }, [popover, openAndFocus]);
  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (!popover.isOpen) {
      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        openAndFocus();
      }
    }
  }, [popover.isOpen, openAndFocus]);
  const contextValue = useMemo<DropdownMenuContextValue>(() => ({
    closeMenu,
    menuSize
  }), [closeMenu, menuSize]);
  const menuContent = Array.isArray(menu) ? renderDropdownItems(menu) : menu;
  return <>
      <button ref={useMergedRefs(ref as React.Ref<HTMLButtonElement>, buttonRef, popover.triggerRef)} type="button" onClick={handleClick} onKeyDown={handleKeyDown} {...popover.triggerProps} id={triggerId} aria-haspopup="menu" aria-controls={menuId} aria-current={isCurrent ? 'page' : undefined} {...mergeProps(themeProps('breadcrumb-item-menu-trigger', {
      variant
    }),
    // Through mergeProps, not a second spread: a sibling stylex.props()
    // spread replaces the className themeProps() built, which is how the
    // documented breadcrumb-item-menu-trigger target came to render on
    // nothing.
    focusOutlineProps.focusVisible(itemStyles.link, itemStyles.buttonReset, isSupporting ? itemStyles.supportingLink : itemStyles.defaultLink))}>
        {children}
        <Icon icon="chevronDown"
      // 0.75rem — the 12px supporting-text box the bare glyph already
      // rendered at; `itemStyles.chevron` keeps that box on the token.
      size="xsm"
      // The chevron reads as part of the link label, so it takes the
      // trigger's link color rather than an icon color.
      color="inherit" xstyle={itemStyles.chevron} />
      </button>

      {popover.render(<div ref={listRef} id={menuId} role="menu" aria-labelledby={triggerId} onKeyDown={listKeyDown} {...mergeProps(themeProps('breadcrumb-menu'), {
      className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xuyqlj2 x1odjw0f x1fcsqxe xgory14 x9epnlk x1n97fys x87ps6o"
    })}>
          <DropdownMenuContext value={contextValue}>
            {menuContent}
          </DropdownMenuContext>
        </div>, {
      placement: 'below',
      alignment: 'start',
      xstyle: [menuStyles.popover, layerAnimations.below]
    })}
    </>;
}
BreadcrumbMenuTrigger.displayName = 'BreadcrumbMenuTrigger';