"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  useDeferredValue,
  useEffect,
  useRef,
  useState,
  type FormEvent,
} from "react";
import { Search } from "lucide-react";
import { SafeImage } from "@/components/ui/SafeImage";
import { searchSilo } from "@/data/silo-catalog";
import { formatPrice } from "@/lib/format";
import { cn } from "@/lib/cn";

export function LiveSearch({ compact = false }: { compact?: boolean }) {
  const router = useRouter();
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const deferred = useDeferredValue(query.trim());
  const rootRef = useRef<HTMLDivElement>(null);
  const results = searchSilo(deferred, 8);

  useEffect(() => {
    const onPointer = (event: MouseEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", onPointer);
    return () => document.removeEventListener("mousedown", onPointer);
  }, []);

  const onSearch = (event: FormEvent) => {
    event.preventDefault();
    const q = query.trim();
    setOpen(false);
    router.push(q ? `/shop?q=${encodeURIComponent(q)}` : "/shop");
  };

  return (
    <div ref={rootRef} className="relative min-w-0 w-full flex-1">
      <form onSubmit={onSearch} className="search-bin relative">
        <Search className="pointer-events-none absolute left-3 top-1/2 z-[1] h-4 w-4 -translate-y-1/2 text-muted" />
        <input
          value={query}
          onChange={(event) => {
            setQuery(event.target.value);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          placeholder={compact ? "Search the crib…" : "Search oats, sausage, Silo Drops…"}
          className={compact ? "h-10" : undefined}
          autoComplete="off"
          enterKeyHint="search"
        />
        <button type="submit" className="btn-bin">
          Search
        </button>
      </form>

      {open && deferred ? (
        <div className="absolute left-0 right-0 top-[calc(100%+0.5rem)] z-[60] overflow-hidden rounded-sm border border-border bg-card">
          {results.length === 0 ? (
            <p className="px-4 py-5 text-sm text-muted">Nothing in this crib for “{deferred}”.</p>
          ) : (
            <ul className="max-h-[18rem] overflow-y-auto py-2">
              {results.map((product) => (
                <li key={product.id}>
                  <Link
                    href={`/product/${product.id}`}
                    onClick={() => {
                      setOpen(false);
                      setQuery("");
                    }}
                    className="flex items-center gap-3 px-3 py-2.5 hover:bg-surface"
                  >
                    <span className="relative h-12 w-12 shrink-0 overflow-hidden bg-surface">
                      <SafeImage
                        src={product.images[0]}
                        alt={product.name}
                        fill
                        sizes="48px"
                        className="object-cover"
                      />
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-sm font-medium">{product.name}</span>
                      <span className="text-[11px] text-muted">{product.seller}</span>
                    </span>
                    <span className="text-sm font-semibold tabular-nums">
                      {formatPrice(product.price)}
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          )}
          <Link
            href={`/shop?q=${encodeURIComponent(deferred)}`}
            onClick={() => setOpen(false)}
            className="block border-t border-border px-4 py-3 text-center text-xs font-semibold"
          >
            View all results
          </Link>
        </div>
      ) : null}
    </div>
  );
}