"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { IconSearch, IconX } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { Spinner } from "./spinner";

/**
 * Search field with an icon, a clear button that appears with text, an
 * optional loading state, and debounced `onSearch`. Escape clears it.
 */
export function SearchInput({
  value,
  onValueChange,
  onSearch,
  debounceMs = 250,
  placeholder = "Search",
  loading = false,
  className,
  autoFocus,
}: {
  value: string;
  onValueChange: (value: string) => void;
  /** Called after typing pauses, and immediately on Enter. */
  onSearch?: (value: string) => void;
  debounceMs?: number;
  placeholder?: string;
  loading?: boolean;
  className?: string;
  autoFocus?: boolean;
}) {
  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const inputRef = React.useRef<HTMLInputElement | null>(null);
  React.useEffect(() => () => {
    if (timer.current) clearTimeout(timer.current);
  }, []);
  const schedule = (next: string) => {
    if (!onSearch) return;
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => onSearch(next), debounceMs);
  };
  // Immediate searches (Enter, Escape, Clear) cancel the pending one, so a
  // query typed just before clearing cannot fire afterwards.
  const searchNow = (next: string) => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = null;
    onSearch?.(next);
  };
  return (
    <div
      className={cn(
        "group/search relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-input bg-muted transition-[border-color,box-shadow] duration-150 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
        className,
      )}
    >
      <IconSearch aria-hidden="true" className="pointer-events-none ml-3 size-4 shrink-0 text-muted-foreground" />
      <input
        ref={inputRef}
        type="search"
        value={value}
        placeholder={placeholder}
        aria-label={placeholder}
        autoFocus={autoFocus}
        onChange={(event) => {
          onValueChange(event.target.value);
          schedule(event.target.value);
        }}
        onKeyDown={(event) => {
          if (event.key === "Enter") {
            searchNow(value);
          } else if (event.key === "Escape" && value) {
            event.preventDefault();
            onValueChange("");
            searchNow("");
          }
        }}
        className="h-full min-w-0 flex-1 bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden"
      />
      <span className="mr-1.5 flex size-6 shrink-0 items-center justify-center">
        <AnimatePresence initial={false} mode="popLayout">
          {loading ? (
            <motion.span key="loading" initial={{ opacity: 0, scale: 0.6 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.6 }} className="flex text-muted-foreground">
              <Spinner size="sm" label="Searching" />
            </motion.span>
          ) : value ? (
            <motion.button
              key="clear"
              type="button"
              aria-label="Clear search"
              initial={{ opacity: 0, scale: 0.6 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.6 }}
              onClick={() => {
                onValueChange("");
                searchNow("");
                inputRef.current?.focus();
              }}
              className="flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            >
              <IconX className="size-3.5" />
            </motion.button>
          ) : null}
        </AnimatePresence>
      </span>
    </div>
  );
}