import type { ReactElement, ReactNode, MouseEvent } from 'react';
import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';

/**
 * Button size variants
 */
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';

/**
 * Button visual variants
 */
export type ButtonVariant = 
  | 'solid'    // Filled button with background color
  | 'outline'  // Button with border and transparent background
  | 'ghost'    // Button with no background or border
  | 'link'     // Button that looks like a link
  | 'unstyled' // Button with minimal styling
  | 'ai'       // Special AI-themed button
  | 'primary'  // Primary action button
  | 'secondary'// Secondary action button
  | 'danger';  // Destructive action button

/**
 * Button color scheme options
 */
export type ButtonColorScheme = 
  | 'blue'   // Primary brand color
  | 'green'  // Success color
  | 'red'    // Error/danger color
  | 'yellow' // Warning color
  | 'gray'   // Neutral color
  | 'purple' // Secondary brand color
  | 'cyan';  // Information color

/**
 * Extended button props for the BFUI Button component
 */
export interface ButtonProps extends Omit<ChakraButtonProps, 'size' | 'variant' | 'colorScheme'> {
  /**
   * Icon element to display before button text
   */
  leftIcon?: ReactElement;
  
  /**
   * Icon element to display after button text
   */
  rightIcon?: ReactElement;
  
  /**
   * Button content
   */
  children: ReactNode;
  
  /**
   * Button size variant
   * @default 'md'
   */
  size?: ButtonSize;
  
  /**
   * Visual style variant of the button
   * @default 'solid'
   */
  variant?: ButtonVariant;
  
  /**
   * Color scheme for the button
   * @default 'blue'
   */
  colorScheme?: ButtonColorScheme;
  
  /**
   * Whether the button is in a loading state
   * @default false
   */
  isLoading?: boolean;
  
  /**
   * Whether the button is disabled
   * @default false
   */
  isDisabled?: boolean;
  
  /**
   * Text to display when button is in loading state
   */
  loadingText?: string;
  
  /**
   * Whether to show spinner when isLoading is true
   * @default true
   */
  spinnerPlacement?: 'start' | 'end';
  
  /**
   * Click handler for the button
   */
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
  
  /**
   * Additional CSS classes
   */
  className?: string;
  
  /**
   * Full width button that takes up the entire container width
   * @default false
   */
  isFullWidth?: boolean;
  
  /**
   * ARIA label for accessibility
   * Required when button has no visible text content
   */
  'aria-label'?: string;
  
  /**
   * ID of the element that describes this button
   */
  'aria-describedby'?: string;
  
  /**
   * Indicates if a toggle button is currently pressed
   */
  'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
  
  /**
   * Indicates if a button controls an expanded element
   */
  'aria-expanded'?: boolean | 'true' | 'false';
  
  /**
   * Indicates the availability and type of popup element
   */
  'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
  
  /**
   * Identifies the element (or elements) whose contents or presence are controlled by this button
   */
  'aria-controls'?: string;
  
  /**
   * Role attribute for semantic meaning
   * @default 'button'
   */
  role?: string;
  
  /**
   * Tab order of the button
   */
  tabIndex?: number;
  
  /**
   * ID for the button element
   */
  id?: string;
  
  /**
   * Optional data test ID for testing
   */
  'data-testid'?: string;
}