"use client";

import * as React from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { t } from "@/lib/i18n/de";
import { useSearchUrl } from "./useSearchParams";

/**
 * Freitext-Suchleiste. Schreibt `q` debounced in die URL (kein Reload). Der
 * lokale State spiegelt den Eingabewert für sofortiges Tipp-Feedback; die URL
 * bleibt die Quelle der Wahrheit für das serverseitige Ergebnis.
 */
export function SearchBar({
  placeholderKey = "search.suchbegriffPlaceholder",
}: {
  placeholderKey?: "search.suchbegriffPlaceholder" | "search.nameOrtPlz";
}) {
  const { params, setParamDebounced } = useSearchUrl();
  const urlQ = params.get("q") ?? "";
  const [value, setValue] = React.useState(urlQ);

  // Bei externer URL-Änderung (z. B. Tab-Wechsel/Reset) den lokalen State
  // angleichen. Eigene debounced Tipp-Eingaben setzen `urlQ` ohnehin auf `value`,
  // sodass dieser Effekt dann ein No-op ist.
  React.useEffect(() => {
    setValue(urlQ);
  }, [urlQ]);

  return (
    <div className="flex flex-col gap-1">
      <Label htmlFor="suchbegriff" className="sr-only">
        {t("search.suchbegriff")}
      </Label>
      <Input
        id="suchbegriff"
        type="search"
        value={value}
        placeholder={t(placeholderKey)}
        aria-label={t("search.suchbegriff")}
        onChange={(e) => {
          setValue(e.target.value);
          setParamDebounced("q", e.target.value);
        }}
      />
    </div>
  );
}
