// @design-system: primitives/Input
// Registered at /design-system#input-primitive - Phase 3 (Agent 3E) will render the gallery.

import { forwardRef } from 'react';
import { cn } from '@/lib/cn';

/** Props for the Input component */
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Slot rendered at inline-start of the input (RTL-aware via logical properties). */
  startSlot?: React.ReactNode;
  /** Slot rendered at inline-end of the input (RTL-aware via logical properties). */
  endSlot?: React.ReactNode;
  /** When true, applies error styles and aria-invalid. */
  invalid?: boolean;
  /** When true, lets free text choose direction from its first strong character. */
  autoDir?: boolean;
  /** Hint text displayed below the input. Wired to aria-describedby via FormField. */
  hint?: string;
}

/**
 * Multideal Input primitive.
 *
 * Supports `startSlot`/`endSlot` (RTL-aware), `invalid`, `hint`.
 * Ref-forwardable for react-hook-form integration.
 *
 * @example
 * ```tsx
 * <Input
 *   type="tel"
 *   startSlot={<Icon name="Phone" />}
 *   invalid={!!errors.phone}
 *   aria-describedby="phone-error"
 * />
 * ```
 */
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { className, startSlot, endSlot, invalid, autoDir, dir, hint: _hint, type = 'text', ...props },
  ref,
) {
  const hasStart = Boolean(startSlot);
  const hasEnd = Boolean(endSlot);
  const resolvedDir = dir ?? (autoDir ? 'auto' : undefined);

  if (hasStart || hasEnd) {
    return (
      <div className="relative flex items-center">
        {hasStart && (
          <span className="pointer-events-none absolute start-3 flex items-center text-neutral-500">
            {startSlot}
          </span>
        )}
        <input
          ref={ref}
          type={type}
          dir={resolvedDir}
          aria-invalid={invalid || undefined}
          className={cn(
            'border-border-default bg-surface-base w-full rounded-md border',
            'placeholder:text-text-muted text-base text-neutral-900',
            'py-2',
            hasStart ? 'ps-10' : 'ps-3',
            hasEnd ? 'pe-10' : 'pe-3',
            'transition-colors',
            'focus-visible:border-brand-primary-500 focus-visible:ring-brand-primary-500/40 focus-visible:ring-2 focus-visible:outline-none',
            'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400',
            invalid &&
              'border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/40',
            className,
          )}
          {...props}
        />
        {hasEnd && (
          <span className="pointer-events-none absolute end-3 flex items-center text-neutral-500">
            {endSlot}
          </span>
        )}
      </div>
    );
  }

  return (
    <input
      ref={ref}
      type={type}
      dir={resolvedDir}
      aria-invalid={invalid || undefined}
      className={cn(
        'border-border-default bg-surface-base w-full rounded-md border',
        'placeholder:text-text-muted text-base text-neutral-900',
        'py-2 ps-3 pe-3',
        'transition-colors',
        'focus-visible:border-brand-primary-500 focus-visible:ring-brand-primary-500/40 focus-visible:ring-2 focus-visible:outline-none',
        'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400',
        invalid &&
          'border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/40',
        className,
      )}
      {...props}
    />
  );
});