import { useId, type InputHTMLAttributes, type ReactNode } from "react";
import { cn } from "../../lib/cn";
import { PrefixFieldShell } from "../inputs/shared";

export type UhuruInputType = InputHTMLAttributes<HTMLInputElement>["type"] | "number-with-options";

export type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
  label?: string;
  hint?: string;
  error?: string;
  options?: { label: string; value: string }[];
  prefixIcon?: ReactNode;
  suffixIcon?: ReactNode;
  suffixInteractive?: boolean;
  type?: UhuruInputType;
};

export function TextField({
  className,
  label,
  hint,
  error,
  id,
  options,
  prefixIcon,
  suffixIcon,
  suffixInteractive = false,
  type = "text",
  ...props
}: TextFieldProps) {
  const generatedId = useId();
  const fieldId = id ?? generatedId;
  const hintId = hint ? `${fieldId}-hint` : undefined;
  const errorId = error ? `${fieldId}-error` : undefined;
  const listId = options?.length ? `${fieldId}-options` : undefined;
  const resolvedType = type === "number-with-options" ? "number" : type;

  return (
    <label className="flex w-full flex-col gap-2" htmlFor={fieldId}>
      {label ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">{label}</span> : null}
      <PrefixFieldShell prefixIcon={prefixIcon} suffixIcon={suffixIcon} suffixInteractive={suffixInteractive}>
        <input
          aria-describedby={[errorId, hintId].filter(Boolean).join(" ") || undefined}
          className={cn(
            "h-[var(--uhuru-control-height)] w-full rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-[var(--uhuru-control-padding-x)] text-sm text-[var(--uhuru-text-primary)] outline-none transition placeholder:text-[var(--uhuru-text-tertiary)] focus:border-[var(--uhuru-border-accent)] focus:ring-1 focus:ring-[var(--uhuru-border-accent)]",
            prefixIcon ? "pl-12" : "",
            suffixIcon ? "pr-12" : "",
            error ? "border-[var(--uhuru-error-border)] focus:ring-[var(--uhuru-error-border)]" : "",
            className,
          )}
          id={fieldId}
          list={listId}
          type={resolvedType}
          {...props}
        />
      </PrefixFieldShell>
      {type === "number-with-options" && options?.length ? (
        <datalist id={listId}>
          {options.map((option) => <option key={option.value} label={option.label} value={option.value} />)}
        </datalist>
      ) : null}
      {error ? (
        <span className="text-xs text-[var(--uhuru-error-text)]" id={errorId}>
          {error}
        </span>
      ) : hint ? (
        <span className="text-xs text-[var(--uhuru-text-secondary)]" id={hintId}>
          {hint}
        </span>
      ) : null}
    </label>
  );
}

export const Input = TextField;