'use client';
import { Search, X } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';
import { routes } from '@/lib/site';

/** Compact search that navigates to `?q=` while keeping the other filters. Degrades to a plain GET form without JS. */
export function SearchBox({ initial = '' }: { initial?: string }) {
  const router = useRouter();
  const sp = useSearchParams();
  const [value, setValue] = useState(initial);

  const go = (q: string) => {
    const p = new URLSearchParams(sp.toString());
    p.delete('page');
    if (q.trim()) p.set('q', q.trim());
    else p.delete('q');
    const s = p.toString();
    router.push(routes.satellites(s || undefined));
  };

  return (
    <form
      method="get"
      action={routes.satellites()}
      role="search"
      className="relative flex w-full max-w-md items-center"
      onSubmit={(e) => {
        e.preventDefault();
        go(value);
      }}
    >
      {Array.from(sp.entries()).filter(([k]) => k !== 'q' && k !== 'page').map(([k, v]) => <input key={k} type="hidden" name={k} value={v} />)}
      <Search className="pointer-events-none absolute left-3 size-4 text-ink-3" aria-hidden />
      <input
        type="search"
        name="q"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Name, NORAD or COSPAR id…"
        aria-label="Search satellites by name, NORAD or COSPAR id"
        className="h-11 w-full rounded-md border border-rule bg-plane-2 pl-9 pr-10 text-sm text-ink placeholder:text-ink-3 focus:border-accent/60"
        autoComplete="off"
      />
      {value && (
        <button
          type="button"
          onClick={() => {
            setValue('');
            go('');
          }}
          className="absolute right-1 inline-flex size-9 items-center justify-center rounded text-ink-3 hover:text-ink"
          aria-label="Clear search"
        >
          <X className="size-4" aria-hidden />
        </button>
      )}
    </form>
  );
}