import { DetailedHTMLProps, HTMLAttributes, ComponentType, ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';

// ============================================================================
// COMPONENT PROPS interfaces
// ============================================================================

export interface FluentButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

export interface FluentCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  variant?: 'elevated' | 'outlined' | 'filled';
  padding?: string;
}

export interface FluentInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  variant?: string;
}

export interface FluentSelectProps extends DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> {}

export interface FluentCheckboxProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {}

export interface FluentRadioProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {}

export interface FluentTextareaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {}

export interface FluentSwitchProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  checked?: boolean;
  disabled?: boolean;
}

export interface FluentSliderProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  min?: number;
  max?: number;
  value?: number;
}

export interface FluentProgressProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  value?: number;
  max?: number;
}

export interface FluentBadgeProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  variant?: 'primary' | 'success' | 'warning' | 'error';
}

export interface FluentAvatarProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  src?: string;
  size?: 'sm' | 'md' | 'lg';
  initials?: string;
}

export interface FluentModalProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  open?: boolean;
}

export interface FluentToastProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  open?: boolean;
  text?: string;
}

export interface FluentTabsProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  selected?: string;
}

export interface FluentAccordionProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  open?: boolean;
}

export interface FluentTooltipProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  text?: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
}

export interface FluentBreadcrumbProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentChipProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentDropdownProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  open?: boolean;
}

export interface FluentMenuProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentPaginationProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  page?: number;
  pages?: number;
}

export interface FluentNotificationProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  open?: boolean;
  title?: string;
  message?: string;
}

export interface FluentTableProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  sortable?: boolean;
}

export interface FluentTextProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  size?: 'sm' | 'md' | 'lg';
  weight?: 'normal' | 'bold';
}

export interface FluentTitleProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  level?: number;
}

export interface FluentSkeletonProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  width?: string;
  height?: string;
}

export interface FluentSpinnerProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentStepperProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  current?: number;
  total?: number;
}

export interface FluentAvatarGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  max?: number;
  overlap?: string;
}

export interface FluentFormProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  novalidate?: boolean;
}

export interface FluentFormMessageProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  for?: string;
}

export interface FluentLabelProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  for?: string;
}

export interface FluentModalAdvancedProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  open?: boolean;
}

export interface FluentAutocompleteProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentCheckboxGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentRadioGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentDatepickerProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {}

export interface FluentPopoverProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  open?: boolean;
}

// ============================================================================
// GLOBAL JSX DEFINITIONS
// ============================================================================

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'fluent-button': FluentButtonProps;
      'fluent-card': FluentCardProps;
      'fluent-input': FluentInputProps;
      'fluent-select': FluentSelectProps;
      'fluent-checkbox': FluentCheckboxProps;
      'fluent-radio': FluentRadioProps;
      'fluent-switch': FluentSwitchProps;
      'fluent-slider': FluentSliderProps;
      'fluent-progress': FluentProgressProps;
      'fluent-badge': FluentBadgeProps;
      'fluent-avatar': FluentAvatarProps;
      'fluent-modal': FluentModalProps;
      'fluent-toast': FluentToastProps;
      'fluent-tabs': FluentTabsProps;
      'fluent-accordion': FluentAccordionProps;
      'fluent-tooltip': FluentTooltipProps;
      'fluent-breadcrumb': FluentBreadcrumbProps;
      'fluent-chip': FluentChipProps;
      'fluent-dropdown': FluentDropdownProps;
      'fluent-menu': FluentMenuProps;
      'fluent-pagination': FluentPaginationProps;
      'fluent-notification': FluentNotificationProps;
      'fluent-table': FluentTableProps;
      'fluent-text': FluentTextProps;
      'fluent-title': FluentTitleProps;
      'fluent-skeleton': FluentSkeletonProps;
      'fluent-spinner': FluentSpinnerProps;
      'fluent-stepper': FluentStepperProps;
      'fluent-avatar-group': FluentAvatarGroupProps;
      'fluent-form': FluentFormProps;
      'fluent-form-message': FluentFormMessageProps;
      'fluent-label': FluentLabelProps;
      'fluent-modal-advanced': FluentModalAdvancedProps;
      'fluent-autocomplete': FluentAutocompleteProps;
      'fluent-checkbox-group': FluentCheckboxGroupProps;
      'fluent-radio-group': FluentRadioGroupProps;
      'fluent-datepicker': FluentDatepickerProps;
      'fluent-popover': FluentPopoverProps;
    }
  }
}

export {};