"use client";

import { Search, X } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function LeaderboardSearch({ query }: { query: string }) {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();

  function navigate(nextValue: string) {
    const params = new URLSearchParams(searchParams);
    const trimmed = nextValue.trim();

    params.delete("page");
    if (trimmed) {
      params.set("q", trimmed);
    } else {
      params.delete("q");
    }

    const nextQuery = params.toString();
    router.push(nextQuery ? `${pathname}?${nextQuery}` : pathname);
  }

  return (
    <form
      className="flex w-full flex-col gap-2 sm:max-w-md"
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        navigate(String(formData.get("q") ?? ""));
      }}
    >
      <Field>
        <FieldLabel htmlFor="leaderboard-search">ค้นหาสมาชิก</FieldLabel>
        <div className="flex gap-2">
          <Input
            id="leaderboard-search"
            name="q"
            key={query}
            defaultValue={query}
            placeholder="ชื่อ, username หรือ Discord ID"
            autoComplete="off"
            className="bg-card!"
          />
          {query && (
            <Button
              type="button"
              variant="outline"
              size="icon"
              onClick={() => navigate("")}
            >
              <X data-icon="inline-start" />
              <span className="sr-only">ล้างการค้นหา</span>
            </Button>
          )}
          <Button type="submit" variant="secondary" size="icon">
            <Search data-icon="inline-start" />
            <span className="sr-only">ค้นหา</span>
          </Button>
        </div>
      </Field>
    </form>
  );
}