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

'use client';

/**
 * @file Token.tsx
 * @input Uses React, ReactNode, StyleXStyles
 * @output Exports Token component, TokenProps, TokenColor, TokenColorMap types
 * @position Core implementation; consumed by index.ts, tested by Token.test.tsx
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Token/TokenLink.tsx (interactive wrapper for href+onRemove)
 * - /packages/core/src/Token/Token.doc.mjs (props table, features, implementation notes)
 * - /packages/core/src/Token/Token.test.tsx (tests for new/changed behavior)
 * - /packages/core/src/Token/index.ts (exports if types change)
 * - /apps/storybook/stories/Token.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
 */
import type { ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, radiusVars, sizeVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
import { Icon } from "../Icon/index.js";
import { mergeProps } from "../utils/index.js";
import { useLinkComponent } from "../Link/useLinkComponent.js";
import { useInteractiveRole } from "../hooks/useInteractiveRole.js";
import { TokenLink } from "./TokenLink.js";
import type { BaseProps } from "../BaseProps.js";
import { themeProps } from "../utils/themeProps.js";
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
import { useTranslator } from "../i18n/index.js";
import type { TokenColorMap } from "./index.js";

// =============================================================================
// Types
// =============================================================================

/**
 * Token color type derived from TokenColorMap.
 * Extensible via module augmentation of TokenColorMap.
 */
export type TokenColor = keyof TokenColorMap;
export type TokenSize = 'sm' | 'md' | 'lg';
export interface TokenProps extends BaseProps<HTMLElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLElement>;
  /**
   * The text label displayed in the token.
   */
  label: string;
  /**
   * The size of the token.
   * @default 'md'
   */
  size?: TokenSize;
  /**
   * The color variant of the token.
   * @default 'default'
   */
  color?: TokenColor;
  /**
   * Optional icon to display before the label.
   */
  icon?: ReactNode;
  /**
   * Whether the token is disabled.
   * @default false
   */
  isDisabled?: boolean;
  /**
   * Callback when the remove (X) button is clicked.
   * When provided, a remove button is rendered.
   */
  onRemove?: (e: React.MouseEvent) => void;
  /**
   * Click handler. When provided, the token renders as a `<span>` container
   * with an invisible `<button>` inside for accessibility.
   */
  onClick?: (e: React.MouseEvent) => void;
  /**
   * Link URL. When provided, the token renders as an `<a>`.
   */
  href?: string;
  /**
   * Accessible description for the token.
   */
  description?: string;
  /**
   * Content rendered after the label (before the remove button, if present).
   */
  endContent?: ReactNode;
  /**
   * Whether to visually hide the label (still accessible to screen readers).
   * @default false
   */
  isLabelHidden?: boolean;
}

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

const styles = {
  base: {
    k1xSpc: "x3nfvp2",
    kGNEyG: "x6s0dn4",
    kOIVth: "xzye2dw",
    k8WAf4: "xt970qd",
    kMzoRj: "xc342km",
    ksu8eU: "xng3xce",
    kaIpWk: "xx3sua9",
    kMv6JI: "xjb2p0i",
    kGuDYH: "x141an7d",
    kLWn49: "x1ltkj2j",
    k63SB2: "x1e4wzip",
    khDVqt: "xuxw1ft",
    kybGjl: "x1hl2dhg",
    ks0D6T: "x193iq5w",
    kVQacm: "xb3r6kr",
    $$css: true as const
  },
  interactive: {
    kkrTdU: "x1ypdohk x16khyan",
    k1ekBW: "x12qzo2w",
    kIyJzY: "xuedmi6",
    kAMwcw: "xlr8y92",
    $$css: true as const
  },
  disabled: {
    kkrTdU: "xt0e3qv",
    kSiTet: "xbyyjgo",
    kfzvcC: "x47corl",
    $$css: true as const
  },
  removeButton: {
    k1xSpc: "x3nfvp2",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kVAEAm: "x1n2onr6",
    kmVPX3: "x1717udv",
    k71WvV: "xkd40ry",
    kkrTdU: "x1ypdohk x16khyan",
    kaIpWk: "xjspbzw",
    kzqmXN: "x1kky2od",
    kZKoxP: "xlup9mm",
    kMwMTN: "x1heor9g",
    k5JduY: "x1s928wv",
    kwXMNM: "x1j6awrg",
    kv0HGH: "x1xsm0q9",
    $$css: true as const
  }
};
const sizeStyles = {
  sm: {
    kZKoxP: "xzydfjl",
    kGuDYH: "x141an7d",
    kg3NbH: "xf314gf",
    $$css: true as const
  },
  md: {
    kZKoxP: "xrmxcn7",
    kg3NbH: "xf314gf",
    $$css: true as const
  },
  lg: {
    kZKoxP: "x102lyln",
    kg3NbH: "xf314gf",
    $$css: true as const
  }
};
const colorStyles = {
  default: {
    kWkggS: "x17x4s8c",
    kMwMTN: "x1tgivj0",
    $$css: true as const
  },
  red: {
    kWkggS: "x1cibrc5",
    kMwMTN: "x1joocv1",
    $$css: true as const
  },
  orange: {
    kWkggS: "x1e9xt6e",
    kMwMTN: "xm47u9q",
    $$css: true as const
  },
  yellow: {
    kWkggS: "x1bo7t0x",
    kMwMTN: "xdhq94a",
    $$css: true as const
  },
  green: {
    kWkggS: "x1sqjeoo",
    kMwMTN: "xltfdvo",
    $$css: true as const
  },
  teal: {
    kWkggS: "x1jtji5o",
    kMwMTN: "x9x0lbs",
    $$css: true as const
  },
  cyan: {
    kWkggS: "x1rgj867",
    kMwMTN: "x1txnczv",
    $$css: true as const
  },
  blue: {
    kWkggS: "x1o0wnni",
    kMwMTN: "x1vvqiwl",
    $$css: true as const
  },
  purple: {
    kWkggS: "x16i6n6f",
    kMwMTN: "x1m9wyeb",
    $$css: true as const
  },
  pink: {
    kWkggS: "xnpoty2",
    kMwMTN: "xiuofww",
    $$css: true as const
  },
  gray: {
    kWkggS: "xspzpui",
    kMwMTN: "xru1t7f",
    $$css: true as const
  }
};

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

/**
 * A chip/tag component for displaying entities inline.
 *
 * Renders as a `<span>` by default, `<a>` when `href` is provided, or a
 * `<span>` container with an invisible `<button>` when `onClick` is provided.
 * The invisible button pattern provides real button semantics for accessibility
 * while the container uses `:focus-within` to show focus outlines around the
 * entire token. When both `href` and `onRemove` are provided, the same
 * container pattern is used with an invisible `<a>` so the remove `<button>`
 * renders as a sibling of the link rather than nested inside it.
 *
 * @example
 * ```
 * <Token label="Tag" />
 * <Token label="Status" color="green" />
 * <Token label="Removable" onRemove={() => {}} />
 * <Token label="Clickable" onClick={() => {}} />
 * <Token label="Link" href="/path" />
 * ```
 */
export function Token({
  label,
  size = 'md',
  color = 'default',
  icon,
  isDisabled = false,
  onRemove,
  onClick,
  href,
  description,
  endContent,
  isLabelHidden = false,
  xstyle,
  className,
  style,
  'data-testid': testId,
  ref,
  ...rest
}: TokenProps) {
  const t = useTranslator();
  const LinkComponent = useLinkComponent();
  const role = useInteractiveRole({
    href,
    onClick,
    isDisabled
  });

  // When role is 'button' via context (no explicit onClick), treat as
  // if onClick was provided — the popover attaches its own handler.
  const effectiveOnClick = onClick ?? (role === 'button' ? () => {} : null);
  const removeButton = onRemove != null && <button type="button" aria-label={t('@astryx.token.remove', {
    label
  })} onClick={e => {
    e.stopPropagation();
    onRemove(e);
  }} disabled={isDisabled} {...focusOutlineProps.focusVisible(styles.removeButton)}>
      <Icon icon="close" size="xsm" color="inherit" />
    </button>;
  const content = <>
      {icon}
      <span {...{
      0: {
        className: "xb3r6kr xlyipyv xuxw1ft xeuugli"
      },
      1: {
        className: "xlyipyv xeuugli x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr x1hyvwdk xuxw1ft xc342km"
      }
    }[Number(!!isLabelHidden) << 0]}>
        {label}
      </span>
      {endContent}
      {removeButton}
    </>;
  const sharedProps = {
    'data-testid': testId,
    ...(isLabelHidden ? {
      'aria-label': label
    } : {}),
    ...(description != null ? {
      'aria-description': description
    } : {})
  };
  if (role === 'link') {
    if (onRemove == null) {
      return <LinkComponent ref={ref as React.Ref<HTMLAnchorElement>} href={href as string} {...mergeProps(themeProps('token', {
        color,
        size
      }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style)} {...rest} {...isDisabled ? {
        'aria-disabled': true
      } : {}} {...sharedProps}>
          {content}
        </LinkComponent>;
    }

    // With a remove button, the link cannot be the root — nesting a <button>
    // inside an <a> is invalid HTML (WCAG 4.1.2). Delegate to TokenLink, a
    // non-presentational wrapper that renders a <span> container with the link
    // and the remove button as siblings and wires up useClickableContainer so
    // the whole token surface activates the link (including middle-click and
    // cmd/ctrl-click to open in a new tab). Token itself stays presentational
    // (no refs/effects) per the @astryx/presentational-component rule.
    return <TokenLink ref={ref} href={href as string} isDisabled={isDisabled} LinkComponent={LinkComponent} icon={icon} endContent={endContent} removeButton={removeButton} linkStyleProps={{
      className: "xmper1u x16khyan xln7xf2 x1heor9g x1a2a7pz xb3r6kr xeuugli"
    }} labelContent={<span {...{
      0: {
        className: "xb3r6kr xlyipyv xuxw1ft xeuugli"
      },
      1: {
        className: "xlyipyv xeuugli x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr x1hyvwdk xuxw1ft xc342km"
      }
    }[Number(!!isLabelHidden) << 0]}>
            {label}
          </span>} {...mergeProps(themeProps('token', {
      color,
      size
    }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style)} {...rest} {...sharedProps} />;
  }
  if (effectiveOnClick != null) {
    const handleContainerClick = (e: React.MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.closest('button, a')) {
        return;
      }
      effectiveOnClick(e);
    };
    return <span ref={ref} onClick={isDisabled ? undefined : handleContainerClick} {...mergeProps(themeProps('token', {
      color,
      size
    }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style)} {...rest} {...sharedProps}>
        {icon}
        <button type="button" onClick={effectiveOnClick} disabled={isDisabled} className="xmper1u x16khyan xln7xf2 x1heor9g x1a2a7pz xb3r6kr xeuugli">
          <span {...{
          0: {
            className: "xb3r6kr xlyipyv xuxw1ft xeuugli"
          },
          1: {
            className: "xlyipyv xeuugli x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr x1hyvwdk xuxw1ft xc342km"
          }
        }[Number(!!isLabelHidden) << 0]}>
            {label}
          </span>
        </button>
        {endContent}
        {removeButton}
      </span>;
  }
  return <span ref={ref} {...mergeProps(themeProps('token', {
    color,
    size
  }), stylex.props(styles.base, sizeStyles[size], colorStyles[color], isDisabled && styles.disabled, xstyle), className, style)} {...rest} {...sharedProps}>
      {content}
    </span>;
}
Token.displayName = 'Token';