import { db } from "@/lib/db"
import { ShopExperience } from "@/components/shop/shop-experience"
import { Navbar } from "@/components/layout/navbar"
import { STYLE_VOCAB, MATERIAL_VOCAB } from "@/lib/facets"
import { toStringArray } from "@/lib/json-array"

export const dynamic = "force-dynamic"
export const metadata = { title: "Shop" }

export default async function ShopPage() {
  const [categories, products] = await Promise.all([
    db.category.findMany({ orderBy: { name: "asc" } }),
    db.product.findMany({
      where: { active: true },
      include: { drop: true, category: true },
      orderBy: { createdAt: "desc" },
    }),
  ])

  return (
    <>
      <Navbar />
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-0">
        <ShopExperience
          products={products.map((p) => ({
            id: p.id,
            name: p.name,
            slug: p.slug,
            price: p.price,
            images: toStringArray(p.images),
            stock: p.stock,
            styles: toStringArray(p.styles),
            materials: toStringArray(p.materials),
            category: p.category.slug,
            drop: p.drop ? { name: p.drop.name, status: p.drop.status } : null,
          }))}
          styles={STYLE_VOCAB}
          materials={MATERIAL_VOCAB}
          categories={categories.map((c) => ({ slug: c.slug, label: c.name }))}
        />
      </div>
    </>
  )
}