// components/atoms/TextArea.jsx
'use client';

import React, { forwardRef } from 'react';

const TextArea = forwardRef(function TextArea(
  { 
    name, 
    value, 
    onChange, 
    placeholder, 
    rows = 4,
    className = '',
    label,
    error,
    helperText,
    maxLength,
    disabled = false,
    required = false,
    readOnly = false,
    resize = 'vertical', // 'none', 'vertical', 'horizontal', 'both'
    variant = 'default', // 'default', 'outlined', 'filled'
    showCharacterCount = false,
    ...props 
  },
  ref
) {
  // Handle variant styles
  const variantClasses = {
    default: 'bg-white border border-gray-300 focus:border-teal-500',
    outlined: 'bg-transparent border-2 border-gray-300 focus:border-teal-600',
    filled: 'bg-gray-100 border-none focus:bg-white focus:ring-2 focus:ring-teal-500'
  };

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

  const baseClasses = `w-full px-4 py-3 rounded-2xl focus:outline-none transition-colors duration-200 ${
    variantClasses[variant]
  } ${resizeClasses[resize]} ${
    disabled ? 'opacity-50 cursor-not-allowed' : ''
  } ${
    error ? 'border-red-500 focus:border-red-500' : ''
  }`;

  const handleChange = (e) => {
    if (maxLength && e.target.value.length > maxLength) {
      return;
    }
    onChange?.(e);
  };

  const characterCount = value?.length || 0;

  return (
    <div className="space-y-2">
      {label && (
        <label 
          htmlFor={name} 
          className="block text-sm font-medium text-gray-700"
        >
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      
      <div className="relative">
        <textarea
          ref={ref}
          id={name}
          name={name}
          value={value}
          onChange={handleChange}
          placeholder={placeholder}
          rows={rows}
          disabled={disabled}
          readOnly={readOnly}
          required={required}
          maxLength={maxLength}
          className={`${baseClasses} ${className}`}
          aria-invalid={!!error}
          aria-describedby={error ? `${name}-error` : helperText ? `${name}-helper` : undefined}
          {...props}
        />
        
        {showCharacterCount && maxLength && (
          <div className="absolute bottom-2 right-3 text-xs text-gray-500 bg-white/80 px-2 py-1 rounded">
            {characterCount}/{maxLength}
          </div>
        )}
      </div>
      
      {helperText && !error && (
        <p 
          id={`${name}-helper`}
          className="text-sm text-gray-500 mt-1"
        >
          {helperText}
        </p>
      )}
      
      {error && (
        <p 
          id={`${name}-error`}
          className="text-sm text-red-500 mt-1"
        >
          {error}
        </p>
      )}
      
      {showCharacterCount && maxLength && !error && (
        <div className="flex justify-between items-center">
          <div className="w-full bg-gray-200 rounded-full h-1.5">
            <div 
              className={`h-1.5 rounded-full ${
                characterCount > maxLength * 0.9 
                  ? 'bg-red-500' 
                  : characterCount > maxLength * 0.75 
                  ? 'bg-yellow-500' 
                  : 'bg-teal-500'
              }`}
              style={{ 
                width: `${Math.min((characterCount / maxLength) * 100, 100)}%` 
              }}
            ></div>
          </div>
        </div>
      )}
    </div>
  );
});

TextArea.displayName = 'TextArea';

export default TextArea;