arjmand-pharmacy/components/layout/InstantSearch.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { Search } from "lucide-react";
import { Placeholder } from "@/components/Placeholder";
import { formatPrice } from "@/lib/format";
import { variantTitle, type StoreVariant } from "@/lib/store";

export function InstantSearch({ compact = false }: { compact?: boolean }) {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState<StoreVariant[]>([]);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const box = useRef<HTMLDivElement>(null);

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

  useEffect(() => {
    const value = query.trim();
    if (value.length <= 2) {
      setItems([]);
      setOpen(false);
      setLoading(false);
      return;
    }

    const timer = setTimeout(async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(value)}`);
        const data = (await response.json()) as { items?: StoreVariant[] };
        setItems(data.items ?? []);
        setOpen(true);
      } catch {
        setItems([]);
      } finally {
        setLoading(false);
      }
    }, 250);

    return () => clearTimeout(timer);
  }, [query]);

  return (
    <div ref={box} className={`relative ${compact ? "w-full" : "hidden min-w-0 flex-1 md:block"}`}>
      <input
        type="search"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        onFocus={() => {
          if (query.trim().length > 2) setOpen(true);
        }}
        placeholder={compact ? "جستجو..." : "جستجوی دارو، مکمل و محصولات بهداشتی..."}
        className="h-11 w-full rounded-xl border border-line bg-mist pr-4 pl-11 text-[13px] outline-none transition focus:border-primary focus:bg-white"
      />
      <Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted" />

      {open ? (
        <div className="absolute inset-x-0 top-[calc(100%+8px)] z-50 overflow-hidden rounded-2xl border border-line bg-white shadow-[0_16px_40px_rgba(0,38,133,0.12)]">
          {loading ? (
            <p className="px-4 py-3 text-[13px] text-muted">در حال جستجو...</p>
          ) : items.length === 0 ? (
            <p className="px-4 py-3 text-[13px] text-muted">نتیجه‌ای پیدا نشد.</p>
          ) : (
            <ul className="max-h-[360px] overflow-y-auto py-2">
              {items.map((item) => {
                const price = item.discountedPrice ?? item.price;
                return (
                  <li key={item.id}>
                    <Link
                      href={`/products/${encodeURIComponent(item.id)}`}
                      className="flex items-center gap-3 px-3 py-2 hover:bg-mist"
                      onClick={() => setOpen(false)}
                    >
                      <span className="grid size-12 shrink-0 overflow-hidden rounded-lg bg-sky">
                        <Placeholder
                          src={item.productImage || "/placeholders/product.svg"}
                          className="size-full object-cover"
                        />
                      </span>
                      <span className="min-w-0 flex-1">
                        <span className="line-clamp-1 text-[13px] text-ink">{variantTitle(item)}</span>
                        <span className="mt-0.5 block text-[12px] text-muted">
                          {price != null ? `${formatPrice(price)} تومان` : "تماس بگیرید"}
                        </span>
                      </span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      ) : null}
    </div>
  );
}