import Link from "next/link";

// Plain GET form -- filters/sort are URL search params, so this works
// without client JS and the gallery page itself does all the querying.
export function GalleryFilters({
  brands,
  badgeTiers,
  current,
}: {
  brands: { slug: string; name: string }[];
  badgeTiers: { threshold: number; name: string }[];
  current: {
    brand?: string;
    blend?: string;
    uploader?: string;
    badgeTier?: string;
    sort?: string;
  };
}) {
  return (
    <form
      method="GET"
      action="/labels"
      className="flex flex-wrap items-end gap-4 rounded-lg border border-charcoal/10 bg-warm-white p-4"
    >
      <label className="flex flex-col gap-1 text-sm">
        <span className="text-charcoal/70">Brand</span>
        <select
          name="brand"
          defaultValue={current.brand ?? ""}
          className="rounded border border-charcoal/20 bg-cream px-3 py-1.5 text-charcoal"
        >
          <option value="">All brands</option>
          {brands.map((brand) => (
            <option key={brand.slug} value={brand.slug}>
              {brand.name}
            </option>
          ))}
        </select>
      </label>

      <label className="flex flex-col gap-1 text-sm">
        <span className="text-charcoal/70">Blend</span>
        <input
          type="text"
          name="blend"
          defaultValue={current.blend ?? ""}
          placeholder="Search blend name"
          className="rounded border border-charcoal/20 bg-cream px-3 py-1.5 text-charcoal"
        />
      </label>

      <label className="flex flex-col gap-1 text-sm">
        <span className="text-charcoal/70">Uploader</span>
        <input
          type="text"
          name="uploader"
          defaultValue={current.uploader ?? ""}
          placeholder="Username"
          className="rounded border border-charcoal/20 bg-cream px-3 py-1.5 text-charcoal"
        />
      </label>

      <label className="flex flex-col gap-1 text-sm">
        <span className="text-charcoal/70">Badge tier</span>
        <select
          name="badgeTier"
          defaultValue={current.badgeTier ?? ""}
          className="rounded border border-charcoal/20 bg-cream px-3 py-1.5 text-charcoal"
        >
          <option value="">Any</option>
          {badgeTiers.map((tier) => (
            <option key={tier.threshold} value={tier.threshold}>
              {tier.name}+
            </option>
          ))}
        </select>
      </label>

      <label className="flex flex-col gap-1 text-sm">
        <span className="text-charcoal/70">Sort</span>
        <select
          name="sort"
          defaultValue={current.sort ?? "newest"}
          className="rounded border border-charcoal/20 bg-cream px-3 py-1.5 text-charcoal"
        >
          <option value="newest">Newest</option>
          <option value="most_downloaded">Most downloaded</option>
          <option value="trending">Trending this week</option>
        </select>
      </label>

      <button
        type="submit"
        className="rounded-full bg-terracotta px-5 py-1.5 text-sm font-medium text-white hover:bg-terracotta/90"
      >
        Apply
      </button>
      {(current.brand ||
        current.blend ||
        current.uploader ||
        current.badgeTier) && (
        <Link
          href="/labels"
          className="text-sm text-charcoal/60 hover:text-terracotta hover:underline"
        >
          Clear filters
        </Link>
      )}
    </form>
  );
}