"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 type { Product } from "@/data/types";
import { formatPrice } from "@/lib/format";
import { cn } from "@/lib/cn";

/** Live product search against MariaDB catalog API. */
export function LiveSearch({ compact = false }: { compact?: boolean }) {
  const router = useRouter();
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const [results, setResults] = useState<Product[]>([]);
  const deferred = useDeferredValue(query.trim());
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!deferred) {
      setResults([]);
      return;
    }
    const controller = new AbortController();
    const timer = window.setTimeout(() => {
      void fetch(`/api/products?q=${encodeURIComponent(deferred)}&limit=8`, {
        signal: controller.signal,
      })
        .then((res) => res.json())
        .then((data: { products?: Product[] }) =>
          setResults(data.products ?? []),
        )
        .catch(() => setResults([]));
    }, 180);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [deferred]);

  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="relative">
        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted sm:left-3.5" />
        <input
          value={query}
          onChange={(event) => {
            setQuery(event.target.value);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          placeholder={compact ? "Search" : "Search"}
          className={cn(
            "w-full border border-border bg-surface text-sm text-foreground outline-none transition focus:border-foreground",
            compact
              ? "h-9 pl-9 pr-[4.5rem]"
              : "h-9 pl-10 pr-20",
          )}
          autoComplete="off"
          enterKeyHint="search"
        />
        <button
          type="submit"
          className={cn(
            "absolute right-0 top-0 h-full bg-foreground font-medium uppercase tracking-[0.12em] text-background transition hover:bg-[var(--accent)]",
            compact ? "px-3 text-[10px]" : "px-3.5 text-[10px]",
          )}
        >
          Search
        </button>
      </form>

      {open && deferred ? (
        <div className="absolute left-0 right-0 top-[calc(100%+0.4rem)] z-[60] max-h-[min(22rem,70vh)] overflow-hidden border border-border bg-[var(--paper)] shadow-[0_18px_40px_rgba(28,25,21,0.12)]">
          {results.length === 0 ? (
            <p className="px-4 py-5 text-sm text-muted">
              No products match “{deferred}”.
            </p>
          ) : (
            <ul className="max-h-[min(18rem,55vh)] overflow-y-auto overscroll-contain 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 transition hover:bg-card"
                  >
                    <span className="relative h-10 w-8 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="mt-0.5 block text-[11px] uppercase tracking-wide text-muted">
                        {product.category}
                      </span>
                    </span>
                    <span className="shrink-0 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 text-foreground hover:bg-card"
          >
            View all results for “{deferred}”
          </Link>
        </div>
      ) : null}
    </div>
  );
}