Search Input

"use client";

import { useEffect, useId, useRef, useState, type InputHTMLAttributes } from "react";
import { Loader2, Search, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> {
  label?: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Show a spinner in place of the clear button. */
  loading?: boolean;
  /** Focus the field with "/" (ignored while typing elsewhere). */
  slashShortcut?: boolean;
  size?: "sm" | "md";
}

/** Search field with leading icon, “/” focus shortcut hint, clear button (Escape clears too) and loading state. */
export function SearchInput({
  label = "Search incidents",
  placeholder = "Search incidents, services, people…",
  value,
  defaultValue = "",
  onValueChange,
  loading = false,
  slashShortcut = true,
  size = "md",
  className,
  ...rest
}: SearchInputProps) {
  const id = useId();
  const ref = useRef<HTMLInputElement>(null);
  const [inner, setInner] = useState(defaultValue);
  const current = value ?? inner;
  const set = (v: string) => {
    setInner(v);
    onValueChange?.(v);
  };

  useEffect(() => {
    if (!slashShortcut) return;
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement | null;
      if (e.key !== "/" || (t && (t.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(t.tagName)))) return;
      e.preventDefault();
      ref.current?.focus();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [slashShortcut]);

  return (
    <div className={cn("relative", className)}>
      <label htmlFor={id} className="sr-only">
        {label}
      </label>
      <Search
        aria-hidden
        className={cn("pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-da-muted-fg", size === "sm" ? "size-3.5" : "size-4")}
      />
      <input
        ref={ref}
        id={id}
        type="search"
        autoComplete="off"
        {...rest}
        value={current}
        onChange={(e) => set(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Escape" && current) {
            e.preventDefault();
            set("");
          }
          rest.onKeyDown?.(e);
        }}
        placeholder={placeholder}
        className={cn(
          "peer da-focus da-transition w-full rounded-da-md border border-da-border bg-da-input pr-9 text-da-fg placeholder:text-da-muted-fg hover:border-da-border-strong [&::-webkit-search-cancel-button]:hidden",
          size === "sm" ? "h-8 pl-8 text-[13px]" : "h-9 pl-9 text-sm",
        )}
      />
      <span className="absolute top-1/2 right-2 flex -translate-y-1/2 items-center">
        {loading ? (
          <Loader2 aria-label="Searching" className="size-4 animate-spin text-da-muted-fg motion-reduce:animate-none" />
        ) : current ? (
          <button
            type="button"
            onClick={() => {
              set("");
              ref.current?.focus();
            }}
            aria-label="Clear search"
            className="da-focus grid size-5 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
          >
            <X aria-hidden className="size-3.5" />
          </button>
        ) : (
          slashShortcut && (
            <kbd aria-hidden className="rounded-[4px] px-1.5 font-da-mono text-[11px] text-da-muted-fg ring-1 ring-da-border peer-focus:hidden">
              /
            </kbd>
          )
        )}
      </span>
    </div>
  );
}

export default SearchInput;