// Input Component Specification
// Framework-agnostic input component definition

export type InputType = 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'time' | 'currency';
export type InputSize = 'sm' | 'md' | 'lg';
export type InputState = 'default' | 'error' | 'success' | 'warning' | 'disabled';

export interface InputProps {
  // Identification
  id?: string;
  name: string;
  label?: string;
  placeholder?: string;
  helperText?: string;
  errorMessage?: string;
  
  // Type and value
  type?: InputType;
  value?: string | number;
  defaultValue?: string | number;
  
  // Currency-specific
  currency?: string; // ISO currency code (e.g., 'USD', 'EUR')
  min?: number;
  max?: number;
  step?: number;
  
  // Validation
  required?: boolean;
  pattern?: string;
  minLength?: number;
  maxLength?: number;
  state?: InputState;
  validationRules?: ValidationRule[];
  
  // Behavior
  onChange?: (value: string | number) => void;
  onBlur?: () => void;
  onFocus?: () => void;
  disabled?: boolean;
  readOnly?: boolean;
  autoFocus?: boolean;
  autoComplete?: string;
  
  // Icons
  leftIcon?: string;
  rightIcon?: string;
  showClearButton?: boolean;
  
  // Styling
  size?: InputSize;
  fullWidth?: boolean;
  className?: string;
  
  // Accessibility
  ariaLabel?: string;
  ariaDescribedBy?: string;
  ariaInvalid?: boolean;
}

export interface ValidationRule {
  rule: (value: string | number) => boolean;
  message: string;
}

export interface InputStates {
  default: {
    borderColor: string;
    backgroundColor: string;
  };
  error: {
    borderColor: string;
    backgroundColor: string;
    showErrorIcon: boolean;
  };
  success: {
    borderColor: string;
    backgroundColor: string;
    showSuccessIcon: boolean;
  };
  warning: {
    borderColor: string;
    backgroundColor: string;
    showWarningIcon: boolean;
  };
  disabled: {
    borderColor: string;
    backgroundColor: string;
    opacity: number;
    cursor: string;
  };
}

export const inputStates: InputStates = {
  default: {
    borderColor: 'var(--theme-border-primary)',
    backgroundColor: 'var(--theme-bg-primary)',
  },
  error: {
    borderColor: '#F44336',
    backgroundColor: '#FFEBEE',
    showErrorIcon: true,
  },
  success: {
    borderColor: '#4CAF50',
    backgroundColor: '#E8F5E9',
    showSuccessIcon: true,
  },
  warning: {
    borderColor: '#FF9800',
    backgroundColor: '#FFF3E0',
    showWarningIcon: true,
  },
  disabled: {
    borderColor: 'var(--theme-border-primary)',
    backgroundColor: 'var(--theme-bg-secondary)',
    opacity: 0.6,
    cursor: 'not-allowed',
  },
};

export const inputSizes = {
  sm: {
    padding: '0.375rem 0.75rem',
    fontSize: '0.875rem',
    minHeight: '2rem',
  },
  md: {
    padding: '0.5rem 1rem',
    fontSize: '1rem',
    minHeight: '2.5rem',
  },
  lg: {
    padding: '0.75rem 1.25rem',
    fontSize: '1.125rem',
    minHeight: '3rem',
  },
};

/**
 * Currency Input Helper
 */
export interface CurrencyInputProps extends InputProps {
  type: 'currency';
  currency: string;
  locale?: string;
  allowNegative?: boolean;
}

/**
 * Input Component Interface
 * 
 * Usage example (React):
 * ```tsx
 * <Input
 *   name="amount"
 *   label="Amount"
 *   type="currency"
 *   currency="USD"
 *   value={amount}
 *   onChange={setAmount}
 *   required
 *   state={errors.amount ? 'error' : 'default'}
 *   errorMessage={errors.amount}
 * />
 * ```
 */
export interface InputComponent {
  props: InputProps;
  validate(): boolean;
  getValue(): string | number;
  setValue(value: string | number): void;
  focus(): void;
  blur(): void;
  render(): unknown;
}

