"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ordersTexts } from "@/lib/i18n/orders";
import { withParams, type QueryParams } from "./query";

/**
 * Search by order ID or link. Submitting navigates (server-side filtering),
 * so the URL always describes the visible result set.
 */
export function OrdersSearch({
  pathname,
  params,
  placeholder = ordersTexts.ordersSearchPlaceholder,
}: {
  pathname: string;
  params: QueryParams;
  placeholder?: string;
}) {
  const router = useRouter();
  const initial = params.q ?? "";
  const [value, setValue] = React.useState(initial);
  const [pending, startTransition] = React.useTransition();

  React.useEffect(() => {
    setValue(initial);
  }, [initial]);

  function go(next: string) {
    const href = withParams(pathname, params, { q: next.trim() || null, page: null });
    startTransition(() => router.push(href));
  }

  return (
    <form
      role="search"
      onSubmit={(e) => {
        e.preventDefault();
        go(value);
      }}
      className="relative w-full sm:max-w-xs"
    >
      <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
      <Input
        type="text"
        name="q"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={placeholder}
        aria-label={ordersTexts.ordersSearchLabel}
        disabled={pending}
        className="h-9 rounded-lg pr-9 pl-9"
      />
      {value ? (
        <Button
          type="button"
          variant="ghost"
          size="icon"
          aria-label={ordersTexts.clearSearch}
          onClick={() => {
            setValue("");
            go("");
          }}
          className="absolute top-1/2 right-1 size-7 -translate-y-1/2 text-muted-foreground"
        >
          <X className="size-4" />
        </Button>
      ) : null}
    </form>
  );
}

export default OrdersSearch;