nshop-front-pc/src/components/layout/navbar/SearchPop.tsx

"use client";
import { useEffect, useRef, useState } from "react";
// import dynamicImport from "next/dynamic";
import Link from "next/link";
import { useSearchProduct } from "@/utils/hooks/useSearchProduct";
import Grid from "@/components/theme/ui/grid/Grid";
import HotSearch from "@/app/(public)/search/_components/HotSearch";
import NewProductGridItems from "@components/catalog/product/NewProductGridItems";
import Recommend from "@/app/(public)/product/_components/youmaylike/Recommend";
// const ProductGridItems = dynamicImport(
//   () => import("@/components/catalog/product/ProductGridItems"),
// );

interface SearchPopProps {
  open: boolean;
  onClose: () => void;
}

const placeholderList = [
  "Search for products...",
  "Find best sellers",
  "Search new arrivals",
  "Search discount items",
  "Search trending products",
];

export default function SearchPop({
  open,
  onClose,
}: SearchPopProps) {
  const { data, error, searchProducts,loading } = useSearchProduct();

  const [keyword, setKeyword] = useState("");
  const [placeholderIndex, setPlaceholderIndex] = useState(0);

  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);

  const inputRef = useRef<HTMLInputElement>(null);

  const products = data?.edges?.map((e) => e.node) ?? [];

  const hasKeyword = keyword.trim().length > 0;

  const hasSearchResults = hasKeyword && products.length > 0;

  /**
   * 两种情况展示 You May Like：
   *
   * 1. 刚打开，还没有输入
   * 2. 输入了，但是没有搜到产品
   */
  const showYouMayLike = !hasKeyword || (hasKeyword && products.length === 0);

  // =========================
  // 搜索接口
  // =========================
  const triggerSearch = async (searchWord: string) => {
    const value = searchWord.trim();

    if (!value) return;

    const params = {
      suggest: true,
      query: value,
      first: 8,
    };

    console.log("【接口入参 variables】", params);

    const res = await searchProducts(params);

    console.log("【接口完整返回结果】", res);

    console.log("【商品列表数据】", res.data?.search);
  };

  // =========================
  // 输入 + 防抖
  // =========================
  const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;

    setKeyword(value);

    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    if (!value.trim()) {
      return;
    }

    debounceTimerRef.current = setTimeout(() => {
      triggerSearch(value);
    }, 300);
  };

  // =========================
  // 点击 Search / Enter
  // =========================
  const handleSearch = () => {
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    triggerSearch(keyword);
  };

  // =========================
  // 关闭
  // =========================
  const handleClose = () => {
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    setKeyword("");
    onClose();
  };

  // =========================
  // placeholder 轮播
  // =========================
  useEffect(() => {
    const interval = window.setInterval(() => {
      setPlaceholderIndex((prev) => (prev + 1) % placeholderList.length);
    }, 3000);

    return () => window.clearInterval(interval);
  }, []);

  // =========================
  // 打开自动 focus
  // =========================
  useEffect(() => {
    if (!open) return;

    const timer = window.setTimeout(() => {
      inputRef.current?.focus();
    }, 100);

    return () => window.clearTimeout(timer);
  }, [open]);

  // =========================
  // 打开时锁定页面滚动
  // =========================
  useEffect(() => {
    if (!open) return;

    const oldOverflow = document.body.style.overflow;

    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = oldOverflow;
    };
  }, [open]);

  // =========================
  // Esc 关闭
  // =========================
  useEffect(() => {
    if (!open) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        handleClose();
      }
    };

    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [open]);
  useEffect(() => {
    return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current);
      }
    };
  }, []);

  if (!open) return null;

  const currentPlaceholder = placeholderList[placeholderIndex];

  return (
    <div
      className="
        fixed
        inset-x-0
        bottom-0
        top-[151px]
        z-[9998]
        bg-black/70
      "
      onMouseDown={handleClose}
    >
      <div
        className="
          mx-auto
          w-[75%]
          max-w-[1060px]
          overflow-y-auto
          bg-white
          px-[90px]
          pb-8
          pt-6
        "
        onMouseDown={(e) => e.stopPropagation()}
      >
        <div
          className="
            flex
            h-[42px]
            w-full
            items-stretch
            border
            border-[#333333]
          "
        >
          <div
            className="
              flex
              min-w-0
              flex-1
              items-center
              gap-3
              px-4
            "
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
            >
              <circle
                cx="11"
                cy="11"
                r="7"
                stroke="#222222"
                strokeWidth="1.5"
              />

              <path
                d="M16.5 16.5L21 21"
                stroke="#222222"
                strokeWidth="1.5"
                strokeLinecap="round"
              />
            </svg>

            <input
              ref={inputRef}
              value={keyword}
              type="text"
              name="search"
              autoComplete="off"
              placeholder={currentPlaceholder}
              onChange={handleKeywordChange}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  handleSearch();
                }
              }}
              className="
                h-full
                min-w-0
                flex-1
                bg-transparent
                text-[14px]
                text-black
                outline-none
                placeholder:text-[#777777]
              "
            />
          </div>
          <button
            type="button"
            onClick={handleSearch}
            className="
              m-[5px]
              flex
              w-[84px]
              shrink-0
              items-center
              justify-center
              rounded-[4px]
              bg-[#036141]
              text-[13px]
              font-medium
              text-white
              transition-opacity
              hover:opacity-90
            "
          >
            Search
          </button>
        </div>
        <div className="mt-6">
          <HotSearch />
        </div>
        {error && (
          <p
            className="
              my-4
              text-center
              text-sm
              text-red-500
            "
          >
            {error}
          </p>
        )}
        {hasSearchResults && (
          <div className="">
            <Grid className="grid grid-cols-4 gap-8 ">
                <NewProductGridItems products={products} />
            </Grid>

            {/* See All Results */}
            <div
              className="
                mb-2
                mt-8
                flex
                justify-center
              "
            >
              <Link
                href={`/search?q=${encodeURIComponent(keyword)}`}
                onClick={handleClose}
                className="
                  inline-flex
                  h-[30px]
                  min-w-[140px]
                  items-center
                  justify-center
                  rounded-full
                  border
                  border-[#333333]
                  px-7
                  text-[12px]
                  text-[#222222]
                  transition-colors
                  hover:bg-[#F5F5F5]
                "
              >
                See All Results
              </Link>
            </div>
          </div>
        )}

        {showYouMayLike && (
          <div className="">
            {/* <h2
              className="
                mb-5
                text-[18px]
                font-semibold
                text-[#111111]
              "
            >
              You May Like
            </h2>

            {youMayLikeProducts.length > 0 ? (
              <Grid
                className="
                  grid
                  w-full
                  grid-cols-4
                  gap-x-4
                  gap-y-7
                "
              >
                <ProductGridItems products={youMayLikeProducts} />
              </Grid>
            ) :
            null} */}
            {(hasKeyword && !loading && products.length === 0)&&(
               <p className="text-center font-medium text-base leading-[24px] mb-9">Sorry, we couldn't find any results</p>
            )}
            <Recommend 
              paddingClassName="py-0"
              titleClassName="text-base font-semibold"
            />
          </div>
        )}
      </div>
    </div>
  );
}