"use client";

import { getAllCities } from "@/lib/actions/countryStateCityActions";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { IoLocationOutline } from "react-icons/io5";
import Button from "../common/Button";

const allLocations = [
  "Riyadh",
  "Jeddah",
  "Mecca",
  "Medina",
  "Dammam",
  "Tabuk",
  "Khobar",
  "Abha",
];

// ✅ Map API entityType to frontend route paths
const entityRouteMap: Record<string, string> = {
  product: "products",
  service: "service",
  job: "jobs",
  community: "community",
};

export default function HeaderSearch({ onClose }: { onClose?: () => void }) {
  const searchRef = useRef<HTMLDivElement>(null);
  const locationListRef = useRef<HTMLUListElement>(null);
  const locationDropdownRef = useRef<HTMLDivElement>(null);
  const t = useTranslations();

  const [location, setLocation] = useState("");
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  const [showSearchResults, setShowSearchResults] = useState(false);
  const [searchResults, setSearchResults] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  const [filteredLocations, setFilteredLocations] = useState<string[]>([]);
  const [allCities, setAllCities] = useState<any[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [loadingCities, setLoadingCities] = useState<boolean>(false);
  const [searchingCities, setSearchingCities] = useState<boolean>(false);
  const [citiesSearchQuery, setCitiesSearchQuery] = useState<string>("");

  // Debounce search input (400ms)
  useEffect(() => {
    const delayDebounce = setTimeout(() => {
      if (searchQuery.trim().length > 1) {
        fetchSearchResults(searchQuery);
      } else {
        setSearchResults([]);
        setShowSearchResults(false);
      }
    }, 400);
    return () => clearTimeout(delayDebounce);
  }, [searchQuery]);

  useEffect(() => {
    const delayDebounce = setTimeout(() => {
      if (search !== citiesSearchQuery) {
        setCitiesSearchQuery(search);
        setCurrentPage(1);
        setAllCities([]);
        setHasMore(true);
      }
    }, 500);
    return () => clearTimeout(delayDebounce);
  }, [search]);

  const fetchCities = async (
    page: number,
    searchQuery: string = "",
    isLoadMore: boolean = false,
  ) => {
    if (loadingCities) return;

    try {
      setLoadingCities(true);
      const response = await getAllCities({
        page: page,
        limit: 20, // You can adjust this limit
        search: searchQuery,
      });

      let { cityData, totalPages, currentPage: responsePage } = response;
      if (cityData) {
        cityData = [
          {
            _id: 0,
            name: "All",
          },
          ...cityData,
        ];
      }
      if (cityData && Array.isArray(cityData) && cityData.length > 0) {
        const cityNames = cityData?.map((city: any) => city?.name);

        if (isLoadMore) {
          setAllCities((prev) => [...prev, ...cityData]);
          setFilteredLocations((prev) => [...prev, ...cityNames]);
        } else {
          setAllCities(cityData);
          setFilteredLocations(cityNames);

          // Set initial location if it's the first load and no location is selected
          if (page === 1 && cityNames.length > 0 && !location) {
            setLocation(cityNames[0]);
          }
        }

        setHasMore(responsePage < totalPages);
        setCurrentPage(responsePage);
      } else {
        if (!isLoadMore) {
          setAllCities([]);
          setFilteredLocations([]);
        }
        setHasMore(false);
      }
    } catch (err) {
      if (!isLoadMore) {
        setFilteredLocations([]);
      }
    } finally {
      setLoadingCities(false);
      setSearchingCities(false);
    }
  };

  const handleScroll = () => {
    if (!locationListRef.current || loadingCities || !hasMore) return;

    const list = locationListRef.current;
    const { scrollTop, scrollHeight, clientHeight } = list;

    // Load more when 50px from bottom
    if (scrollHeight - scrollTop - clientHeight < 50) {
      loadMoreCities();
    }
  };

  const loadMoreCities = () => {
    if (!loadingCities && hasMore) {
      const nextPage = currentPage + 1;
      fetchCities(nextPage, citiesSearchQuery, true);
    }
  };

  useEffect(() => {
    if (dropdownOpen) {
      fetchCities(1, citiesSearchQuery, false);
    }
  }, [citiesSearchQuery, dropdownOpen]);

  // Fetch search results from API
  const fetchSearchResults = async (query: string) => {
    try {
      setLoading(true);
      const res = await fetch(
        `${
          process.env.NEXT_PUBLIC_API
        }/api/v1/home/search?search=${encodeURIComponent(query)}`,
      );
      const data = await res.json();

      if (data?.status && data?.data?.results?.length > 0) {
        setSearchResults(data.data.results);
        setShowSearchResults(true);
      } else {
        setSearchResults([]);
        setShowSearchResults(true);
      }
    } catch (err) {
      setSearchResults([]);
    } finally {
      setLoading(false);
    }
  };

  // Hide dropdown when clicking outside
  useEffect(() => {
    fetchCities(1, citiesSearchQuery, false);

    const handleClickOutside = (event: MouseEvent) => {
      if (
        searchRef.current &&
        !searchRef.current.contains(event.target as Node)
      ) {
        setShowSearchResults(false);
      }

      if (
        locationDropdownRef.current &&
        !locationDropdownRef.current.contains(event.target as Node)
      ) {
        setDropdownOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <div
      className="relative flex w-full max-w-3xl items-center rounded-lg border border-neutrals200 bg-white p-2 focus-within:border-primary500 focus-within:shadow-Shadow2 transition-shadow duration-300 dark:bg-background dark:border-darkborder dark:focus-within:border-primary400"
      ref={searchRef}
    >
      {/* Location Selector */}
      <div className="relative">
        <button
          onClick={() => setDropdownOpen(!dropdownOpen)}
          className="flex items-center p-0 mr-2.5 text-neutrals800 text-base whitespace-nowrap dark:text-neutrals400 rtl:ml-2.5 rtl:mr-0"
        >
          <IoLocationOutline className="text-3xl dark:text-neutrals400" />
          <div className="line-clamp-1 max-w-16 w-full">{location}</div>
        </button>

        {dropdownOpen && (
          <div
            ref={locationDropdownRef}
            className="absolute left-0 z-50 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg dark:bg-background dark:border-darkborder rtl:left-auto rtl:-right-2"
          >
            <input
              type="search"
              placeholder={t("header.search_placeholder")}
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
                setSearchingCities(true);
              }}
              className="w-full px-3 py-2 text-sm border-b outline-none dark:bg-background dark:border-darkborder"
            />
            {searchingCities && (
              <div className="absolute right-4 top-1/2 transform -translate-y-1/2">
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary500"></div>
              </div>
            )}
            <ul
              ref={locationListRef}
              onScroll={handleScroll}
              className="max-h-40 overflow-y-auto"
            >
              {filteredLocations.length ? (
                filteredLocations.map((loc, index) => (
                  <li
                    key={index}
                    onClick={() => {
                      setLocation(loc);
                      setDropdownOpen(false);
                      setSearch("");
                      setCitiesSearchQuery("");
                    }}
                    className="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:text-white dark:hover:text-neutrals800"
                  >
                    {loc}
                  </li>
                ))
              ) : (
                <li className="px-3 py-2 text-sm text-gray-400">
                  {t("header.no_results")}
                </li>
              )}

              {loadingCities && (
                <li className="px-3 py-2 text-sm text-center text-gray-500 dark:text-gray-400">
                  <div className="flex items-center justify-center">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary500 mr-2"></div>
                    {t("header.loading_more_cities")}
                  </div>
                </li>
              )}
            </ul>
          </div>
        )}
      </div>

      <div className="w-px h-6 bg-neutrals100 dark:bg-neutrals400" />

      {/* Search Input */}
      <input
        type="search"
        placeholder={t("header.type_here")}
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        className="flex-grow px-4 py-1 md:py-2 text-sm placeholder:text-gray-400 focus:outline-none w-full dark:bg-background dark:placeholder:text-neutrals400 dark:text-neutrals400"
      />

      {/* <button className="hidden md:flex items-center gap-2 px-4 py-2.5 text-white bg-primary500 hover:bg-primary600 text-base rounded-lg dark:bg-primary400">
        {t("header.search")}
      </button> */}

      <Button
        type="submit"
        label={t("header.search")}
        variant="secondary"
        className="min-w-20 hidden md:flex items-center gap-2 px-4 justify-center"
      ></Button>

      {/* Search Results Dropdown */}
      {showSearchResults && (
        <div className="absolute top-full left-0 mt-0.5 w-full bg-white border shadow-Shadow1 border-neutrals200 rounded-lg z-40 px-4 py-3 dark:bg-darkbg dark:border-darkborder">
          {loading ? (
            <div className="text-center py-2 text-sm text-gray-400">
              {t("header.searching")}
            </div>
          ) : searchResults.length > 0 ? (
            <div>
              {Object.entries(
                searchResults.reduce<Record<string, any[]>>((acc, item) => {
                  const type = item.entityType || "others";
                  if (!acc[type]) acc[type] = [];
                  acc[type].push(item);
                  return acc;
                }, {}),
              ).map(([entityType, items]) => {
                const typedItems = items as any[];
                const routePrefix = entityRouteMap[entityType] || entityType;
                if (!typedItems.length) return null;

                return (
                  <div key={entityType} className="mb-3 last:mb-0">
                    {/* Group Header */}
                    <div className="text-sm font-semibold text-primary600 mb-1.5 uppercase tracking-wide dark:text-primary400 border-b border-gray-100 pb-1">
                      {entityType}
                    </div>

                    {/* Child Items */}
                    <ul className="pl-3 space-y-1">
                      {typedItems.map((item, idx) => (
                        <li
                          key={idx}
                          className="py-1.5 px-2 rounded-md cursor-pointer group hover:bg-gray-50 dark:hover:bg-neutral-800 transition-colors"
                          onClick={() => {
                            if (onClose) onClose();
                            setShowSearchResults(false);
                            setSearchQuery("");
                            setSearchResults([]);
                          }}
                        >
                          <Link
                            href={`/${routePrefix}/${item.slug || item.id}`}
                            className="block"
                          >
                            <div className="font-medium text-[15px] text-neutrals800 group-hover:text-primary600 line-clamp-1 dark:text-white dark:group-hover:text-primary400">
                              {item.title || item.name}
                            </div>
                          </Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-2 text-sm text-gray-400">
              {t("header.no_results")}
            </div>
          )}
        </div>
      )}
    </div>
  );
}