import { forwardRef, type ReactNode } from 'react';
import { Text, View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
import {
  ButtonRoot,
  dataAttributes,
  mergeDataAttributes,
  type IButtonProps,
  useButtonContext,
} from '@cdx-ui/primitives';
import type { ForgeIcon } from '@cdx-ui/icons';
import { cn } from '@cdx-ui/utils';
import { Icon, type IconProps } from '../Icon';
import {
  quickActionButtonGlyphVariants,
  quickActionButtonIndicatorVariants,
  quickActionButtonLabelVariants,
  quickActionButtonRootVariants,
  type QuickActionButtonVariantProps,
} from './styles';

// =============================================================================
// ROOT
// =============================================================================

export interface QuickActionButtonProps extends PressableProps, IButtonProps {
  className?: string;
  children?: ReactNode;
}

const QuickActionButtonRoot = forwardRef<View, QuickActionButtonProps>(
  ({ className, style, children, accessibilityRole = 'button', ...props }, ref) => (
    <ButtonRoot
      ref={ref}
      accessibilityRole={accessibilityRole}
      className={cn(quickActionButtonRootVariants(), className)}
      style={style}
      {...props}
      {...mergeDataAttributes(props, dataAttributes({ slot: 'quick-action-button' }))}
    >
      {children}
    </ButtonRoot>
  ),
);
QuickActionButtonRoot.displayName = 'QuickActionButton';

// =============================================================================
// INDICATOR
// Circular container. Auto-rendered by `QuickActionButton.Icon` in standard usage.
// Exposed as a compound member for Code Connect parity and custom compositions.
// =============================================================================

export interface QuickActionButtonIndicatorProps extends ViewProps {
  className?: string;
  children?: ReactNode;
}

const QuickActionButtonIndicator = forwardRef<View, QuickActionButtonIndicatorProps>(
  ({ className, style, children, ...props }, ref) => {
    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
    return (
      <View
        ref={ref}
        className={cn(quickActionButtonIndicatorVariants(), className)}
        style={style}
        {...props}
        {...mergeDataAttributes(
          props,
          dataAttributes({
            slot: 'quick-action-button-indicator',
            hover,
            focus,
            active,
            disabled,
            focusVisible,
          }),
        )}
      >
        {children}
      </View>
    );
  },
);
QuickActionButtonIndicator.displayName = 'QuickActionButton.Indicator';

// =============================================================================
// ICON
// Renders the Indicator circle + icon glyph as one convenient sub-component.
// This is the primary way consumers add the icon to a QuickActionButton.
// =============================================================================

export interface QuickActionButtonIconProps {
  /** Forge icon component to render inside the circular indicator. */
  as: ForgeIcon;
  /** Applied to the icon glyph, not the indicator circle. */
  className?: IconProps['className'];
  /** Applied to the indicator circle wrapper. */
  indicatorClassName?: string;
}

function QuickActionButtonIcon({
  as: IconComponent,
  className,
  indicatorClassName,
}: QuickActionButtonIconProps) {
  return (
    <QuickActionButtonIndicator className={indicatorClassName}>
      <Icon as={IconComponent} className={cn(quickActionButtonGlyphVariants(), className)} />
    </QuickActionButtonIndicator>
  );
}
QuickActionButtonIcon.displayName = 'QuickActionButton.Icon';

// =============================================================================
// LABEL
// =============================================================================

export interface QuickActionButtonLabelProps extends TextProps {
  className?: string;
  children?: ReactNode;
}

const QuickActionButtonLabel = forwardRef<Text, QuickActionButtonLabelProps>(
  ({ className, style, children, ...props }, ref) => {
    const { disabled } = useButtonContext();
    return (
      <Text
        ref={ref}
        numberOfLines={2}
        ellipsizeMode="tail"
        className={cn(quickActionButtonLabelVariants(), className)}
        style={style}
        {...props}
        {...mergeDataAttributes(
          props,
          dataAttributes({ slot: 'quick-action-button-label', disabled }),
        )}
      >
        {children}
      </Text>
    );
  },
);
QuickActionButtonLabel.displayName = 'QuickActionButton.Label';

// =============================================================================
// COMPOUND EXPORT
// =============================================================================

type QuickActionButtonCompoundComponent = typeof QuickActionButtonRoot & {
  Indicator: typeof QuickActionButtonIndicator;
  Icon: typeof QuickActionButtonIcon;
  Label: typeof QuickActionButtonLabel;
};

export const QuickActionButton = Object.assign(QuickActionButtonRoot, {
  Indicator: QuickActionButtonIndicator,
  Icon: QuickActionButtonIcon,
  Label: QuickActionButtonLabel,
}) as QuickActionButtonCompoundComponent;

export type { QuickActionButtonVariantProps };