import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { db } from "@/lib/db";
import { Markdown } from "@/lib/markdown";
import { productCardInclude } from "@/lib/catalog";
import ProductCard from "@/components/store/ProductCard";
import { fmtDate } from "@/lib/dates";

type Props = { params: Promise<{ slug: string }> };
const load = (slug: string) => db.editorialPost.findFirst({ where: { slug, status: "PUBLISHED", publishedAt: { lte: new Date() } } });
export async function generateMetadata({ params }: Props): Promise<Metadata> { const p = await load((await params).slug); return p ? { title: p.title, description: p.excerpt ?? undefined, alternates: { canonical: `/journal/${p.slug}` } } : {}; }

export default async function Post({ params }: Props) {
  const p = await load((await params).slug);
  if (!p) notFound();
  const ids = (p.productIds as string[] | null) ?? [];
  const products = ids.length ? await db.product.findMany({ where: { id: { in: ids }, status: "PUBLISHED" }, include: productCardInclude }) : [];
  const gallery = (p.gallery as string[] | null) ?? [];
  return (
    <article>
      <div className="wrap pt-12 md:pt-20"><Link href="/journal" className="link-line">Journal</Link><h1 className="font-display text-[44px] md:text-[88px] leading-[1.02] mt-6 max-w-[16ch]">{p.title}</h1><p className="text-stone mt-4">{fmtDate(p.publishedAt)}</p></div>
      {p.coverUrl && <div className="relative mt-10 aspect-[16/8] bg-linen"><Image src={p.coverUrl} alt="" fill priority sizes="100vw" className="object-cover" /></div>}
      <div className="wrap py-14"><Markdown source={p.body} /></div>
      {gallery.length > 0 && <div className="wrap grid grid-cols-2 md:grid-cols-3 gap-3 pb-14">{gallery.map((g, i) => <div key={i} className="relative aspect-portrait bg-linen"><Image src={g} alt="" fill sizes="33vw" className="object-cover" /></div>)}</div>}
      {products.length > 0 && <section className="wrap pb-16 border-t border-sand pt-12"><h2 className="font-display text-[32px] mb-8">Shop this story</h2><ul className="grid grid-cols-2 lg:grid-cols-4 gap-x-3 md:gap-x-6 gap-y-10">{products.map((x) => <li key={x.id}><ProductCard p={x} /></li>)}</ul></section>}
    </article>
  );
}