// URL-driven filters
const [search, setSearch] = useSearchParam('q', '');
const [categories, setCategories] = useSearchParam('cat', [], parseArray);
const [minPrice, setMinPrice] = useSearchParam('min', 0, Number);

const debouncedSearch = useDebouncedValue(search, 250);

// Server query keyed on URL
const { data: products } = useQuery(
  ['products', debouncedSearch, categories, minPrice],
  () => api.search({ q: debouncedSearch, categories, minPrice }),
);

// Cart in Zustand
const cart = useCart();

function ProductListingPage() {
  return (
    <div className="grid grid-cols-[240px_1fr] gap-6">
      <Filters />
      <main>
        <Toolbar />
        <ProductGrid />
      </main>
      <CartDrawer />
    </div>
  );
}

function Filters() {
  const [categories, setCategories] = useSearchParam(...);
  return (
    <aside aria-label="Filters">
      <fieldset>
        <legend>Category</legend>
        {CATS.map((c) => (
          <label key={c.id}>
            <input
              type="checkbox"
              checked={categories.includes(c.id)}
              onChange={(e) =>
                setCategories(e.target.checked
                  ? [...categories, c.id]
                  : categories.filter((x) => x !== c.id),
                )
              }
            />
            {c.label} ({c.count})
          </label>
        ))}
      </fieldset>
      {/* price range, etc */}
    </aside>
  );
}

function ProductGrid() {
  const { data, isLoading } = useProducts();
  if (isLoading) return <GridSkeleton />;
  if (!data?.length) return <Empty />;
  return (
    <div role="region" aria-label="Products">
      <p aria-live="polite">{data.length} results</p>
      <div className="grid grid-cols-3 gap-4">
        {data.map((p) => <ProductCard key={p.id} product={p} />)}
      </div>
    </div>
  );
}

function ProductCard({ product }) {
  const addToCart = useCart((s) => s.add);
  return (
    <article>
      <img src={product.image} alt={product.name} loading="lazy" />
      <h3>{product.name}</h3>
      <p>{formatPrice(product.price)}</p>
      <button onClick={() => addToCart(product)}>Add to cart</button>
    </article>
  );
}

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useCart = create(persist((set, get) => ({
  items: [] as CartItem[],
  add: (p) => set((s) => {
    const existing = s.items.find((i) => i.id === p.id);
    return existing
      ? { items: s.items.map((i) => i.id === p.id ? { ...i, qty: i.qty + 1 } : i) }
      : { items: [...s.items, { ...p, qty: 1 }] };
  }),
  remove: (id) => set((s) => ({ items: s.items.filter((i) => i.id !== id) })),
  total: () => get().items.reduce((sum, i) => sum + i.qty * i.price, 0),
}), { name: 'cart' }));

const add = (p) => {
  const prev = get().items;
  set({ items: optimistic(prev, p) });
  api.addToCart(p.id).catch(() => set({ items: prev }));   // rollback on error
};