"use client";

import { useSearchParams } from "next/navigation";
import { Suspense, useMemo, useState } from "react";
import { GroceryTile } from "@/components/silo/GroceryTile";
import { ShopToolbar } from "@/components/shop/ShopToolbar";
import { Pagination } from "@/components/ui/Pagination";
import { siloByTag, siloProducts } from "@/data/silo-catalog";
import { filterProducts, paginate, type SortOption } from "@/lib/products";

function ShopContent() {
  const searchParams = useSearchParams();
  const [query, setQuery] = useState(searchParams.get("q") ?? "");
  const [category, setCategory] = useState(searchParams.get("category") ?? "all");
  const tag = searchParams.get("tag");
  const [sort, setSort] = useState<SortOption>(
    (searchParams.get("sort") as SortOption) || "featured",
  );
  const [inStock, setInStock] = useState(false);
  const [page, setPage] = useState(1);

  const base = tag ? siloByTag(tag) : siloProducts;

  const filtered = useMemo(
    () =>
      filterProducts(base, {
        query,
        category,
        sort,
        inStock,
      }),
    [base, query, category, sort, inStock],
  );

  const paged = useMemo(() => paginate(filtered, page, 20), [filtered, page]);

  return (
    <div className="mx-auto w-full max-w-[1280px] px-4 py-8 sm:px-6 lg:px-8">
      <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--straw)]">
        The crib
      </p>
      <h1 className="mt-1 font-serif text-4xl">Shop all bins</h1>
      <p className="mt-2 text-sm text-muted">
        Pack sizes on every tile. Prices follow the crib you picked.
      </p>

      <div className="mt-6">
        <ShopToolbar
          query={query}
          category={category}
          sort={sort}
          inStock={inStock}
          onQuery={(value) => {
            setQuery(value);
            setPage(1);
          }}
          onCategory={(value) => {
            setCategory(value);
            setPage(1);
          }}
          onSort={(value) => {
            setSort(value);
            setPage(1);
          }}
          onInStock={(value) => {
            setInStock(value);
            setPage(1);
          }}
        />
      </div>

      <p className="mt-5 text-sm text-muted">
        {filtered.length} items in this crib
      </p>
      <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
        {paged.items.map((product) => (
          <GroceryTile key={product.id} product={product} layout="grid" />
        ))}
      </div>
      <Pagination page={paged.page} totalPages={paged.totalPages} onChange={setPage} />
    </div>
  );
}

export default function ShopPage() {
  return (
    <Suspense>
      <ShopContent />
    </Suspense>
  );
}