"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useTransition } from "react";

type InitialSearch = {
  q?: string;
  type?: string;
  beds?: string;
  min?: string;
  max?: string;
};

const pillBase =
  "inline-flex items-center gap-1.5 rounded-full border border-border bg-surface px-4 py-2 text-[13px] text-text transition hover:border-accent hover:text-accent focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20";
const pillSelect =
  pillBase +
  " appearance-none bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2210%22%20height=%2210%22%20viewBox=%220%200%2010%2010%22><path%20fill=%22none%22%20stroke=%22%236F6A5E%22%20stroke-width=%221.5%22%20d=%22M2%204l3%203%203-3%22/></svg>')] bg-[length:10px] bg-[position:right_14px_center] bg-no-repeat pr-9";

export function Filters({
  types,
  initial,
}: {
  types: string[];
  initial: InitialSearch;
}) {
  const router = useRouter();
  const search = useSearchParams();
  const [pending, start] = useTransition();

  function submit(form: FormData) {
    const params = new URLSearchParams();
    for (const k of ["q", "type", "beds", "min", "max"] as const) {
      const v = String(form.get(k) ?? "").trim();
      if (v) params.set(k, v);
    }
    start(() => {
      router.push(params.toString() ? `/?${params}` : "/");
    });
  }

  return (
    <form
      action={submit}
      className="mx-auto max-w-site border-b border-border px-7 pb-6 mb-10"
    >
      <div className="flex flex-wrap items-center gap-2">
        <input
          name="q"
          defaultValue={initial.q ?? search.get("q") ?? ""}
          placeholder="Search title, city…"
          className={pillBase + " w-full sm:w-64"}
        />
        <select
          name="type"
          aria-label="Property type"
          title="Property type"
          defaultValue={initial.type ?? ""}
          className={pillSelect}
        >
          <option value="">Any type</option>
          {types.map((t) => (
            <option key={t} value={t}>
              {t}
            </option>
          ))}
        </select>
        <select
          name="beds"
          aria-label="Minimum bedrooms"
          title="Minimum bedrooms"
          defaultValue={initial.beds ?? ""}
          className={pillSelect}
        >
          <option value="">Bedrooms: any</option>
          <option value="1">1+ bed</option>
          <option value="2">2+ beds</option>
          <option value="3">3+ beds</option>
          <option value="4">4+ beds</option>
          <option value="5">5+ beds</option>
        </select>
        <input
          name="min"
          type="number"
          defaultValue={initial.min ?? ""}
          placeholder="Min price"
          className={pillBase + " w-32"}
        />
        <input
          name="max"
          type="number"
          defaultValue={initial.max ?? ""}
          placeholder="Max price"
          className={pillBase + " w-32"}
        />
        <button
          type="submit"
          disabled={pending}
          className="ml-auto inline-flex items-center gap-1.5 rounded-full border border-text bg-text px-5 py-2 text-[13px] font-medium text-bg transition hover:bg-accent hover:border-accent disabled:opacity-50"
        >
          {pending ? "Searching…" : "Apply"}
        </button>
      </div>
    </form>
  );
}