import React, {
  useState,
  Dispatch,
  SetStateAction,
  useEffect,
  useRef,
} from "react";
import useDebounce from "../../hooks/useDebounce";
import { useLocationSearch } from "../../utils/hooks/useLocationSearch";

interface LocationBoxProps {
  setSortAndFilterOptions: Dispatch<SetStateAction<SortAndFilterOptionsType>>;
  sortAndFilterOptions: SortAndFilterOptionsType;
  setClearAllStateDisabled: Dispatch<SetStateAction<boolean>>;
}

type DropdownItem = {
  type: "country" | "state" | "city";
  label: string;
  countryId?: number;
  stateId?: number;
  cityId?: number;
};

const LocationBox: React.FC<LocationBoxProps> = ({
  setSortAndFilterOptions,
  sortAndFilterOptions,
  setClearAllStateDisabled,
}) => {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 100);

  const [dropdownItems, setDropdownItems] = useState<DropdownItem[]>([]);
  const [activeIndex, setActiveIndex] = useState<number>(-1);
  const [isFinalSelection, setIsFinalSelection] = useState(false);
  const listRef = useRef<HTMLUListElement | null>(null);

  const handleLocationChange = (value: string) => {
    if (value !== "") setClearAllStateDisabled(false);
    setSortAndFilterOptions({
      ...sortAndFilterOptions,
      locationSearchKeyword: value,
    });
  };

  useEffect(() => {
    handleLocationChange(debouncedQuery);
  }, [debouncedQuery]);

  //   useEffect(() => {
  //     const fetchLocations = async () => {
  //       if (!debouncedQuery.trim()) {
  //         setDropdownItems([]);
  //         return;
  //       }

  //       try {
  //         const { resp, status } = await useLocationSearch(debouncedQuery);
  //         if (status === 200) setDropdownItems(resp.results);
  //       } catch (err) {
  //         console.error("Search error:", err);
  //         setDropdownItems([]);
  //       }
  //     };

  //     fetchLocations();
  //   }, [debouncedQuery]);

  useEffect(() => {
    const fetchLocations = async () => {
      if (!debouncedQuery.trim()) {
        console.log("Query empty, clearing dropdown");
        setDropdownItems([]);
        return;
      }

      try {
        console.log("Searching for:", debouncedQuery);
        const { resp, status } = await useLocationSearch(debouncedQuery);
        console.log("Search response:", resp, "Status:", status);

        if (status === 200 && Array.isArray(resp.results)) {
          setDropdownItems(resp.results);
        } else {
          setDropdownItems([]);
        }
      } catch (err) {
        console.error("Search error:", err);
        setDropdownItems([]);
      }
    };

    fetchLocations();
  }, [debouncedQuery]);

  useEffect(() => {
    console.log("Dropdown items updated:", dropdownItems);
  }, [dropdownItems]);

  useEffect(() => {
    // Reset dropdown visibility when query changes
    setIsFinalSelection(false);
  }, [query]);

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    const listItems = listRef.current?.querySelectorAll("li") || [];
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActiveIndex((prev) => Math.min(prev + 1, listItems.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActiveIndex((prev) => Math.max(prev - 1, 0));
    } else if (e.key === "Enter" && activeIndex >= 0) {
      e.preventDefault();
      const selectedItem = listItems[activeIndex];
      selectedItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    }
  };

  useEffect(() => {
    const listItems = listRef.current?.querySelectorAll("li");
    if (listItems && listItems[activeIndex]) {
      (listItems[activeIndex] as HTMLElement).scrollIntoView({
        block: "nearest",
      });
    }
  }, [activeIndex]);

  console.log({
    query,
    debouncedQuery,
    dropdownItems,
    isFinalSelection,
  });

  return (
    <form method="post" style={{ position: "relative" }}>
      <span className="icon flaticon-map-locator"></span>
      <input
        type="text"
        name="listing-search"
        placeholder="Search Country, State or City"
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
          setActiveIndex(-1);
        }}
        onKeyDown={handleKeyDown}
        style={{
          width: "100%",
          padding: "8px",
          paddingLeft: "50px",
          fontSize: "1rem",
        }}
      />

      {query && (
        <button
          type="button"
          onClick={() => {
            setQuery("");
            setDropdownItems([]);
            setSortAndFilterOptions({
              ...sortAndFilterOptions,
              locationSearchKeyword: "",
            });
            setIsFinalSelection(false);
          }}
          style={{
            position: "absolute",
            right: "10px",
            top: "50%",
            transform: "translateY(-50%)",
            background: "none",
            border: "none",
            cursor: "pointer",
            fontSize: "1.2rem",
            color: "#888",
          }}
        >
          ×
        </button>
      )}

      {dropdownItems.length > 0 && !isFinalSelection && (
        <ul
          className="auto-complete-list"
          ref={listRef}
          style={{
            listStyle: "none",
            padding: 0,
            margin: 0,
            maxHeight: "200px",
            overflowY: "auto",
            border: "1px solid #ccc",
            borderRadius: "4px",
            position: "absolute",
            width: "100%",
            backgroundColor: "white",
            zIndex: 9999,
          }}
        >
          {dropdownItems.map((item, index) => (
            <li
              key={`${item.type}-${item.countryId ?? ""}-${item.stateId ?? ""}-${item.cityId ?? ""}`}
              onClick={() => {
                setQuery(item.label);
                setIsFinalSelection(true);
                setActiveIndex(-1);
                handleLocationChange(item.label);
              }}
              style={{
                padding: "8px",
                cursor: "pointer",
                backgroundColor: index === activeIndex ? "#eee" : "#fff",
              }}
            >
              {item.label}
            </li>
          ))}
        </ul>
      )}
    </form>
  );
};

export default LocationBox;