"use client";
import { Search } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState, type FormEvent } from "react";
import { Input } from "@/components/ui/input";
import { parseItemSearchParams, buildItemSearchUrl } from "@/lib/item-search-params";

export function SearchBar() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [value, setValue] = useState("");

  // Sync input value with URL search params (legitimate external-to-local state sync)
  useEffect(() => {
    if (pathname === "/items") {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing URL search params to local input state
      setValue(searchParams.get("q") ?? "");
    }
  }, [pathname, searchParams]);

  function onSubmit(e: FormEvent) {
    e.preventDefault();
    const trimmed = value.trim();
    if (trimmed === "") return;
    const current = parseItemSearchParams(new URLSearchParams(searchParams.toString()));
    const url = buildItemSearchUrl(current, { q: trimmed });
    router.push(url);
  }

  return (
    <form onSubmit={onSubmit} className="relative w-full max-w-md" role="search">
      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
      <Input
        type="search"
        placeholder="Search items, brands, stores..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="h-10 w-full pl-10"
      />
    </form>
  );
}