import React, { forwardRef, TextareaHTMLAttributes } from 'react';
import { clsx } from 'clsx';

export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
  helperText?: string;
  isRequired?: boolean;
  isInvalid?: boolean;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'outline' | 'filled' | 'unstyled';
  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
}

const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({
  label,
  error,
  helperText,
  isRequired = false,
  isInvalid = false,
  size = 'md',
  variant = 'outline',
  resize = 'vertical',
  className,
  id,
  rows = 3,
  ...props
}, ref) => {
  const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
  const hasError = isInvalid || !!error;

  const baseTextareaClasses = [
    'w-full transition-colors duration-200',
    'focus:outline-none',
    'disabled:opacity-50 disabled:cursor-not-allowed',
    'placeholder:text-[var(--text-tertiary)]'
  ];

  const variantClasses = {
    outline: [
      'bg-[var(--bg-primary)] border border-[var(--border-secondary)]',
      'focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)]',
      hasError ? 'border-[var(--color-error)] focus:border-[var(--color-error)] focus:ring-[var(--color-error)]' : ''
    ],
    filled: [
      'bg-[var(--bg-secondary)] border border-transparent',
      'focus:bg-[var(--bg-primary)] focus:border-[var(--color-primary)]',
      hasError ? 'border-[var(--color-error)]' : ''
    ],
    unstyled: [
      'bg-transparent border-none',
      'focus:ring-0'
    ]
  };

  const sizeClasses = {
    sm: 'px-3 py-2 text-sm',
    md: 'px-4 py-3 text-base',
    lg: 'px-5 py-4 text-lg'
  };

  const resizeClasses = {
    none: 'resize-none',
    vertical: 'resize-y',
    horizontal: 'resize-x',
    both: 'resize'
  };

  const textareaClasses = clsx(
    baseTextareaClasses,
    variantClasses[variant],
    sizeClasses[size],
    resizeClasses[resize],
    'rounded-lg',
    className
  );

  return (
    <div className="w-full">
      {label && (
        <label
          htmlFor={textareaId}
          className="block text-sm font-medium text-[var(--text-primary)] mb-2"
        >
          {label}
          {isRequired && (
            <span className="text-[var(--color-error)] ml-1">*</span>
          )}
        </label>
      )}

      <textarea
        ref={ref}
        id={textareaId}
        rows={rows}
        className={textareaClasses}
        aria-invalid={hasError}
        aria-describedby={
          error ? `${textareaId}-error` :
          helperText ? `${textareaId}-helper` :
          undefined
        }
        {...props}
      />

      {error && (
        <p
          id={`${textareaId}-error`}
          className="mt-2 text-sm text-[var(--color-error)]"
        >
          {error}
        </p>
      )}

      {helperText && !error && (
        <p
          id={`${textareaId}-helper`}
          className="mt-2 text-sm text-[var(--text-secondary)]"
        >
          {helperText}
        </p>
      )}
    </div>
  );
});

Textarea.displayName = 'Textarea';

export default Textarea;