"use client";

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

type Props = { colours: string[]; sizes: string[]; total: number };

function Group({ name, children }: { name: string; children: React.ReactNode }) {
  return <fieldset className="min-w-0"><legend className="nav-type text-stone mb-2">{name}</legend><div className="flex flex-wrap gap-2">{children}</div></fieldset>;
}
function Chip({ k, v, label, sp, set }: { k: string; v: string; label: string; sp: URLSearchParams | { get(k: string): string | null }; set: (k: string, v: string | null) => void }) {
  return (
    <button type="button" aria-pressed={sp.get(k) === v} onClick={() => set(k, sp.get(k) === v ? null : v)}
      className={`px-3.5 h-9 text-[13px] border transition-colors ${sp.get(k) === v ? "bg-ink text-paper border-ink" : "border-sand hover:border-ink"}`}>{label}</button>
  );
}

export default function Filters({ colours, sizes, total }: Props) {
  const router = useRouter();
  const path = usePathname();
  const sp = useSearchParams();
  const [open, setOpen] = useState(false);
  const set = (k: string, v: string | null) => {
    const n = new URLSearchParams(sp.toString());
    if (v) n.set(k, v); else n.delete(k);
    router.push(`${path}${n.toString() ? `?${n}` : ""}`, { scroll: false });
  };
  const active = ["availability", "colour", "size", "min", "max"].filter((k) => sp.get(k)).length;
  return (
    <div className="border-y border-sand">
      <div className="wrap flex items-center justify-between h-14">
        <button className="nav-type" aria-expanded={open} onClick={() => setOpen(!open)}>Filter{active ? ` (${active})` : ""}</button>
        <p className="text-stone text-[13px]" aria-live="polite">{total} {total === 1 ? "piece" : "pieces"}</p>
        <label className="flex items-center gap-2 nav-type">Sort
          <select aria-label="Sort products" value={sp.get("sort") ?? "featured"} onChange={(e) => set("sort", e.target.value === "featured" ? null : e.target.value)} className="bg-transparent border-0 normal-case tracking-normal text-[14px] focus:outline-none cursor-pointer">
            <option value="featured">Featured</option><option value="newest">Newest</option><option value="price-asc">Price, low to high</option><option value="price-desc">Price, high to low</option>
          </select>
        </label>
      </div>
      {open && (
        <div className="wrap grid sm:grid-cols-2 lg:grid-cols-4 gap-8 py-6 border-t border-sand">
          <Group name="Availability"><Chip sp={sp} set={set} k="availability" v="ready" label="Ready to ship" /><Chip sp={sp} set={set} k="availability" v="preorder" label="Pre-order" /></Group>
          {colours.length > 0 && <Group name="Colour">{colours.map((c) => <Chip sp={sp} set={set} key={c} k="colour" v={c} label={c} />)}</Group>}
          {sizes.length > 0 && <Group name="Size">{sizes.map((c) => <Chip sp={sp} set={set} key={c} k="size" v={c} label={c} />)}</Group>}
          <Group name="Price (৳)">
            <Chip sp={sp} set={set} k="max" v="1000" label="Under 1,000" /><Chip sp={sp} set={set} k="max" v="3000" label="Under 3,000" /><Chip sp={sp} set={set} k="min" v="3000" label="3,000 and over" />
          </Group>
          {active > 0 && <button className="link-line justify-self-start self-end" onClick={() => router.push(path)}>Clear filters</button>}
        </div>
      )}
    </div>
  );
}