import * as React from 'react';
import { clsx } from 'clsx';

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
  hint?: string;
  controlSize?: 'sm' | 'md' | 'lg';
  variant?: 'surface' | 'muted' | 'ghost';
}

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  (
    { label, error, hint, controlSize = 'md', variant = 'surface', className, id, ...props },
    ref
  ) => {
    const generatedId = React.useId();
    const textareaId = id ?? (label || error || hint ? `textarea-${generatedId}` : undefined);
    const sizes: Record<NonNullable<TextareaProps['controlSize']>, string> = {
      sm: 'min-h-20 px-2.5 py-2 text-xs',
      md: 'min-h-24 px-3 py-2 text-sm',
      lg: 'min-h-32 px-4 py-3 text-base',
    };
    const variants: Record<NonNullable<TextareaProps['variant']>, string> = {
      surface: 'bg-[var(--bl-surface-card,#1a1a2e)]',
      muted: 'bg-[var(--bl-surface-muted,#252540)]',
      ghost: 'bg-transparent',
    };

    return (
      <div className="grid gap-1.5">
        {label && (
          <label
            htmlFor={textareaId}
            className="block text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary,#a0a0b0)]"
          >
            {label}
          </label>
        )}
        <textarea
          ref={ref}
          id={textareaId}
          className={clsx(
            'w-full resize-y rounded-lg border shadow-sm shadow-black/[0.03] outline-none transition duration-150',
            variants[variant],
            sizes[controlSize],
            'text-[var(--bl-text-primary,#fff)]',
            'placeholder:text-[var(--bl-text-tertiary,#555)]',
            'disabled:cursor-not-allowed disabled:opacity-60',
            'focus:border-[var(--bl-focus-ring,var(--bl-accent,#5A8CFF))] focus:ring-2 focus:ring-[var(--bl-focus-ring-muted,var(--bl-accent-muted,rgba(90,140,255,0.2)))] focus:ring-offset-0',
            error ? 'border-[var(--bl-danger)]' : 'border-[var(--bl-border,#2a2a4a)]',
            className
          )}
          aria-invalid={error ? 'true' : undefined}
          aria-describedby={error ? `${textareaId}-error` : hint ? `${textareaId}-hint` : undefined}
          {...props}
        />
        {error && (
          <p id={`${textareaId}-error`} className="text-xs text-[var(--bl-danger)]" role="alert">
            {error}
          </p>
        )}
        {hint && !error && (
          <p id={`${textareaId}-hint`} className="text-xs text-[var(--bl-text-tertiary,#555)]">
            {hint}
          </p>
        )}
      </div>
    );
  }
);

Textarea.displayName = 'Textarea';