"use client";

import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import {
  EXPLORE_FILTERS,
  ExploreFilterId,
} from "@/constants/exploreFilters";
import BoldIcon from "@/components/ui/BoldIcon";
import { filterChipClass } from "@/lib/ui/buttonStyles";

type ExploreFilterBarProps = {
  activeFilter: ExploreFilterId;
  onFilterChange: (filter: ExploreFilterId) => void;
  loadingLocation?: boolean;
  searchValue: string;
  onSearchChange: (value: string) => void;
  onSearchSubmit: (value?: string) => void;
};

export default function ExploreFilterBar({
  activeFilter,
  onFilterChange,
  loadingLocation = false,
  searchValue,
  onSearchChange,
  onSearchSubmit,
}: ExploreFilterBarProps) {
  const { t } = useTranslation("common");
  const debounceRef = useRef<number | null>(null);
  const lastSubmittedRef = useRef(searchValue);

  useEffect(() => {
    if (debounceRef.current) {
      window.clearTimeout(debounceRef.current);
    }

    debounceRef.current = window.setTimeout(() => {
      if (searchValue !== lastSubmittedRef.current) {
        lastSubmittedRef.current = searchValue;
        onSearchSubmit(searchValue);
      }
    }, 400);

    return () => {
      if (debounceRef.current) {
        window.clearTimeout(debounceRef.current);
      }
    };
  }, [searchValue, onSearchSubmit]);

  return (
    <div>
      <form
        className="mb-2 flex items-center gap-2 rounded-full border border-neutral-200 bg-background px-3 py-2.5 dark:border-neutral-800"
        onSubmit={(event) => {
          event.preventDefault();
          lastSubmittedRef.current = searchValue;
          onSearchSubmit();
        }}
      >
        <BoldIcon name="search-normal" size={18} className="shrink-0 text-neutral-500" />
        <input
          type="search"
          value={searchValue}
          onChange={(event) => onSearchChange(event.target.value)}
          placeholder={t("explore.searchPlaceholder")}
          className="min-w-0 flex-1 bg-transparent text-sm text-neutral-900 outline-none placeholder:text-neutral-500 dark:text-white"
          enterKeyHint="search"
        />
        {searchValue ? (
          <button
            type="button"
            onClick={() => {
              onSearchChange("");
              lastSubmittedRef.current = "";
              onSearchSubmit("");
            }}
            className="shrink-0 text-xs text-neutral-400"
          >
            {t("common.clear")}
          </button>
        ) : null}
      </form>

      <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-none">
        {EXPLORE_FILTERS.map((item) => {
          const isActive = activeFilter === item.id;
          const isNearMeLoading = item.id === "near_me" && loadingLocation;

          return (
            <button
              key={item.id}
              type="button"
              disabled={isNearMeLoading}
              onClick={() => onFilterChange(item.id)}
              className={filterChipClass(isActive, "shrink-0 disabled:opacity-60")}
            >
              {isNearMeLoading
                ? t("explore.loadingLocation")
                : t(`explore.filters.${item.id}`)}
            </button>
          );
        })}
      </div>
    </div>
  );
}
