import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { db } from "@/lib/db";
import Listing, { type ListingParams } from "@/components/store/Listing";

type Props = { params: Promise<{ slug: string }>; searchParams: Promise<ListingParams> };

async function load(slug: string) {
  const cat = await db.category.findFirst({ where: { slug, visible: true } });
  if (cat) return { kind: "category" as const, title: cat.name, intro: cat.description, seoTitle: cat.name, seoDesc: cat.description };
  const col = await db.collection.findFirst({ where: { slug, visible: true } });
  if (col) return { kind: "collection" as const, title: col.title, intro: col.intro, seoTitle: col.seoTitle ?? col.title, seoDesc: col.seoDesc ?? col.intro };
  return null;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const c = await load(slug);
  if (!c) return {};
  return { title: c.seoTitle, description: c.seoDesc ?? undefined, alternates: { canonical: `/collections/${slug}` } };
}

export default async function CollectionPage({ params, searchParams }: Props) {
  const { slug } = await params;
  const c = await load(slug);
  if (!c) notFound();
  return (
    <>
      <div className="wrap pt-12 md:pt-20 pb-8 grid md:grid-cols-12 gap-6 items-end">
        <h1 className="md:col-span-7 font-display text-[56px] md:text-[112px] leading-none">{c.title}</h1>
        {c.intro && <p className="md:col-span-4 md:col-start-9 font-display text-[20px] leading-[1.5]">{c.intro}</p>}
      </div>
      <Listing params={await searchParams} categorySlug={c.kind === "category" ? slug : undefined} collectionSlug={c.kind === "collection" ? slug : undefined} />
    </>
  );
}