import { db } from "@/lib/db";
import { facetValues, listProducts, type SortKey } from "@/lib/catalog";
import { ownerKey } from "@/lib/visitor";
import ProductCard from "./ProductCard";
import Filters from "./Filters";
import Link from "next/link";

export type ListingParams = { availability?: string; colour?: string; size?: string; min?: string; max?: string; sort?: string; q?: string };

export default async function Listing({ params, categorySlug, collectionSlug, empty }: { params: ListingParams; categorySlug?: string; collectionSlug?: string; empty?: React.ReactNode }) {
  const sort = (["featured", "newest", "price-asc", "price-desc"].includes(params.sort ?? "") ? params.sort : "featured") as SortKey;
  const [products, facets, key] = await Promise.all([
    listProducts({
      categorySlug, collectionSlug, q: params.q, sort,
      availability: params.availability === "ready" || params.availability === "preorder" ? params.availability : undefined,
      colour: params.colour, size: params.size,
      min: params.min ? Number(params.min) : undefined, max: params.max ? Number(params.max) : undefined,
    }),
    facetValues(categorySlug),
    ownerKey(false),
  ]);
  const saved = key ? new Set((await db.wishlistItem.findMany({ where: { ownerKey: key }, select: { productId: true } })).map((w) => w.productId)) : new Set<string>();
  return (
    <>
      <Filters colours={facets.colours} sizes={facets.sizes} total={products.length} />
      <div className="wrap py-8 md:py-12">
        {products.length === 0 ? (
          empty ?? (
            <div className="py-20 text-center">
              <p className="font-display text-[32px]">Nothing matches those filters.</p>
              <Link href="?" className="link-line mt-6 inline-block">Clear filters</Link>
            </div>
          )
        ) : (
          <ul className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-3 md:gap-x-6 gap-y-10 md:gap-y-14">
            {products.map((p, i) => <li key={p.id}><ProductCard p={p} saved={saved.has(p.id)} priority={i < 4} /></li>)}
          </ul>
        )}
      </div>
    </>
  );
}