import type { Metadata } from "next";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import CollectionsCatalog from "@/components/CollectionsCatalog";
import CinematicMotionProvider from "@/components/CinematicMotionProvider";
import JsonLdScript from "@/components/JsonLdScript";
import { collectionsPageCopy, getCollectionLocale } from "@/lib/collections";
import { getPublishedCollections } from "@/lib/admin-content";
import { getTranslations } from "next-intl/server";
import { buildLocalizedPageMetadata } from "@/lib/seo";
import { buildCatalogCollectionStructuredData } from "@/lib/catalog-seo";

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const activeLocale = getCollectionLocale(locale);
  const copy = collectionsPageCopy[activeLocale];
  const collections = await getPublishedCollections();

  return buildLocalizedPageMetadata({
    locale: activeLocale,
    pathname: "/collections",
    title: copy.title,
    description: copy.intro,
    image: collections[0]?.image,
    imageAlt: `${copy.title} — Norden`,
  });
}

export default async function CollectionsPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const activeLocale = getCollectionLocale(locale);
  const copy = collectionsPageCopy[activeLocale];
  const collections = await getPublishedCollections();
  const t = await getTranslations({ locale: activeLocale });
  const structuredData = buildCatalogCollectionStructuredData({
    locale: activeLocale,
    pathname: "/collections",
    name: copy.title,
    description: copy.intro,
    breadcrumbs: [
      { name: t("catalog.home"), pathname: "" },
      { name: t("nav.series"), pathname: "/collections" },
    ],
    items: collections.map((collection) => ({
      type: "CollectionPage",
      name: collection.name,
      pathname: `/collections/${collection.slug}`,
      image: collection.image,
    })),
  });

  return (
    <div className="min-h-screen font-sans" style={{ background: "var(--surface-0)", color: "var(--fg-primary)" }}>
      <JsonLdScript data={structuredData} />
      <Navbar logoUrl="/brand/norden.png" locale={locale} />
      <CinematicMotionProvider>
        <CollectionsCatalog locale={locale} collections={collections} />
      </CinematicMotionProvider>
      <Footer />
    </div>
  );
}