Epicure/apps/web/app/(app)/collections/[id]/page.tsx

import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { headers } from "next/headers";
import Link from "next/link";
import { Printer, UtensilsCrossed } from "lucide-react";
import { auth } from "@/lib/auth/server";
import { db, collections, eq, and, or } from "@epicure/db";
import { RecipeCard } from "@/components/recipe/recipe-card";
import { CollectionRecipesGrid } from "@/components/collections/collection-recipes-grid";
import { ForkCollectionButton } from "@/components/collections/fork-collection-button";
import { ShareCollectionButton } from "@/components/collections/share-collection-button";
import { GenerateMealDialog } from "@/components/collections/generate-meal-dialog";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ExportMarkdownButton } from "@/components/shared/export-markdown-button";
import { EmptyState } from "@/components/shared/empty-state";
import { collectionToMarkdown } from "@/lib/markdown/collection";
import { getMessages } from "@/lib/i18n/server";

type Params = { params: Promise<{ id: string }> };

export const metadata: Metadata = {};

export default async function CollectionPage({ params }: Params) {
  const { id } = await params;
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) return null;
  const m = getMessages((session.user as { locale?: string }).locale);

  const col = await db.query.collections.findFirst({
    where: and(
      eq(collections.id, id),
      or(eq(collections.userId, session.user.id), eq(collections.isPublic, true))
    ),
    with: { recipes: { with: { recipe: { with: { photos: true } } } } },
  });

  if (!col) notFound();

  const isOwner = col.userId === session.user.id;

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{col.name}</h1>
          {col.description && <p className="text-muted-foreground mt-1">{col.description}</p>}
          <p className="text-sm text-muted-foreground mt-1">
            {col.recipes.length} recipe{col.recipes.length !== 1 ? "s" : ""} · {col.isPublic ? "Public" : "Private"}
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {col.recipes.length > 0 && (
            <>
              <Link href={`/print/collection/${id}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
                <Printer className="h-4 w-4" />
                {m.collections.exportPdf}
              </Link>
              <ExportMarkdownButton
                markdown={collectionToMarkdown({
                  name: col.name,
                  description: col.description,
                  recipes: col.recipes.flatMap((r) => (r.recipe ? [r.recipe] : [])),
                })}
                filename={col.name}
              />
            </>
          )}
          {isOwner && <GenerateMealDialog collectionId={id} />}
          {isOwner && <ShareCollectionButton collectionId={id} />}
          {!isOwner && col.isPublic && (
            <ForkCollectionButton collectionId={id} />
          )}
        </div>
      </div>

      {col.recipes.length === 0 ? (
        <EmptyState icon={UtensilsCrossed} title={m.collections.emptyCollection} compact />
      ) : isOwner ? (
        <CollectionRecipesGrid
          collectionId={id}
          recipes={col.recipes.flatMap((r) => (r.recipe ? [r.recipe] : []))}
        />
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {col.recipes.map(({ recipe }) => (
            recipe && <RecipeCard key={recipe.id} recipe={recipe} />
          ))}
        </div>
      )}
    </div>
  );
}