import * as React from 'react';

import { cn } from '@/lib/utils';
import { Label } from '@/components/ui/label';

interface FormFieldProps {
  label: string;
  children: React.ReactElement<{
    id?: string;
    'aria-invalid'?: boolean;
    'aria-describedby'?: string;
  }>;
  error?: string;
  helpText?: string;
  required?: boolean;
  className?: string;
  id?: string;
}

/**
 * Wrapper obrigatório para label + input + erro + texto de ajuda —
 * nenhuma tela deve montar esse trio manualmente (Etapa 12). Injeta
 * `id`/`aria-invalid`/`aria-describedby` no único filho, então `children`
 * precisa ser um componente que espalha `...props` no elemento nativo
 * (Input, Textarea, SelectTrigger etc).
 */
function FormField({ label, children, error, helpText, required, className, id }: FormFieldProps) {
  const autoId = React.useId();
  const fieldId = id ?? autoId;
  const errorId = `${fieldId}-error`;
  const helpId = `${fieldId}-help`;

  const describedBy =
    [error ? errorId : null, helpText ? helpId : null].filter(Boolean).join(' ') || undefined;

  return (
    <div className={cn('flex flex-col gap-1.5', className)}>
      <Label htmlFor={fieldId}>
        {label}
        {required && (
          <span className="text-destructive" aria-hidden>
            {' '}
            *
          </span>
        )}
      </Label>
      {React.cloneElement(children, {
        id: fieldId,
        'aria-invalid': !!error,
        'aria-describedby': describedBy,
      })}
      {helpText && !error && (
        <p id={helpId} className="text-xs text-muted-foreground">
          {helpText}
        </p>
      )}
      {error && (
        <p id={errorId} role="alert" className="text-xs text-destructive">
          {error}
        </p>
      )}
    </div>
  );
}

export { FormField };