// Adapted from Untitled UI React (MIT). See THIRD_PARTY_NOTICES.md.
import {
  useId,
  useState,
  type ComponentProps,
  type CSSProperties,
} from "react";

export interface PinInputProps extends Omit<
  ComponentProps<"input">,
  "defaultValue" | "onChange" | "size" | "type" | "value"
> {
  label: string;
  value?: string;
  defaultValue?: string;
  length?: number;
  numericOnly?: boolean;
  mask?: boolean;
  description?: string;
  error?: string;
  rootClassName?: string;
  onValueChange?: (value: string) => void;
}

export function PinInput({
  label,
  value,
  defaultValue = "",
  length = 6,
  numericOnly = true,
  mask = false,
  description,
  error,
  rootClassName = "",
  className = "",
  id,
  onValueChange,
  style,
  "aria-describedby": describedBy,
  ...props
}: PinInputProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const safeLength = Math.max(1, Math.floor(length));
  const normalize = (next: string) =>
    (numericOnly ? next.replace(/\D/g, "") : next).slice(0, safeLength);
  const [internalValue, setInternalValue] = useState(() =>
    normalize(defaultValue),
  );
  const currentValue = normalize(value ?? internalValue);
  const hint = error ?? description;
  const hintId = `${inputId}-hint`;
  const inputStyle = {
    ...style,
    "--pin-length": safeLength,
  } as CSSProperties;

  return (
    <div className={`ynr-pin-input-field ${rootClassName}`}>
      <label className="ynr-pin-input-label" htmlFor={inputId}>
        {label}
      </label>
      <input
        {...props}
        id={inputId}
        type={mask ? "password" : "text"}
        value={currentValue}
        inputMode={numericOnly ? "numeric" : props.inputMode}
        pattern={numericOnly ? "[0-9]*" : props.pattern}
        autoComplete={props.autoComplete ?? "one-time-code"}
        className={`ynr-pin-input ${className}`}
        style={inputStyle}
        aria-invalid={error ? true : props["aria-invalid"]}
        aria-describedby={
          [describedBy, hint ? hintId : undefined].filter(Boolean).join(" ") ||
          undefined
        }
        onChange={(event) => {
          const next = normalize(event.currentTarget.value);
          if (value === undefined) setInternalValue(next);
          onValueChange?.(next);
        }}
      />
      {hint && (
        <p id={hintId} className={error ? "ynr-error" : "ynr-hint"}>
          {hint}
        </p>
      )}
    </div>
  );
}