"use client";

import { InputGroup } from "@aur-ui/ui/components/input-group";
import { InputGroupAddon } from "@aur-ui/ui/components/input-group-addon";
import { InputGroupInput } from "@aur-ui/ui/components/input-group-input";
import { useControllableState } from "@aur-ui/ui/hooks/use-controllable-state";
import { cn } from "@aur-ui/ui/lib/utils";
import { SearchIcon, XIcon } from "lucide-react";
import type * as React from "react";
import { useRef } from "react";

export type SearchFieldProps = Omit<
  React.ComponentProps<"input">,
  "value" | "defaultValue" | "onChange" | "size" | "type"
> & {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Keyboard hint rendered as a trailing kbd, e.g. "⌘K". */
  shortcut?: string;
  /** Class for the outer shell; input-level classes go via inputClassName. */
  className?: string;
  inputClassName?: string;
};

/**
 * SearchField — Aur search box on the {@link InputGroup} shell: leading
 * search icon, transparent input, and a clear button that appears once the
 * field has content (clearing keeps focus so the user can retype). Works
 * controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
 */
function SearchField({
  className,
  inputClassName,
  value: valueProp,
  defaultValue,
  onValueChange,
  shortcut,
  disabled,
  ...props
}: SearchFieldProps) {
  const [value, setValue] = useControllableState<string>({
    value: valueProp,
    defaultValue: defaultValue ?? "",
    onChange: onValueChange,
  });
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <InputGroup data-slot="search-field" className={className}>
      {/* pl-1.5 + the shell's px-1.5 lands the icon on the same 12px inset
          as a plain Input's px-3 text. */}
      <InputGroupAddon align="start" className="pl-1.5">
        <SearchIcon aria-hidden className="size-4 text-ink-400" />
      </InputGroupAddon>
      <InputGroupInput
        ref={inputRef}
        type="search"
        // The native WebKit cancel button duplicates our clear affordance.
        className={cn(
          "[&::-webkit-search-cancel-button]:hidden",
          inputClassName,
        )}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        disabled={disabled}
        {...props}
      />
      {value ? (
        <InputGroupAddon className="pr-1">
          <button
            type="button"
            aria-label="Clear search"
            data-slot="search-field-clear"
            tabIndex={-1}
            onClick={() => {
              setValue("");
              inputRef.current?.focus();
            }}
            className="inline-flex size-5 items-center justify-center rounded-full text-ink-400 transition-colors hover:bg-ink-wash hover:text-ink-700"
          >
            <XIcon className="size-3.5" />
          </button>
        </InputGroupAddon>
      ) : shortcut ? (
        <InputGroupAddon className="pr-1">
          <kbd
            data-slot="search-field-shortcut"
            className="px-1 font-sans text-xs text-ink-400 select-none"
          >
            {shortcut}
          </kbd>
        </InputGroupAddon>
      ) : null}
    </InputGroup>
  );
}

export { SearchField };