import { cva } from 'class-variance-authority';
import { type ReactNode, useCallback, useState } from 'react';
import { type LayoutChangeEvent, Pressable, type StyleProp, View, type ViewStyle } from 'react-native';
import { CloseLine as X } from 'rn-motion-ui-icons/icons/close-line';
import { More1Line as MoreHorizontal } from 'rn-motion-ui-icons/icons/more-1-line';
import { usePressState } from '../../../hooks/use-press-state';
import { useReducedMotion } from '../../../hooks/use-reduced-motion';
import { cn } from '../../../lib/cn';
import { SPRING_PRESS, springLayout } from '../../../lib/ease';
import { MotiView } from '../../../moti/components/view';
import { AnimatePresence } from '../../../moti/presence/animate-presence';
import { TIMING_INSTANT } from '../../../theme/motion';
import { ThemedIcon } from '../../icon/themed-icon';
import { Text } from '../../typography/Text/text';

export type OverflowActionsSize = 'sm' | 'md';

export type OverflowActionItem = {
  id: string;
  label: ReactNode;
  icon?: ReactNode;
  onPress?: () => void;
  disabled?: boolean;
  accessibilityLabel?: string;
  testID?: string;
};

// biome-ignore lint/style/useExportsLast: props type before spring constants — collocated for readability
export type OverflowActionsProps = {
  primaryActions: OverflowActionItem[];
  overflowActions: OverflowActionItem[];
  expanded?: boolean;
  defaultExpanded?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
  onAction?: (item: OverflowActionItem) => void;
  collapseOnAction?: boolean;
  size?: OverflowActionsSize;
  /** Toggle a11y label when collapsed. */
  openLabel?: string;
  /** Toggle a11y label when expanded. */
  closeLabel?: string;
  /** Additional UniWind class names merged onto the outer row. */
  className?: string;
  style?: StyleProp<ViewStyle>;
  /**
   * Root testID. Every action derives `-item-<id>` from it and the toggle takes
   * `-toggle`. An action's own `testID` wins over its derived one. The offscreen
   * measurer that duplicates the overflow actions stays unnamed either way, so a
   * query matches the visible button only.
   */
  testID?: string;
  /** Replace the open-state close icon. Default: `<X size={14|16} color={iconOnPrimary} />`. */
  closeIcon?: ReactNode;
  /** Replace the closed-state overflow trigger icon. Default: `<MoreHorizontal size={14|16} color={iconOnPrimary} />`. */
  triggerIcon?: ReactNode;
};

// Softer than the app defaults so the group stays attached to the toggle.
const SHELL_SPRING = { type: 'spring', stiffness: 220, damping: 17, mass: 0.85 } as const;
/** Reveal clip rides `springLayout` on the same spring as `SHELL_SPRING`. */
const REVEAL_LAYOUT = springLayout(SHELL_SPRING);

// cva drives the static per-size styling; class strings stay static literals.
// No flex `gap` here: the overflow clip is an always-mounted flex child, so a
// track gap would render on both sides of it even at width 0 (phantom spacing
// when collapsed). Inter-segment spacing is driven by explicit margins instead.
const group = cva('flex-row items-center', {
  variants: { size: { sm: 'gap-1', md: 'gap-1.5' } },
  defaultVariants: { size: 'md' },
});
const action = cva(cn('flex-row shrink-0 items-center justify-center rounded-full bg-surface-3'), {
  variants: { size: { sm: 'h-8 gap-1.5 px-3', md: 'h-9 gap-2 px-3.5' } },
  defaultVariants: { size: 'md' },
});
const toggle = cva('shrink-0 items-center justify-center rounded-full bg-primary', {
  variants: { size: { sm: 'h-8 w-8', md: 'h-9 w-9' } },
  defaultVariants: { size: 'md' },
});

export function OverflowActions({
  primaryActions,
  overflowActions,
  expanded,
  defaultExpanded = false,
  onExpandedChange,
  onAction,
  collapseOnAction = false,
  size = 'md',
  openLabel = 'Show extra actions',
  closeLabel = 'Hide extra actions',
  className,
  style,
  testID,
  closeIcon,
  triggerIcon,
}: OverflowActionsProps) {
  const reduce = useReducedMotion();
  const [internal, setInternal] = useState(defaultExpanded);
  const [togglePressed, setTogglePressed] = useState(false);
  // Natural width of the overflow group, measured offscreen so the clip has an
  // explicit target to spring toward (0 while collapsed → this while expanded).
  const [overflowWidth, setOverflowWidth] = useState(0);
  const controlled = expanded !== undefined;
  const isExpanded = controlled ? expanded : internal;
  const gap = size === 'sm' ? 4 : 6;

  const setExpanded = useCallback(
    (next: boolean) => {
      if (!controlled) setInternal(next);
      onExpandedChange?.(next);
    },
    [controlled, onExpandedChange],
  );

  const handleAction = useCallback(
    (item: OverflowActionItem) => {
      item.onPress?.();
      onAction?.(item);
      if (collapseOnAction) setExpanded(false);
    },
    [onAction, collapseOnAction, setExpanded],
  );

  const handleOverflowLayout = useCallback((e: LayoutChangeEvent) => setOverflowWidth(e.nativeEvent.layout.width), []);
  const handleTogglePressIn = useCallback(() => setTogglePressed(true), []);
  const handleTogglePressOut = useCallback(() => setTogglePressed(false), []);
  const handleTogglePress = useCallback(() => setExpanded(!isExpanded), [setExpanded, isExpanded]);

  const spring = reduce ? TIMING_INSTANT : SHELL_SPRING;

  return (
    <View testID={testID} className={cn('flex-row self-start', className)} style={style}>
      <View className="relative flex-row items-center overflow-hidden rounded-full bg-muted p-1">
        <View className={group({ size })}>
          {primaryActions.map((item) => (
            <ActionButton
              key={item.id}
              item={item}
              size={size}
              reduce={reduce}
              onAction={handleAction}
              testID={item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined)}
            />
          ))}
        </View>

        {/* Animated clip: the group is measured offscreen at natural width, then
            the visible clip springs its width + left margin between 0 (collapsed)
            and that width (expanded). Flex reflows each frame, so the toggle to
            the right glides over smoothly instead of teleporting. */}
        <MotiView
          animate={{ opacity: isExpanded ? 1 : 0 }}
          transition={spring}
          layout={reduce ? undefined : REVEAL_LAYOUT}
          className="overflow-hidden"
          style={{ width: isExpanded ? overflowWidth : 0, marginLeft: isExpanded ? gap : 0 }}
        >
          {/* Offscreen measurer at natural size — feeds the spring its target.
              aria-hidden keeps the duplicate buttons out of the accessibility tree
              so queries like findByRole('button', { name }) don't match twice, and
              these get no testID for the same reason: aria-hidden is invisible to
              getByTestId, so a named measurer would match alongside the real row. */}
          <View
            aria-hidden={true}
            onLayout={handleOverflowLayout}
            className={cn('pointer-events-none absolute top-0 left-0 opacity-0', group({ size }))}
          >
            {overflowActions.map((item) => (
              <ActionButton key={item.id} item={item} size={size} reduce={reduce} onAction={handleAction} />
            ))}
          </View>
          <View className={cn(group({ size }), 'self-start')}>
            {overflowActions.map((item) => (
              <ActionButton
                key={item.id}
                item={item}
                size={size}
                reduce={reduce}
                onAction={handleAction}
                testID={item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined)}
              />
            ))}
          </View>
        </MotiView>

        <MotiView animate={{ scale: togglePressed && !reduce ? 0.96 : 1 }} transition={SPRING_PRESS} style={{ marginLeft: gap }}>
          <Pressable
            accessibilityRole="button"
            aria-expanded={isExpanded}
            accessibilityLabel={isExpanded ? closeLabel : openLabel}
            onPressIn={handleTogglePressIn}
            onPressOut={handleTogglePressOut}
            onPress={handleTogglePress}
            className={toggle({ size })}
            testID={testID ? `${testID}-toggle` : undefined}
          >
            <AnimatePresence exitBeforeEnter={true}>
              <MotiView
                key={isExpanded ? 'close' : 'open'}
                from={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6 }}
                transition={{ type: 'timing', duration: reduce ? 100 : 180 }}
              >
                {isExpanded
                  ? (closeIcon ?? <ThemedIcon icon={X} variant="neutral" size={size === 'sm' ? 14 : 16} />)
                  : (triggerIcon ?? <ThemedIcon icon={MoreHorizontal} variant="neutral" size={size === 'sm' ? 14 : 16} />)}
              </MotiView>
            </AnimatePresence>
          </Pressable>
        </MotiView>
      </View>
    </View>
  );
}

export type ActionButtonProps = {
  item: OverflowActionItem;
  size: OverflowActionsSize;
  reduce: boolean;
  onAction: (item: OverflowActionItem) => void;
  /**
   * Already derived by the caller rather than built from a root here, because the
   * offscreen measurer renders the same actions a second time and must stay
   * unnamed — two nodes under one testID would make every query ambiguous.
   */
  testID?: string;
};

function ActionButton({ item, size, reduce, onAction, testID }: ActionButtonProps) {
  const { pressed, pressHandlers } = usePressState();
  const handlePress = useCallback(() => onAction(item), [onAction, item]);

  return (
    <MotiView animate={{ scale: pressed && !reduce ? 0.97 : 1 }} transition={SPRING_PRESS}>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={item.accessibilityLabel ?? (typeof item.label === 'string' ? item.label : undefined)}
        aria-disabled={Boolean(item.disabled)}
        disabled={item.disabled}
        {...pressHandlers}
        onPress={handlePress}
        className={action({ size })}
        style={{ opacity: item.disabled ? 0.45 : 1 }}
        testID={testID}
      >
        {item.icon === null ? null : item.icon}
        {typeof item.label === 'string' || typeof item.label === 'number' ? (
          <Text weight="medium" className="text-foreground" style={{ fontSize: size === 'sm' ? 12 : 14 }}>
            {item.label}
          </Text>
        ) : (
          item.label
        )}
      </Pressable>
    </MotiView>
  );
}