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

export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
  hint?: string;
  fullWidth?: boolean;
}

const TextareaWrapper = 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 StyledTextarea = styled.textarea<{ $hasError?: boolean }>`
  width: 100%;
  min-height: 100px;
  padding: 0.5rem ${({ theme }) => theme.spacing[3]};
  
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  font-family: inherit;
  line-height: ${({ theme }) => theme.typography.lineHeight.relaxed};
  
  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};
  
  resize: vertical;
  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);
  }

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

  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 Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ label, error, hint, fullWidth, ...props }, ref) => {
    const [isFocused, setIsFocused] = useState(false);

    return (
      <TextareaWrapper $fullWidth={fullWidth}>
        {label && <Label $hasError={!!error} $isFocused={isFocused}>{label}</Label>}
        <StyledTextarea 
          ref={ref} 
          $hasError={!!error}
          onFocus={(e) => {
            setIsFocused(true);
            props.onFocus?.(e);
          }}
          onBlur={(e) => {
            setIsFocused(false);
            props.onBlur?.(e);
          }}
          {...props} 
        />
        {(error || hint) && (
          <HintText $isError={!!error}>{error || hint}</HintText>
        )}
      </TextareaWrapper>
    );
  }
);

Textarea.displayName = 'Textarea';