"use client";

import Image from "next/image";
import search from "../../../public/assets/icons/search-normal.svg";
import { useRef, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import apiServiceCall from "@/lib/apiServiceCall";
import { useRouter } from "next/navigation";
import { useLocale } from "next-intl";

const SearchBox = ({ searchC, openSearch, locale }: any) => {
  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [showResults, setShowResults] = useState(false);
  const searchResultsRef = useRef<HTMLDivElement>(null);
  const router = useRouter();

const {
  data: searchData,
  isLoading: isSearchLoading,
} = useQuery({
  queryKey: ["search", searchTerm],
  queryFn: async () => {
    return apiServiceCall({
      url: `search?search=${encodeURIComponent(searchTerm)}`,
      method: "GET",
      headers: {
        "Accept-language": locale,
      },
    });
  },
  enabled: searchTerm.trim().length >= 2,
});

 


  // Debounce function for search
const handleSearchChange = (e: any) => {
  const value = e.target.value;
  setSearchTerm(value);

  if (value.trim().length >= 2) {
    setShowResults(true);
  } else {
    setShowResults(false);
  }
};


   
  return (
    <>
      <div
        onClick={searchC}
        className={`fixed inset-0 flex justify-end top-16 lg:top-20 items-center transition-opacity duration-600 ease-in-out ${
          openSearch ? "opacity-100 z-[9999]" : "opacity-0 pointer-events-none"
        }`}
        style={{ zIndex:openSearch ? 9999 : -1 }}
      >
        {openSearch && (
          <div
            onClick={(e) => e.stopPropagation()}
            className={`w-full h-full flex flex-col items-end gap-6 transform transition-all duration-700 ease-in-out ${
              openSearch ? "scale-100 opacity-100" : "scale-95 opacity-0"
            }`}
          >
            <div className="bg-white w-full p-4 relative z-[10000]">
              <div
                className={` ${
                  locale === "ar" ? "flex flex-row" : " flex flex-row-reverse"
                }`}
              >
                <input
                  type="text"
                  placeholder="Search ..."
                  className="h-[50px] w-full text-black border-b border-gray-200 focus:outline-none focus:border-primary"
                  value={searchTerm}
                  onChange={handleSearchChange}
                  onFocus={() =>
                    searchTerm.trim().length > 2 && setShowResults(true)
                  }
                />
                <div
                  className={`absolute top-6 flex ltr:right-6 rtl:left-6`}
                >
                  <Image
                    src={search}
                    alt="search"
                    className={`w-[24px] h-[24px] cursor-pointer `}
                  />
                </div>
              </div>

              {/* <div className="border-b border-light-stroke"></div> */}

              {showResults && searchData?.data?.length > 0 && (
                <div
                  ref={searchResultsRef}
                  className="absolute z-[10001] top-[70px] left-0 w-full bg-white shadow-lg rounded-md mt-1 h-60 overflow-auto"
                >
                  {searchData?.data?.map((item: any, index: number) => {
                    const url =
                      item?.type === "developers"
                        ? `developers/${item?.slug}`
                        : item?.type === "properties"
                        ? `properties/${item?.slug}`
                        : item?.type === "blogs"
                        ? `blogs/${item?.slug}`
                        : "";

                    return (
                      <div
                        key={index}
                        className="p-3 text-black hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 transition-colors duration-200"
                        onClick={() => {
                          router.push(`/${locale}/${url}`);
                          setShowResults(false);
                          setSearchTerm("");
                          searchC();
                        }}
                      >
                        <p className="text-sm font-medium">{item.name}</p>
                        <p className="text-xs text-gray-500 capitalize">{item.type}</p>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default SearchBox;