"use client";
import { useState, useRef, useEffect } from "react";
import { useTranslations, useLocale } from "next-intl";
import { useRouter } from "nextjs-toploader/app";
import { usePathname, useSearchParams } from "next/navigation";
import { updateURLParams } from "@/utils/helpers";

export default function SearchComponent() {
  const t = useTranslations("");
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const searchParams = useSearchParams();
  const [searchTerm, setSearchTerm] = useState(
    searchParams.get("keyword") || "",
  );
  useEffect(() => {
    setSearchTerm(searchParams.get("keyword") || "");
  }, [searchParams]);
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isSearchOpen && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isSearchOpen]);

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

  const handleSearch = () => {
    updateURLParams({
      params: { keyword: searchTerm },
      router,
      pathname,
      page: true,
    });
    setIsSearchOpen(false);
    // setSearchTerm("");
  };
  return (
    <div ref={containerRef} className="relative flex items-center">
      {!isSearchOpen && (
        <button
          onClick={() => setIsSearchOpen(!isSearchOpen)}
          className={`p-3 hover:bg-primary-light rounded-lg transition-all duration-300 group ${isSearchOpen ? "text-primary bg-primary-light" : "text-text-secondary"}`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-search transition-colors"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </svg>
        </button>
      )}
      <div
        className={`relative overflow-hidden transition-all duration-500 ease-in-out ${
          isSearchOpen ? "w-64 opacity-100 mr-2" : "w-0 opacity-0"
        }`}
      >
        <svg
          onClick={() => handleSearch()}
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="lucide lucide-search absolute top-1/2 -translate-y-1/2 text-text-secondary pointer-events-none right-4 cursor-pointer inline-block"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.3-4.3"></path>
        </svg>
        <input
          ref={inputRef}
          type="text"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") handleSearch();
          }}
          placeholder={t("LABELS.search") + "..."}
          className="w-full py-2.5 pr-11 pl-4 bg-white border border-primary rounded-full text-[14px] text-text-primary placeholder:text-text-secondary focus:outline-none shadow-md"
        />
      </div>
    </div>
  );
}