import { InputHTMLAttributes, ReactNode, forwardRef, useState } from 'react';
import styled from 'styled-components';

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  hint?: string;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  fullWidth?: boolean;
}

const InputWrapper = styled.div<{ $fullWidth?: boolean }>`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.form.labelGap};
  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
`;

const Label = styled.label<{ $hasError?: boolean; $isFocused?: boolean }>`
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  color: ${({ theme, $hasError, $isFocused }) => 
    $hasError ? theme.colors.error : 
    $isFocused ? theme.colors.primary : 
    theme.colors.gray[600]};
  transition: color ${({ theme }) => theme.transitions.fast};
`;

const InputContainer = styled.div`
  position: relative;
  display: flex;
  align-items: center;
`;

const IconWrapper = styled.div<{ $position: 'left' | 'right' }>`
  position: absolute;
  ${({ $position }) => ($position === 'left' ? 'left: 12px' : 'right: 12px')};
  display: flex;
  align-items: center;
  color: ${({ theme }) => theme.colors.text.secondary};
  pointer-events: none;
`;

const StyledInput = styled.input<{
  $hasError?: boolean;
  $hasLeftIcon?: boolean;
  $hasRightIcon?: boolean;
}>`
  width: 100%;
  padding: 0.5rem ${({ theme }) => theme.spacing[3]};
  padding-left: ${({ $hasLeftIcon, theme }) => ($hasLeftIcon ? theme.spacing[10] : theme.spacing[3])};
  padding-right: ${({ $hasRightIcon, theme }) => ($hasRightIcon ? theme.spacing[10] : theme.spacing[3])};
  
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  font-family: inherit;
  
  background-color: ${({ theme }) => theme.colors.surfaceInset};
  color: ${({ theme }) => theme.colors.text.primary};
  
  border: 1px solid ${({ theme, $hasError }) => 
    $hasError ? theme.colors.error : theme.colors.border};
  border-radius: ${({ theme }) => theme.borderRadius.md};
  
  transition: all ${({ theme }) => theme.transitions.fast};

  &::placeholder {
    color: ${({ theme }) => theme.colors.text.disabled};
  }

  &:hover:not(:disabled) {
    border-color: ${({ theme, $hasError }) => 
      $hasError ? theme.colors.error : theme.colors.gray[300]};
  }

  &:focus {
    outline: none;
    border-width: 2px;
    border-color: ${({ theme, $hasError }) => 
      $hasError ? theme.colors.error : theme.colors.primary};
    padding: calc(0.5rem - 1px) calc(${({ theme }) => theme.spacing[3]} - 1px);
    padding-left: ${({ $hasLeftIcon, theme }) => 
      $hasLeftIcon ? `calc(${theme.spacing[10]} - 1px)` : `calc(${theme.spacing[3]} - 1px)`};
    padding-right: ${({ $hasRightIcon, theme }) => 
      $hasRightIcon ? `calc(${theme.spacing[10]} - 1px)` : `calc(${theme.spacing[3]} - 1px)`};
  }

  &:disabled {
    background-color: ${({ theme }) => theme.colors.background};
    border-color: ${({ theme }) => theme.colors.border};
    color: ${({ theme }) => theme.colors.text.disabled};
    cursor: not-allowed;
  }

  /* RTL support */
  html[dir='rtl'] & {
    text-align: right;
  }
`;

const HintText = styled.span<{ $isError?: boolean }>`
  margin-top: ${({ theme }) => theme.form.hintGap};
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  font-weight: ${({ theme }) => theme.typography.fontWeight.normal};
  color: ${({ theme, $isError }) =>
    $isError ? theme.colors.error : theme.colors.text.tertiary};
`;

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, hint, leftIcon, rightIcon, fullWidth, ...props }, ref) => {
    const [isFocused, setIsFocused] = useState(false);

    return (
      <InputWrapper $fullWidth={fullWidth}>
        {label && <Label $hasError={!!error} $isFocused={isFocused}>{label}</Label>}
        <InputContainer>
          {leftIcon && <IconWrapper $position="left">{leftIcon}</IconWrapper>}
          <StyledInput
            ref={ref}
            $hasError={!!error}
            $hasLeftIcon={!!leftIcon}
            $hasRightIcon={!!rightIcon}
            onFocus={(e) => {
              setIsFocused(true);
              props.onFocus?.(e);
            }}
            onBlur={(e) => {
              setIsFocused(false);
              props.onBlur?.(e);
            }}
            {...props}
          />
          {rightIcon && <IconWrapper $position="right">{rightIcon}</IconWrapper>}
        </InputContainer>
        {(error || hint) && (
          <HintText $isError={!!error}>{error || hint}</HintText>
        )}
      </InputWrapper>
    );
  }
);

Input.displayName = 'Input';