'use client';

import { useStore } from '@tanstack/react-form';
import { FieldDescription, FieldLabel } from '@/components/ui/field';
import {
  useFieldContext,
  FormFieldSet,
  FormField,
  FormFieldError,
  createFormField
} from '@/components/ui/form-context';
import { CrmTextarea } from '@/features/crm/components/crm-form-controls';

interface TextareaFieldProps extends Omit<
  React.ComponentProps<'textarea'>,
  'value' | 'onChange' | 'onBlur'
> {
  label: string;
  description?: string;
  required?: boolean;
  maxLength?: number;
  showCount?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

export function TextareaField({
  label,
  description,
  required,
  maxLength,
  showCount = !!maxLength,
  size = 'md',
  className,
  ...textareaProps
}: TextareaFieldProps) {
  const field = useFieldContext();
  const isTouched = useStore(field.store, (s) => s.meta.isTouched);
  const isValid = useStore(field.store, (s) => s.meta.isValid);
  const value = (useStore(field.store, (s) => s.value) as string) ?? '';

  return (
    <FormFieldSet>
      <FormField>
        <FieldLabel htmlFor={field.name}>
          {label}
          {required && ' *'}
        </FieldLabel>
        <CrmTextarea
          id={field.name}
          size={size}
          value={value}
          onBlur={field.handleBlur}
          onChange={(e) => field.handleChange(e.target.value)}
          maxLength={maxLength}
          aria-invalid={isTouched && !isValid}
          className={className}
          {...textareaProps}
        />
        {showCount && (
          <div className='text-muted-foreground text-right text-xs tabular-nums'>
            {value.length}
            {maxLength ? ` / ${maxLength}` : ''}
          </div>
        )}
        {description && <FieldDescription>{description}</FieldDescription>}
      </FormField>
      <FormFieldError />
    </FormFieldSet>
  );
}

export const FormTextareaField = createFormField(TextareaField);
