'use client';

import React from 'react';
import { useField } from 'formik';
import { FieldGroup } from './FieldGroup';

interface Props {
  name: string;
  label?: string;
  required?: boolean;
  hint?: string;
  type?: string;
  placeholder?: string;
  maxLength?: number;
  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
  autoComplete?: string;
  autoFocus?: boolean;
  disabled?: boolean;
  className?: string;
  helperText?: string;
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
  transform?: (value: string) => string;
}

export function FormTextField({
  name,
  label,
  required,
  hint,
  type = 'text',
  placeholder,
  maxLength,
  inputMode,
  autoComplete,
  autoFocus,
  disabled,
  className = '',
  helperText,
  startIcon,
  endIcon,
  transform,
}: Props) {
  const [field, meta, helpers] = useField(name);
  const showError = meta.touched && Boolean(meta.error);

  return (
    <FieldGroup label={label} required={required} hint={hint} error={showError ? meta.error : undefined}>
      <div className="relative">
        {startIcon && (
          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">{startIcon}</span>
        )}
        <input
          {...field}
          id={name}
          type={type}
          placeholder={placeholder}
          maxLength={maxLength}
          inputMode={inputMode}
          autoComplete={autoComplete}
          autoFocus={autoFocus}
          disabled={disabled}
          value={field.value ?? ''}
          onChange={(e) => {
            const v = transform ? transform(e.target.value) : e.target.value;
            helpers.setValue(v);
          }}
          className={`field-input ${startIcon ? 'pl-10' : ''} ${endIcon ? 'pr-10' : ''} ${
            showError ? 'border-red-400 focus:ring-red-200 focus:border-red-400' : ''
          } ${disabled ? 'opacity-60 cursor-not-allowed bg-muted' : ''} ${className}`}
        />
        {endIcon && (
          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">{endIcon}</span>
        )}
      </div>
      {helperText && !showError && <p className="text-xs text-muted-foreground">{helperText}</p>}
    </FieldGroup>
  );
}