"use client";
import { useRouter } from "next/navigation";
import { useState, FormEvent, useEffect, useRef } from "react";
import { getApiClient } from "@/utils/apiClient";

const trendingSearch = [
  { id: "1", label: "Mushroom" },
  { id: "2", label: "Mughal" },
  { id: "3", label: "Floral" },
  { id: "4", label: "Jacket" },
  { id: "5", label: "Black" },
];

type HeaderSearchBoxProps = {
  onClose?: () => void; // injected by ToggleSection
};

export default function HeaderSearchBox({ onClose }: HeaderSearchBoxProps) {
  const router = useRouter();
  const [query, setQuery] = useState("");
  const [searchType, setSearchType] = useState("all");
  const [suggestions, setSuggestions] = useState<string[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [searchResults, setSearchResults] = useState<any[]>([]);
  const suggestionsRef = useRef<HTMLUListElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);


  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  function handleSearchSubmit(e: FormEvent) {
    e.preventDefault();
    if (!query.trim()) return;

    const searchParams = new URLSearchParams();
    searchParams.append("q", query.trim());
    if (searchType !== "all") {
      searchParams.append("searchType", searchType);
    }

    router.push(`/search?${searchParams.toString()}`);
    setShowSuggestions(false);

    onClose?.(); 
  }

  useEffect(() => {
    const fetchSuggestions = async () => {
      if (query.length < 2) {
        setSuggestions([]);
        setSearchResults([]);
        setShowSuggestions(false);
        return;
      }

      try {
        const url = new URL('/api/search', window.location.origin);
        url.searchParams.append('q', query.trim());
        
        const response = await fetch(url.toString());
        const data = await response.json();
        
        setSearchResults(data.data?.result || []);

        const productSuggestions =
          data.data?.result?.map((item: any) => item.product_name).filter(Boolean) ||
          [];
        setSuggestions(productSuggestions);
        setShowSuggestions(productSuggestions.length > 0);
      } catch (error) {
        console.error("Error fetching suggestions:", error);
        setSuggestions([]);
        setShowSuggestions(false);
      }
    };

    const debounceTimer = setTimeout(fetchSuggestions, 300);
    return () => clearTimeout(debounceTimer);
  }, [query]);


  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (
        suggestionsRef.current &&
        !suggestionsRef.current.contains(event.target as Node)
      ) {
        setShowSuggestions(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  function handleSuggestionClick(suggestion: string) {
    setQuery(suggestion);
    setShowSuggestions(false);
    router.push(`/search?q=${encodeURIComponent(suggestion)}`);
    onClose?.();
  }

  return (
    <div className="wrapper relative">
      <div className="mx-auto flex w-full flex-col gap-10 py-10 md:w-[60%] md:gap-20 md:py-20">
        {/* === Search form === */}
        <div className="flex w-full flex-col bg-[url(/icons/hairlines-wider.svg)] bg-[auto_6px] bg-repeat p-[6]">
          <form
            onSubmit={handleSearchSubmit}
            className="relative flex flex-col gap-2 bg-white p-5 md:p-10"
            autoComplete="off"
          >
            <label htmlFor="site_search" className="text-md font-medium">
              Morni search for
            </label>
            <div className="relative flex flex-row items-center justify-between gap-2 align-middle">

              <div className="relative flex w-full flex-col">
                <input
                  ref={inputRef}
                  type="search"
                  id="site_search"
                  name="site_search"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Products, fabrics, design studios, co-creators, and more ..."
                  className="search-cancel:appearance w-full pl-0 text-xl font-medium placeholder:text-sm placeholder:font-light md:pl-1 md:text-2xl md:placeholder:text-lg"
                  autoComplete="off"
                  onFocus={() => query.length >= 2 && setShowSuggestions(true)}
                />

                {showSuggestions && suggestions.length > 0 && (
                  <ul
                    ref={suggestionsRef}
                    className="absolute top-10 left-0 z-50 max-h-60 w-full overflow-auto border bg-white p-2 shadow-md"
                  >
                    {suggestions.map((suggestion, idx) => (
                      <li
                        key={idx}
                        tabIndex={0}
                        className="cursor-pointer px-4 py-2 hover:bg-gray-200"
                        onClick={() => handleSuggestionClick(suggestion)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter")
                            handleSuggestionClick(suggestion);
                        }}
                      >
                        {suggestion}
                      </li>
                    ))}
                  </ul>
                )}
              </div>

              <button
                type="submit"
                className="h-11 w-16 cursor-pointer flex items-center justify-center"
                aria-label="Submit search"
              >
                <i className="icon-[solar--arrow-right-broken] relative top-2"></i>
              </button>
            </div>
          </form>
        </div>

        <div className="flex w-full flex-col">
          <h6 className="font-bogart text-xl">Trending Searches</h6>
          <ul className="mt-2 flex flex-wrap gap-2">
            {trendingSearch.map((item) => (
              <li key={item.id} className="inline-flex">
                <button
                  type="button"
                  onClick={() => {
                    setQuery("");
                    router.push(
                      `/search?q=${encodeURIComponent(
                        item.label,
                      )}&searchType=${encodeURIComponent(searchType)}`,
                    );
                    onClose?.();
                  }}
                  className="flex w-full rounded-md bg-gray-100 px-4 py-2 text-sm hover:bg-gray-950 hover:text-white"
                >
                  {item.label}
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}