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

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

/**
 * @file TabList.tsx
 * @input Uses React, StyleX, TabListContext, useListFocus, useKeyboardHint,
 *   useScrollOverflow, Icon
 * @output Exports TabList component, TabListProps and TabListOverflow types
 * @position Tab strip wrapper; provides TabListContext to Tab and TabMenu
 *   children. A `<nav>` landmark by default; speaks the WAI-ARIA tabs pattern
 *   where the caller asks for it with `role="tablist"`. Owns
 *   roving-tabindex keyboard navigation (Arrow/Home/End) across the tab
 *   strip via the shared useListFocus hook so it is a single Tab stop, and
 *   owns horizontal scrolling when the tabs are wider than the strip.
 *
 * SYNC: When modified, update:
 * - /packages/core/src/TabList/TabList.doc.mjs
 * - /packages/core/src/TabList/index.ts
 * - /packages/core/src/TabList/TabList.test.tsx
 * - /packages/cli/assets/templates/blocks/components/TabList/ (showcase blocks)
 */
import React, { useCallback, useEffect, useMemo, useRef, type AriaRole, type ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { borderVars, colorVars, durationVars, easeVars, focusVars, radiusVars, shadowVars, sizeVars, spacingVars } from "../theme/tokens.stylex.js";
import type { BaseProps } from "../BaseProps.js";
import { TabListContext } from "./TabListContext.js";
import type { TabListSize } from "./TabListContext.js";
import { useSize } from "../SizeContext/SizeContext.js";
import { mergeProps, rtlStyles } from "../utils/index.js";
import { useListFocus } from "../hooks/useListFocus.js";
import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
import { useScrollOverflow } from "../hooks/useScrollOverflow.js";
import { isRtlElement } from "../hooks/isRtlElement.js";
import { Icon } from "../Icon/index.js";
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
import { themeProps } from "../utils/themeProps.js";
import { observeResize } from "../utils/sharedResizeObserver.js";
import { devWarn } from "../utils/devWarning.js";
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
import { useTranslator } from "../i18n/index.js";
import { useMergedRefs } from "../hooks/useMergedRefs.js";
/**
 * Selector matching the focusable stops in the tab strip: every Tab
 * (`[data-tab-value]`) and every TabMenu trigger (`[data-tab-menu]`),
 * in DOM order. Disabled stops are filtered out by the handler.
 */
const TAB_STOP_SELECTOR = '[data-tab-value],[data-tab-menu]';
function preventFocus(e: React.MouseEvent) {
  e.preventDefault();
}

/** Fraction of the visible strip an arrow press scrolls. */
const SCROLL_PAGE_RATIO = 0.8;

/**
 * How a strip narrower than its tabs behaves.
 *
 * - `'auto'` — the component picks the strategy. Today that is always
 *   `'scroll'`.
 * - `'scroll'` — the tabs scroll horizontally. Every tab stays a tab.
 * - `'visible'` — no overflow handling: tabs keep their intrinsic widths and
 *   spill out of the strip, as they did before overflow existed.
 */
export type TabListOverflow = 'auto' | 'scroll' | 'visible';
export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
  ref?: React.Ref<HTMLElement>;
  /**
   * The currently selected tab value.
   */
  value: string;
  /**
   * Callback fired when a tab is selected.
   */
  onChange: (value: string) => void;
  /**
   * Size of the tab hover targets. Uses the same element size tokens
   * as Button and TextInput (`sm` = 28px, `md` = 32px, `lg` = 36px).
   * @default 'md'
   */
  size?: TabListSize;
  /**
   * Layout mode for tab sizing.
   * - `'hug'` (default): each tab hugs its content width.
   * - `'fill'`: tabs stretch equally to fill the container width.
   * @default 'hug'
   */
  layout?: 'hug' | 'fill';
  /**
   * Whether to show a bottom divider under the tab list.
   * @default false
   */
  hasDivider?: boolean;
  /**
   * Bleeds the strip out to its container's content edges.
   *
   * Both halves are computed from the `--container-padding-*` custom
   * properties a padded Layout container publishes. The strip's box is pulled
   * out through the container's inline padding, so a `hasDivider` underline —
   * or the header's own divider, when the strip is docked on it — spans the
   * full content width. The strip then pads back in by whatever that bleed
   * exceeds a stop's own inline padding, so the first and last label still
   * land on the container's content inset rather than 4px short of it.
   *
   * Outside a padded container the properties are unset, the pad-back clamps
   * to zero, and the strip is left exactly as it was. Block-edge docking stays
   * with the surrounding layout because it cannot be detected through nested
   * wrappers without pulling a mid-content strip into its siblings.
   * @default false
   */
  isFullBleed?: boolean;
  /**
   * ARIA role for the strip.
   *
   * `"tablist"` asks for the WAI-ARIA tabs pattern: `role="tablist"` /
   * `role="tab"` and `aria-selected`, with each tab pointing at the panel it
   * controls via its `panelId`. Only tabs may live in a tablist strip, and a
   * tab does not navigate — an `href` is ignored there.
   *
   * Left unset, the strip is a `<nav>` landmark marking the current tab with
   * `aria-current`. Any other value is passed through to the element
   * unchanged.
   */
  role?: AriaRole;
  /**
   * What happens when the tabs are wider than the strip.
   *
   * `'auto'` lets the component choose; today it always scrolls. `'scroll'`
   * scrolls the tabs horizontally, with edge fades and — for pointers that
   * can hover — arrow affordances. `'visible'` turns overflow handling off and
   * lets the tabs spill out of the strip.
   *
   * The selected tab is always scrolled back into view.
   * @default 'auto'
   */
  overflow?: TabListOverflow;
  /**
   * Tab and TabMenu children.
   */
  children: ReactNode;
}

/**
 * A scroll container clips at its padding box, and two things a tab paints sit
 * outside its own box: the focus ring (offset + width) and the selected
 * indicator, which `--_tab-indicator-bottom` pushes further down when a
 * divider rail is reserved. The strip pads by that much and takes the padding
 * straight back off with a negative margin, so nothing is clipped and the tabs
 * stay exactly where they were.
 *
 * A bleed is not free, though. The padding is real geometry: the strip's
 * border box sticks out of the TabList's, and any ancestor that scrolls counts
 * that as something to scroll to. So the ring's share of the bleed is taken
 * only while a ring is actually drawn inside the strip -- the same
 * `:has(:focus-visible)` condition that draws it -- and at rest the strip is
 * exactly as wide and as tall as the TabList, as it was before the strip could
 * scroll. The indicator's share is always taken, because the indicator is
 * always drawn.
 *
 * Turning the bleed on moves nothing: padding and negative margin cancel, so
 * the border box grows outwards and the content stays put.
 */
const RING_BLEED = `calc(${focusVars['--focus-outline-width']} + ${focusVars['--focus-outline-offset']})`;
const BLEED_VAR = '--_tab-strip-bleed';
const BLEED = `var(${BLEED_VAR})`;

/**
 * A stop's own inline padding, restated here because a full-bleed strip has to
 * subtract it: the strip pads back in only the part of the container's padding
 * the stop does not already supply, so the edge label lands on the content
 * inset. Kept in step with `Tab`/`TabMenu`'s `paddingInline` by hand — the
 * import would be circular.
 */
const STOP_INLINE_PADDING = spacingVars['--spacing-3'];
const EDGE_PAD_START = `max(var(--container-padding-inline-start, 0px) - ${STOP_INLINE_PADDING}, 0px)`;
const EDGE_PAD_END = `max(var(--container-padding-inline-end, 0px) - ${STOP_INLINE_PADDING}, 0px)`;
const INDICATOR_BLEED = 'calc(-1 * var(--_tab-indicator-bottom, -1px))';
const BLOCK_END_BLEED = `max(${BLEED}, ${INDICATOR_BLEED})`;

/** How far the edge fade runs; wide enough to sit under an arrow. */
const FADE_WIDTH = spacingVars['--spacing-8'];

/**
 * Where the fade turns fully opaque, and — the same distance, for the same
 * reason — how far a revealed stop is kept clear of the edge. Declared as
 * scroll-padding so the browser's own focus scrolling uses it too, and read
 * back from the computed style so the arithmetic below has one source of
 * truth with the CSS.
 */
const SCROLL_EDGE_INSET = `calc(${BLEED} + ${FADE_WIDTH})`;

/**
 * The fade reaches transparent at the strip's *own* edge, not at the bleed
 * edge — otherwise the scroll container paints tabs past the TabList's box,
 * past a divider rail, and past the scroll arrow that caps that edge. Masking
 * the bleed costs nothing: only a faded edge is masked, and a stop at a faded
 * edge never holds focus, so the bleed is still there when the ring needs it.
 */
const FADE_FROM_START = `linear-gradient(to right, transparent ${BLEED}, black ${SCROLL_EDGE_INSET})`;
const FADE_FROM_END = `linear-gradient(to left, transparent ${BLEED}, black ${SCROLL_EDGE_INSET})`;
const styles = {
  nav: {
    k1xSpc: "x78zum5",
    kGNEyG: "x1qjc9v5",
    kOIVth: "x1lsbc85",
    ks0D6T: "x193iq5w",
    k7Eaqz: "xeuugli",
    kVAEAm: "x1n2onr6",
    $$css: true as const
  },
  fill: {
    kzqmXN: "xh8yej3",
    $$css: true as const
  },
  divider: {
    kt9PQ7: "x92x3c3",
    kfdmCh: "x1q0q8m5",
    kL6WhQ: "xw8gpjh",
    kGO01o: "xy143xn",
    "--_tab-indicator-bottom": "xficto1",
    $$css: true as const
  },
  strip: {
    k1xSpc: "x78zum5",
    kGNEyG: "x1qjc9v5",
    kOIVth: "x14kbac9",
    kzQI83: "x1iyjqo2",
    kmuXW: "xs83m0k",
    k7Eaqz: "xeuugli",
    kSGwAc: "xqcrz7y",
    $$css: true as const
  },
  stripScroll: {
    kXHlph: "xw2csxc",
    kORKVm: "x10wlt62",
    kvh3hx: "x7p5m3t",
    katHQp: "x1xif8ns",
    k5wCbM: "x1rohswg",
    khEr5k: "xkcv6ua xg83hb1",
    "--_tab-strip-bleed": "x78b515 x158n88w",
    kLKAdn: "xlr2r7p",
    keoZOQ: "xmqyaqf",
    kGO01o: "xwhchk8",
    k1K539: "xlgak1e",
    kg3NbH: "x1kpkw9v",
    kUOVxO: "xi5l473",
    kX1K2I: "xw4ya9i",
    k1ekBW: "x157bb6t",
    kIyJzY: "x80gvsz x12w9bfk",
    kAMwcw: "xlr8y92",
    $$css: true as const
  },
  fullBleedStrip: {
    kZCmMZ: "xwb75os",
    kwRFfy: "xtvv6yu",
    $$css: true as const
  },
  fadeStart: {
    kX1K2I: "x1hua2o0 x1nwey30",
    $$css: true as const
  },
  fadeEnd: {
    kX1K2I: "xoj6v2h x1rxa4r8",
    $$css: true as const
  },
  fadeBoth: {
    kX1K2I: "xq05pg6",
    $$css: true as const
  },
  arrow: {
    kVAEAm: "x10l6tqk",
    k87sOh: "x13vifvy",
    k1xSpc: "x1s85apg xqwu39o",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kmVPX3: "x1717udv",
    kMzoRj: "xc342km",
    ksu8eU: "xng3xce",
    kaIpWk: "xjspbzw",
    kWkggS: "x1prclbq",
    kGVxlE: "x1i5ehqx",
    kMwMTN: "xv1l7n4 x9o1np9",
    kkrTdU: "x1ypdohk x16khyan",
    $$css: true as const
  },
  arrowStart: {
    kLqNvP: "x1o0tod",
    $$css: true as const
  },
  arrowEnd: {
    kt4wiu: "xtijo5x",
    $$css: true as const
  },
  fullBleed: {
    keTefX: "xojxgvx",
    k71WvV: "x1fcf3bl",
    ks0D6T: "x1x1rfll",
    kzqmXN: "xx6qvi6",
    $$css: true as const
  }
};
const arrowSizeStyles = {
  sm: {
    kzqmXN: "x1fvqzum",
    kZKoxP: "x6k0iem",
    $$css: true as const
  },
  md: {
    kzqmXN: "x805d0l",
    kZKoxP: "x1ueg155",
    $$css: true as const
  },
  lg: {
    kzqmXN: "x1m747yf",
    kZKoxP: "xssyfek",
    $$css: true as const
  }
};

/**
 * Tab navigation wrapper. Provides context for value/onChange/size
 * to Tab and TabMenu children.
 *
 * @example
 * ```
 * <TabList value={activeTab} onChange={setActiveTab}>
 *   <Tab value="home" label="Home" />
 *   <Tab value="settings" label="Settings" />
 *   <TabMenu label="More">
 *     <Tab value="analytics" label="Analytics" />
 *     <Tab value="reports" label="Reports" />
 *   </TabMenu>
 * </TabList>
 * ```
 */
export function TabList({
  ref,
  value,
  onChange,
  size: sizeProp,
  layout = 'hug',
  hasDivider = false,
  isFullBleed = false,
  role,
  overflow = 'auto',
  xstyle,
  className,
  style,
  children,
  onKeyDown: onKeyDownProp,
  onFocus: onFocusProp,
  onBlur: onBlurProp,
  'aria-label': ariaLabelFromProps,
  'aria-labelledby': ariaLabelledBy,
  'aria-orientation': _ariaOrientation,
  [EDGE_COMP_ATTR]: _edgeCompAttr,
  ...restProps
}: TabListProps) {
  const t = useTranslator();
  const ariaLabel = ariaLabelFromProps ?? t('@astryx.tabList.label');
  const size = useSize(sizeProp, 'md');
  const hasScroll = overflow !== 'visible';
  const stripRef = useRef<HTMLDivElement | null>(null);
  // Only an asserted `role="tablist"` switches the pattern. Left unset the
  // strip is the `<nav>` it has always been, and every other role passes
  // through to the element untouched.
  const isTabList = role === 'tablist';

  // Roving-tabindex keyboard navigation across the tab strip via the shared
  // hook. Under the navigation pattern `orientation: 'both'` accepts both
  // arrow axes per the WAI-ARIA APG allowance for tab strips
  // (ArrowRight/ArrowDown advance, ArrowLeft/ArrowUp retreat). A tablist
  // reports itself as horizontal, so there the strip takes only the
  // horizontal arrows and leaves ArrowUp and ArrowDown to scroll the page. We
  // do not set `aria-orientation` on the `<nav>`: that attribute is invalid on
  // the navigation role and triggers an axe `aria-allowed-attr` violation.
  //
  // `hasRovingTabIndex` makes the hook own the single tab stop: it stamps
  // tabindex 0/-1, repairs the stop on mount and as stops mount/unmount or
  // toggle disabled, and -- via `handleFocus` on the nav -- keeps the stop in
  // sync after clicks or programmatic focus. Individual Tabs still render
  // `tabIndex={isSelected ? 0 : -1}` (see Tab.tsx) as the initial source of
  // truth; the hook's repair preserves an existing tab stop and only promotes
  // the first enabled stop when none is tabbable.
  const {
    listRef,
    handleKeyDown,
    handleFocus
  } = useListFocus<HTMLElement>({
    itemSelector: TAB_STOP_SELECTOR,
    orientation: isTabList ? 'horizontal' : 'both',
    hasRovingTabIndex: true
  });
  const {
    hintElement,
    onKeyDown: onHintKeyDown,
    onFocus: onHintFocus,
    onBlur: onHintBlur
  } = useKeyboardHint();
  const {
    scrollRef,
    overflowStart,
    overflowEnd
  } = useScrollOverflow();
  const attachStrip = useCallback((el: HTMLDivElement | null) => {
    stripRef.current = el;
    scrollRef(hasScroll ? el : null);
  }, [hasScroll, scrollRef]);
  const revealStop = useCallback((stop: HTMLElement | null) => {
    const strip = stripRef.current;
    if (!hasScroll || !strip || !stop) {
      return;
    }
    const stripBox = strip.getBoundingClientRect();
    const stopBox = stop.getBoundingClientRect();
    const inset = parseFloat(getComputedStyle(strip).scrollPaddingLeft) || 0;
    const pastEnd = stopBox.right - (stripBox.right - inset);
    const pastStart = stopBox.left - (stripBox.left + inset);
    // A stop wider than the space kept clear cannot be shown whole, so show
    // its reading start, the way `scrollIntoView({inline: 'nearest'})` does.
    const tooWide = stopBox.width > stripBox.width - 2 * inset;
    const delta = tooWide ? isRtlElement(strip) ? pastEnd : pastStart : pastEnd > 0 ? pastEnd : pastStart < 0 ? pastStart : 0;
    if (delta !== 0) {
      // Not an animation: the strip has to arrive already showing the right
      // tab, so this overrides the CSS smooth behaviour arrow presses use.
      strip.scrollBy({
        left: delta,
        behavior: 'instant'
      });
    }
  }, [hasScroll]);
  const revealSelectedTab = useCallback(() => {
    const strip = stripRef.current;
    if (!strip) {
      return;
    }
    revealStop(Array.from(strip.querySelectorAll<HTMLElement>('[data-tab-value]')).find(el => el.dataset.tabValue === value) ?? null);
  }, [revealStop, value]);

  // Both reveals below reach the callback through a ref instead of depending
  // on it: its identity also changes with `overflow`, and that is not a reason
  // to scroll anything.
  const revealSelectedTabRef = useRef(revealSelectedTab);
  useEffect(() => {
    revealSelectedTabRef.current = revealSelectedTab;
  }, [revealSelectedTab]);

  // The tab you are on has to be visible. Selection can move without focus —
  // on mount, or when the host sets `value` itself — and neither scrolls the
  // strip the way clicking or arrowing to a tab does. The check is what makes
  // a selection change the trigger, rather than the effect happening to run.
  const revealedValueRef = useRef<string | null>(null);
  useEffect(() => {
    if (revealedValueRef.current === value) {
      return;
    }
    revealedValueRef.current = value;
    revealSelectedTabRef.current();
  }, [value]);

  // ...and it has to stay visible when the strip is what moved. A strip that
  // fitted at one width can hide the selected tab at a narrower one, and no
  // prop changes when that happens. This one re-reveals the same selection by
  // design, which is why the check above sits in the effect rather than in
  // `revealSelectedTab`.
  //
  // The wrapper is observed rather than the strip because the shared observer
  // keeps one callback per element and `useScrollOverflow` already holds the
  // strip's.
  useEffect(() => {
    const root = listRef.current;
    if (!hasScroll || !root) {
      return;
    }
    const onResize = () => revealSelectedTabRef.current();
    return observeResize(root, onResize);
  }, [hasScroll, listRef]);
  const scrollByPage = useCallback((direction: -1 | 1) => {
    const strip = stripRef.current;
    if (!strip) {
      return;
    }
    // Under RTL the scroll axis is inverted, so flip the physical delta.
    const rtlSign = isRtlElement(strip) ? -1 : 1;
    strip.scrollBy({
      left: rtlSign * direction * strip.clientWidth * SCROLL_PAGE_RATIO
    });
  }, []);
  const scrollToStart = useCallback(() => scrollByPage(-1), [scrollByPage]);
  const scrollToEnd = useCallback(() => scrollByPage(1), [scrollByPage]);
  const contextValue = useMemo(() => ({
    value,
    onChange,
    size,
    layout,
    pattern: isTabList ? 'tabs' as const : 'nav' as const
  }), [value, onChange, size, layout, isTabList]);
  const handleRootKeyDown = useCallback((e: React.KeyboardEvent<HTMLElement>) => {
    onKeyDownProp?.(e);
    if (e.defaultPrevented) {
      return;
    }
    onHintKeyDown(e);
    handleKeyDown(e);
  }, [onKeyDownProp, onHintKeyDown, handleKeyDown]);
  const handleRootFocus = useCallback((e: React.FocusEvent<HTMLElement>) => {
    onFocusProp?.(e);
    if (e.defaultPrevented) {
      return;
    }
    onHintFocus(e);
    handleFocus(e);
    // The browser scrolls a focused element into view only when it is
    // entirely outside the scrollport, so arrowing onto a half-visible stop
    // leaves it cut off under the fade. Finish the job it started.
    revealStop(e.target.closest(TAB_STOP_SELECTOR));
  }, [onFocusProp, onHintFocus, handleFocus, revealStop]);
  const handleRootBlur = useCallback((e: React.FocusEvent<HTMLElement>) => {
    onBlurProp?.(e);
    if (e.defaultPrevented) {
      return;
    }
    onHintBlur(e);
  }, [onBlurProp, onHintBlur]);

  // `role="tablist"` owns only tabs, so anything else in the strip is invalid
  // markup. Dev-only, and only under the asserted role — nothing else in the
  // component reads the rendered DOM.
  const hasWarnedContentRef = useRef(false);
  useEffect(() => {
    const strip = stripRef.current;
    if (process.env.NODE_ENV === 'production' || !isTabList || !strip || hasWarnedContentRef.current) {
      return;
    }
    const stranger = Array.from(strip.children).find(child => child.getAttribute('role') !== 'tab');
    if (stranger) {
      hasWarnedContentRef.current = true;
      devWarn('TabList', `role="tablist" owns only tabs, but the strip contains a <${stranger.tagName.toLowerCase()}> that is not one. ` + 'Render menus and other controls outside the strip, or drop the role for the navigation pattern.');
    }
    // No dependency list: the check is on rendered DOM, which can change
    // without any prop this component could watch.
  });
  const fadeStyle = !hasScroll ? null : overflowStart && overflowEnd ? styles.fadeBoth : overflowStart ? styles.fadeStart : overflowEnd ? styles.fadeEnd : null;

  // A tablist is not navigation, so the landmark element is only right under
  // the navigation pattern. The role is fixed by a prop rather than by what
  // the strip happens to hold, so this is settled once at the callsite.
  const Wrapper = isTabList ? 'div' : 'nav';
  return <TabListContext value={contextValue}>
      <Wrapper ref={useMergedRefs(ref, listRef)} {...restProps} role={isTabList ? undefined : role} aria-label={isTabList ? undefined : ariaLabel} aria-labelledby={isTabList ? undefined : ariaLabelledBy} onKeyDown={handleRootKeyDown} onFocus={handleRootFocus} onBlur={handleRootBlur} {...{
      [EDGE_COMP_ATTR]: ''
    }} {...mergeProps(themeProps('tab-list', {
      size
    }), stylex.props(styles.nav, layout === 'fill' && styles.fill, hasDivider && styles.divider, isFullBleed && styles.fullBleed, xstyle), className, style)}>
        <div ref={attachStrip} role={isTabList ? 'tablist' : undefined} aria-label={isTabList ? ariaLabel : undefined}
      // The name belongs to whichever element carries the widget role.
      aria-labelledby={isTabList ? ariaLabelledBy : undefined} {...mergeProps(themeProps('tab-strip'), stylex.props(styles.strip, hasScroll && styles.stripScroll, isFullBleed && styles.fullBleedStrip, fadeStyle))}>
          {children}
        </div>
        {hasScroll && overflowStart && <button type="button" aria-hidden="true" tabIndex={-1}
      // Nothing hidden from assistive technology should end up holding
      // focus, and a click would put it here.
      onMouseDown={preventFocus} onClick={scrollToStart} {...mergeProps(themeProps('tab-scroll-button'), focusOutlineProps.focusVisible(styles.arrow, styles.arrowStart, arrowSizeStyles[size]))}>
            <Icon icon="chevronLeft" size="sm" color="inherit" xstyle={rtlStyles.mirror} />
          </button>}
        {hasScroll && overflowEnd && <button type="button" aria-hidden="true" tabIndex={-1} onMouseDown={preventFocus} onClick={scrollToEnd} {...mergeProps(themeProps('tab-scroll-button'), focusOutlineProps.focusVisible(styles.arrow, styles.arrowEnd, arrowSizeStyles[size]))}>
            <Icon icon="chevronRight" size="sm" color="inherit" xstyle={rtlStyles.mirror} />
          </button>}
        {hintElement}
      </Wrapper>
    </TabListContext>;
}
TabList.displayName = 'TabList';