"use client";

import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { Search } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

interface SearchInputProps {
  className?: string;
  placeholder?: string;
  onSearchChange?: (value: string) => void;
  debounceMs?: number;
  paramName?: string;
}

export function SearchInput({
  className,
  placeholder,
  onSearchChange,
  debounceMs = 500,
  paramName = "search",
}: SearchInputProps) {
  const tCommon = useTranslations("common");
  const locale = useLocale();
  const router = useRouter();
  const searchParams = useSearchParams();
  const currentParamValue = searchParams.get(paramName) || "";
  const currentSearchQuery = searchParams.toString();
  const [searchValue, setSearchValue] = useState(currentParamValue);
  const resolvedPlaceholder = placeholder || `${tCommon("search")}...`;
  const isRtl = locale === "ar";

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      const params = new URLSearchParams(currentSearchQuery);

      if (searchValue === currentParamValue) return;

      if (searchValue) params.set(paramName, searchValue);
      else params.delete(paramName);

      params.set("page", "1");

      const nextSearchQuery = params.toString();

      if (nextSearchQuery !== currentSearchQuery) {
        router.replace(`?${nextSearchQuery}`, { scroll: false });
        onSearchChange?.(searchValue);
      }
    }, debounceMs);

    return () => clearTimeout(timeoutId);
  }, [
    searchValue,
    router,
    currentSearchQuery,
    currentParamValue,
    onSearchChange,
    debounceMs,
    paramName,
  ]);

  return (
    <div className={cn(
      "relative flex h-12 w-[250px] items-center rounded-[12px] border border-border bg-card",
      className
    )}>
      <Input
        type="text"
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        placeholder={resolvedPlaceholder}
        className={cn(
          "h-full border-0 bg-transparent text-sm font-sans text-foreground placeholder:text-muted-foreground focus-visible:ring-0",
          isRtl ? "pr-4 pl-12 " : "pl-4 pr-12 "
        )}
      />
      <Search
        className={cn(
          "absolute top-1/2 size-5 -translate-y-1/2 text-muted-foreground pointer-events-none",
          isRtl ? "left-4" : "right-4"
        )}
      />
    </div>
  );
}