// @ts-nocheck
import {
  MagnifyingGlassIcon,
  PhotoIcon,
  PlusIcon,
} from "@heroicons/react/24/outline";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeBadgeBaseProperties } from "../features/badges/badgesSlice";
import { useGetSearchDataQuery } from "../features/search/searchApi";
import cn from "../utils/cn";
import LoadingSpinner from "./LoadingSpinner";
import { Input } from "./ui/input";

const AsyncSearchSelect = () => {
  const [query, setQuery] = useState({ search: "" });
  const [searchTerm, setSearchTerm] = useState("");
  const [isDropdownVisible, setDropdownVisible] = useState(false);
  const { data, isLoading, isFetching, isError } = useGetSearchDataQuery(
    { endpoint: "product", query },
    { skip: !query.search },
  );
  const { filter } = useSelector((state) => state.badges);
  const dispatch = useDispatch();
  const dropdownRef = useRef(null);

  // Update query when search term changes
  useEffect(() => {
    const handler = setTimeout(() => {
      setQuery((prevState) => ({ ...prevState, search: searchTerm.trim() }));
    }, 500);

    return () => clearTimeout(handler);
  }, [searchTerm]);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setDropdownVisible(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [dropdownRef]);

  const handleQueryChange = (e) => {
    setSearchTerm(e.target.value);
    setDropdownVisible(true);
  };

  const handleAddToFilter = (product) => {
    if (filter.some((item) => item.id === product.id)) {
      dispatch(
        changeBadgeBaseProperties({
          name: "filter",
          value: filter.filter((item) => item.id !== product.id),
        }),
      );
    } else {
      dispatch(
        changeBadgeBaseProperties({
          name: "filter",
          value: [...filter, { id: product.id, name: product.name }],
        }),
      );
    }
  };

  const isSelected = (product) => filter.some((item) => item.id === product.id);

  return (
    <div className="ino:relative ino:w-full">
      <div className="ino:relative">
        <MagnifyingGlassIcon className="ino:pointer-events-none ino:absolute ino:top-1/2 ino:left-2.5 ino:size-4 ino:-translate-y-1/2 ino:text-muted-foreground" />
        <Input
          onFocus={() => setDropdownVisible(true)}
          value={searchTerm}
          type="text"
          onChange={handleQueryChange}
          placeholder="Search by name or SKU"
          className="ino:block ino:h-9! ino:min-h-0! ino:w-full ino:rounded-md! ino:bg-card ino:pr-8! ino:pl-8!"
        />
        <div className="ino:absolute ino:inset-y-0 ino:right-0 ino:flex ino:items-center ino:pr-2.5">
          {isLoading || isFetching ? <LoadingSpinner /> : null}
        </div>
      </div>
      {isDropdownVisible &&
        searchTerm &&
        ((data && !isError) || (isError && !isFetching)) && (
        <div
          ref={dropdownRef}
          className="ino:absolute ino:z-20 ino:mt-1.5 ino:w-full ino:overflow-hidden ino:rounded-lg ino:border ino:border-border ino:bg-popover ino:shadow-lg"
        >
          {!isError && data?.length > 0 ? (
            <>
              <p className="ino:m-0 ino:border-b ino:border-border ino:px-3 ino:py-2 ino:text-[11px] ino:font-semibold ino:tracking-wider ino:text-muted-foreground ino:uppercase">
                {data.length} {data.length === 1 ? "product" : "products"}{" "}
                found
              </p>
              <ul className="ino:custom-scrollbar ino:m-0 ino:max-h-64 ino:overflow-y-auto ino:p-1">
                {data.map((product) => {
                  const selected = isSelected(product);

                  return (
                    <li
                      key={product.id}
                      role="option"
                      aria-selected={selected}
                      onClick={() => handleAddToFilter(product)}
                      className={cn(
                        "ino:group ino:m-0 ino:flex ino:cursor-pointer ino:items-center ino:gap-2.5 ino:rounded-md ino:px-2 ino:py-1.5 ino:transition-colors",
                        selected
                          ? "ino:bg-primary/5"
                          : "ino:hover:bg-muted",
                      )}
                    >
                      <div className="ino:flex ino:size-9 ino:shrink-0 ino:items-center ino:justify-center ino:overflow-hidden ino:rounded-md ino:border ino:border-border ino:bg-muted">
                        {product.image ? (
                          <img
                            className="ino:size-full ino:object-cover"
                            src={product.image}
                            alt=""
                            loading="lazy"
                          />
                        ) : (
                          <PhotoIcon className="ino:size-4 ino:text-muted-foreground" />
                        )}
                      </div>
                      <div className="ino:min-w-0 ino:flex-1">
                        <p
                          className={cn(
                            "ino:m-0 ino:truncate ino:text-sm ino:font-medium",
                            selected ? "ino:text-primary" : "ino:text-foreground",
                          )}
                        >
                          {product.name}
                        </p>
                        {product.sku ? (
                          <p className="ino:m-0 ino:truncate ino:text-xs ino:text-muted-foreground">
                            SKU: {product.sku}
                          </p>
                        ) : null}
                      </div>
                      {selected ? (
                        <CheckCircleIcon className="ino:size-5 ino:shrink-0 ino:text-primary" />
                      ) : (
                        <span className="ino:flex ino:size-6 ino:shrink-0 ino:items-center ino:justify-center ino:rounded-md ino:text-muted-foreground ino:transition-colors ino:group-hover:bg-primary/10 ino:group-hover:text-primary">
                          <PlusIcon className="ino:size-4" />
                        </span>
                      )}
                    </li>
                  );
                })}
              </ul>
            </>
          ) : (
            <div className="ino:flex ino:flex-col ino:items-center ino:gap-1 ino:px-3 ino:py-5 ino:text-center">
              <MagnifyingGlassIcon className="ino:size-5 ino:text-muted-foreground/60" />
              <p className="ino:m-0 ino:text-sm ino:font-medium ino:text-foreground">
                No products found
              </p>
              <p className="ino:m-0 ino:text-xs ino:text-muted-foreground">
                Try a different name or SKU.
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default AsyncSearchSelect;