import React, { forwardRef, InputHTMLAttributes } from 'react';
import { Box } from './Box';
import { Text } from './Text';

export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
  label?: string;
  error?: string;
  errorMessage?: string;
  hint?: string;
  fullWidth?: boolean;
  size?: 'sm' | 'md' | 'lg';
  icon?: React.ReactNode;
  variant?: 'default' | 'error';
}

export const Input = forwardRef<HTMLInputElement, InputProps>(({ 
  label, 
  error, 
  errorMessage,
  hint, 
  fullWidth = false,
  size = 'md',
  icon,
  variant = 'default',
  ...props 
}, ref) => {
  const finalError = error || errorMessage;
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-xs',
    md: 'px-4 py-2 text-sm',
    lg: 'px-4 py-3 text-base'
  };

  const baseClasses = 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-[var(--ui-color-text-high)] placeholder-[var(--ui-color-text-low)] focus:outline-none focus:border-[var(--ui-color-intent-primary)] transition-colors';
  const errorClasses = (finalError || variant === 'error') ? 'border-[var(--ui-color-intent-critical)]' : '';
  const widthClasses = fullWidth ? 'w-full' : '';

  const classes = [
    baseClasses,
    sizeClasses[size],
    errorClasses,
    widthClasses,
    icon ? 'pl-10' : '',
  ].filter(Boolean).join(' ');

  return (
    <Box width={fullWidth ? '100%' : undefined}>
      {label && (
        <Box marginBottom={1.5}>
          <Text as="label" size="xs" weight="bold" variant="low">
            {label}
          </Text>
        </Box>
      )}
      <Box position="relative">
        {icon && (
          <Box position="absolute" left={3} top="50%" style={{ transform: 'translateY(-50%)' }}>
            {icon}
          </Box>
        )}
        <input
          ref={ref}
          className={classes}
          {...props}
        />
      </Box>
      {finalError && (
        <Box marginTop={1}>
          <Text size="xs" variant="critical">
            {finalError}
          </Text>
        </Box>
      )}
      {hint && !finalError && (
        <Box marginTop={1}>
          <Text size="xs" variant="low">
            {hint}
          </Text>
        </Box>
      )}
    </Box>
  );
});

Input.displayName = 'Input';