"use client";
import { useEffect, useState, useRef } from "react";
import SafeHtmlRenderer from "../SafeHtmlRenderer";
import AboutAccreditation from "./ABTable";
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 [suggestions, setSuggestions] = useState<
    { uniqueID: string; slug: string; organisationName: string }[]
  >([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const searchRef = useRef<HTMLDivElement>(null);

  const getPlaceholder = () =>
    selected === "hs-radio-group-1"
      ? "Name of Organization"
      : "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 encodeURIComponent(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}ab/searchAb?searchQuery=${trimmedQuery}&type=${type}`,
      );

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

  // 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([]);
    }
  };

  const handleSuggestionClick = (item: any) => {
    router.push(`/accreditationbody/${formatUniqueIDForURL(item.slug)}`);
    setShowSuggestions(false);
    setSearchQuery(
      selected === "hs-radio-group-1" ? item.organisationName : item.uniqueID,
    );
  };

  return (
    <>
      <div className="container m-auto overflow-hidden pt-16">
        {/* Hero Title */}
        <div className="mx-auto max-w-4xl px-4 text-center">
          <h1>{main?.ab?.pageTitle}</h1>
          <div className="safe">
            <SafeHtmlRenderer htmlContent={main?.ab?.pageSubTitle} />
          </div>
        </div>

        {/* Radio Buttons & Minimal 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",
                  },
                  {
                    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"
              >
                <div className="relative flex w-full flex-1" ref={searchRef}>
                  {/* Left search icon */}
                  <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);
                      }
                    }}
                  />

                  {/* Clear input button */}
                  {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>
                  )}

                  {/* 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 py-2 hover:bg-gray-100 cursor-pointer text-left border-b border-gray-100 last:border-b-0"
                          onClick={() => handleSuggestionClick(item)}
                        >
                          {selected === "hs-radio-group-1"
                            ? item.organisationName
                            : item.uniqueID}
                        </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>

        {/* GLA Apply Section */}
        <div className="flex justify-center">
          <GlaApply />
        </div>
      </div>
    </>
  );
}

export default HeroAccreditationBody;