// src/components/ui/FormField.jsx
// Wraps every form control: label + input/textarea/select + hint + validation error.
// Never place a raw <input> on a page — always use FormField.
//
// Props:
//   label       — string — visible label (required for accessibility)
//   name        — string — input id/name
//   type        — 'text'|'email'|'password'|'number'|'tel'|'url'|'search'
//                 'textarea' | 'select'                     (default: 'text')
//   value       — controlled value
//   onChange    — change handler
//   error       — string — validation error message (shown in danger color)
//   hint        — string — helper text shown below input (muted)
//   required    — boolean — adds * to label
//   disabled    — boolean
//   placeholder — string
//   rows        — number — textarea row count                (default: 4)
//   children    — ReactNode — <option> elements when type='select'
//   inputProps  — extra props forwarded to the underlying input element
//   className   — extra classes on the field wrapper
//
// Styles live in src/v2/styles/components.css (.input, .input-error)

import Select from '@/components/ui/Select'

export default function FormField({
  label,
  name,
  type = 'text',
  value,
  onChange,
  error,
  hint,
  required = false,
  disabled = false,
  placeholder,
  rows = 4,
  children,
  inputProps = {},
  className = '',
}) {
  const inputId = `field-${name}`
  const errorId = error ? `${inputId}-error` : undefined
  const hintId  = hint  ? `${inputId}-hint`  : undefined

  const inputClassName = [
    'input',
    type === 'textarea' ? 'textarea' : '',
    error ? 'input-error' : '',
  ]
    .filter(Boolean)
    .join(' ')

  const sharedProps = {
    id: inputId,
    name,
    value,
    onChange,
    disabled,
    placeholder,
    required,
    'aria-invalid':      error ? true : undefined,
    'aria-describedby':  [errorId, hintId].filter(Boolean).join(' ') || undefined,
    className: inputClassName,
    ...inputProps,
  }

  return (
    <div
      className={`flex flex-col ${className}`}
      style={{ gap: 'var(--space-2)' }}
    >
      {/* Label */}
      {label && (
        <label
          htmlFor={inputId}
          style={{
            fontSize:   'var(--font-size-sm)',
            fontWeight: 'var(--font-weight-medium)',
            color:      'var(--color-text-secondary)',
            lineHeight: 'var(--line-height-tight)',
          }}
        >
          {label}
          {required && (
            <span
              aria-hidden="true"
              style={{ color: 'var(--color-danger)', marginLeft: 'var(--space-1)' }}
            >
              *
            </span>
          )}
        </label>
      )}

      {/* Control */}
      {type === 'textarea' ? (
        <textarea rows={rows} {...sharedProps} />
      ) : type === 'select' ? (
        <Select
          id={inputId}
          name={name}
          value={value}
          onChange={onChange}
          disabled={disabled}
          className={error ? 'input-error' : ''}
          aria-invalid={error ? true : undefined}
          aria-describedby={[errorId, hintId].filter(Boolean).join(' ') || undefined}
        >
          {children}
        </Select>
      ) : (
        <input type={type} {...sharedProps} />
      )}

      {/* Hint text — shown when no error */}
      {hint && !error && (
        <span
          id={hintId}
          style={{
            fontSize: 'var(--font-size-sm)',
            color:    'var(--color-text-muted)',
          }}
        >
          {hint}
        </span>
      )}

      {/* Validation error */}
      {error && (
        <span
          id={errorId}
          role="alert"
          style={{
            fontSize:   'var(--font-size-sm)',
            color:      'var(--color-danger)',
            fontWeight: 'var(--font-weight-medium)',
          }}
        >
          {error}
        </span>
      )}
    </div>
  )
}
