"use client";
import { useEffect, useState, useRef } from "react";
import SafeHtmlRenderer from "../SafeHtmlRenderer";
import { useRouter } from "next/navigation";
import axios from "axios";
import { BASE_URL } from "@/Constant";
import GlaApply from "../Gla/GlaApply";

function HeroAccreditationBody({ main, table }: any) {
  const router = useRouter();
  const [selected, setSelected] = useState("hs-radio-group-1");
  const [searchQuery, setSearchQuery] = useState("");
  const [showSuggestions, setShowSuggestions] = useState(false);
  const searchRef = useRef<HTMLDivElement>(null);

  const [suggestions, setSuggestions] = useState<
    {
      uniqueID: string;
      slug: string;
      displayName: string;
      type: "association" | "professional" | "organisation";
    }[]
  >([]);

  const getPlaceholder = () =>
    selected === "hs-radio-group-1"
      ? "Organisation Name / First Name"
      : "Unique Identification Number";

  const handleRadioChange = (id: string) => {
    setSelected(id);
    setSearchQuery("");
    setSuggestions([]);
    setShowSuggestions(false);
  };

  const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
  };

  const formatUniqueIDForURL = (uniqueID: string) => {
    return uniqueID.replace(/\//g, "-");
  };

  const fetchAccreditationList = async () => {
    const trimmedQuery = searchQuery.trim().toLowerCase();
    if (!trimmedQuery) {
      setSuggestions([]);
      setShowSuggestions(false);
      return;
    }

    try {
      let type = selected === "hs-radio-group-1" ? "name" : "uniqueID";

      const { data } = await axios.get(
        `${BASE_URL}association-member/searchAss?searchQuery=${trimmedQuery}&type=${type}`,
      );

      setSuggestions(data.data || []);
      setShowSuggestions(true);
    } catch (error) {
      setSuggestions([]);
      setShowSuggestions(false);
    }
  };

  const handleSuggestionClick = (item: any) => {
    let route = "";

    const formattedUniqueID = formatUniqueIDForURL(item.uniqueID);

    switch (item.type) {
      case "association":
        route = `/associationmember/${formattedUniqueID}`;
        break;
      case "professional":
        route = `/professionalmembers/${formattedUniqueID}`;
        break;
      case "organisation":
        route = `/organisationmembers/${formattedUniqueID}`;
        break;
      default:
        route = `/accreditationbody/${formattedUniqueID}`;
    }

    router.push(route);
    setShowSuggestions(false);
    setSearchQuery(
      selected === "hs-radio-group-1" ? item.displayName : item.uniqueID,
    );
  };

  // Click outside to close suggestions
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        searchRef.current &&
        !searchRef.current.contains(event.target as Node)
      ) {
        setShowSuggestions(false);
      }
    };

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

  useEffect(() => {
    // Debounce the API call
    const timer = setTimeout(() => {
      fetchAccreditationList();
    }, 300); // 300ms delay

    return () => clearTimeout(timer);
  }, [searchQuery, selected]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
    // Hide suggestions immediately when user starts deleting
    if (e.target.value === "") {
      setShowSuggestions(false);
      setSuggestions([]);
    }
  };

  return (
    <>
      <div className="container m-auto overflow-hidden pt-2">
        {/* Radio Buttons & Search */}
        <div className="w-full">
          <div className="mx-auto max-w-4xl px-9 pt-3 text-center">
            <div className="flex justify-center flex-col m-auto md:w-[75%]">
              <div className="flex flex-row md:flex-row flex-col gap-x-6 mb-3">
                {[
                  {
                    id: "hs-radio-group-1",
                    label: "Name of Organization Name / First Name",
                  },
                  {
                    id: "hs-radio-group-2",
                    label: "Unique Identification Number",
                  },
                ].map((item) => (
                  <div className="flex" key={item.id}>
                    <input
                      type="radio"
                      name="hs-radio-group"
                      className="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 checked:border-blue-500 disabled:opacity-50 disabled:pointer-events-none"
                      id={item.id}
                      checked={selected === item.id}
                      onChange={() => handleRadioChange(item.id)}
                    />
                    <label
                      htmlFor={item.id}
                      className="text-sm text-gray-500 ms-2"
                    >
                      {item.label}
                    </label>
                  </div>
                ))}
              </div>

              <form
                onSubmit={handleSearch}
                className="flex mb-8 flex-col items-center sm:flex-row justify-center relative"
                style={{ marginBottom: "85px" }}
              >
                <div className="relative flex w-full flex-1" ref={searchRef}>
                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                    🔍
                  </span>

                  <input
                    type="text"
                    className="w-full pl-10 pr-10 py-2 border rounded-md text-sm bg-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-400"
                    placeholder={getPlaceholder()}
                    value={searchQuery}
                    onChange={handleInputChange}
                    onFocus={() => {
                      if (suggestions.length > 0) {
                        setShowSuggestions(true);
                      }
                    }}
                  />

                  {searchQuery && (
                    <button
                      type="button"
                      onClick={() => {
                        setSearchQuery("");
                        setSuggestions([]);
                        setShowSuggestions(false);
                      }}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                    >
                      ✖
                    </button>
                  )}

                  {/* Updated Suggestions Dropdown */}
                  {showSuggestions && suggestions.length > 0 && (
                    <ul className="absolute gap-1 top-full left-0 right-0 z-10 bg-white border border-gray-200 shadow-md rounded-md max-h-48 overflow-auto mt-1">
                      {suggestions.map((item, index) => (
                        <li
                          key={item?.uniqueID || item.slug || index}
                          className="px-4 hover:bg-gray-100 cursor-pointer text-left pt-1 text-sm flex items-center"
                          onClick={() => handleSuggestionClick(item)}
                        >
                          <div>
                            {selected === "hs-radio-group-1"
                              ? item.displayName
                              : item.uniqueID}
                          </div>
                          <span className="text-xs bg-blue-100 text-blue-800 px-2 rounded capitalize">
                            {item.type}
                          </span>
                        </li>
                      ))}
                    </ul>
                  )}

                  {showSuggestions &&
                    searchQuery &&
                    suggestions.length === 0 && (
                      <div className="absolute top-full left-0 right-0 bg-white border border-gray-200 shadow-md rounded-md px-4 py-2 text-gray-500 text-sm mt-1 z-10">
                        No results found
                      </div>
                    )}
                </div>
              </form>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-start justify-between">
            <div className="w-full mx-auto px-4 space-y-4">
              <div className="safe">
                <SafeHtmlRenderer htmlContent={main?.ab?.fullContent} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default HeroAccreditationBody;