import {
  forwardRef,
  useId,
  type InputHTMLAttributes,
  type ReactNode
} from 'react';

import { cn } from '@/utils/classNames';

export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
  readonly label?: string;
  readonly hideLabel?: boolean;
  readonly hint?: string;
  readonly error?: string;
  readonly leftIcon?: ReactNode;
  readonly rightSlot?: ReactNode;
  readonly containerClassName?: string;
  readonly inputSize?: 'sm' | 'md' | 'lg';
}

const sizeClasses = {
  sm: 'h-9 rounded-xl px-3 text-sm',
  md: 'h-11 rounded-2xl px-4 text-sm',
  lg: 'h-12 rounded-2xl px-4 text-base'
} as const;

export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  {
    className,
    containerClassName,
    error,
    hideLabel = false,
    hint,
    id,
    inputSize = 'md',
    label,
    leftIcon,
    rightSlot,
    type = 'text',
    ...props
  },
  ref,
) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const hintId = hint ? `${inputId}-hint` : undefined;
  const errorId = error ? `${inputId}-error` : undefined;
  const describedBy = [hintId, errorId, props['aria-describedby']].filter(Boolean).join(' ');

  return (
    <div className={cn('space-y-2', containerClassName)}>
      {label ? (
        <label
          htmlFor={inputId}
          className={cn(
            'block text-sm font-semibold text-foreground',
            hideLabel && 'sr-only',
          )}
        >
          {label}
        </label>
      ) : null}

      <div className="relative">
        {leftIcon ? (
          <span
            className="pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 text-muted"
            aria-hidden="true"
          >
            {leftIcon}
          </span>
        ) : null}

        <input
          ref={ref}
          id={inputId}
          type={type}
          aria-invalid={error ? true : undefined}
          aria-describedby={describedBy || undefined}
          className={cn(
            'interactive-ring w-full border border-border/80 bg-surface/80 text-foreground placeholder:text-subtle shadow-inner transition duration-200 hover:border-accent/40 focus:border-accent',
            sizeClasses[inputSize],
            leftIcon && 'pl-10',
            rightSlot && 'pr-12',
            error && 'border-danger/60 focus:border-danger',
            className,
          )}
          {...props}
        />

        {rightSlot ? (
          <span className="absolute right-2 top-1/2 flex -translate-y-1/2">{rightSlot}</span>
        ) : null}
      </div>

      {hint ? (
        <p id={hintId} className="text-xs leading-5 text-muted">
          {hint}
        </p>
      ) : null}

      {error ? (
        <p id={errorId} className="text-xs font-medium leading-5 text-danger">
          {error}
        </p>
      ) : null}
    </div>
  );
});