import type { Metadata } from "next";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { connectDB } from "@/lib/db";
import { PortfolioItem } from "@/models/PortfolioItem";
import { PortfolioCategory } from "@/models/PortfolioCategory";
import { getSettings } from "@/lib/settings";
import { PortfolioGallery, type GalleryItem } from "@/components/PortfolioGallery";
import { PageHeaderBanner } from "@/components/PageHeaderBanner";
import { JsonLd } from "@/components/JsonLd";
import { Link } from "@/i18n/navigation";
import { buildPageMetadata, getSiteUrl } from "@/lib/seo";

export const dynamic = "force-dynamic";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "portfolio" });
  return buildPageMetadata({
    locale,
    path: "/portfolio",
    // Bewusst nicht t("title") — das ist "Meine Arbeiten"/"My Work", eine
    // Seitenüberschrift, kein passender SEO-Titel. "Portfolio" ist außerdem
    // in beiden Sprachen gleich, kein separater EN-Text nötig.
    title: "Portfolio",
    description: t("metaDescription"),
  });
}

export default async function PortfolioPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: "portfolio" });

  await connectDB();
  // Bewusst rein chronologisch (neuestes zuerst) — "Featured" ist nur für
  // die Startseiten-Auswahl gedacht (siehe [locale]/page.tsx) und soll die
  // öffentliche Portfolio-Übersicht nicht mehr nach vorne verzerren. Das
  // große Aufmacherbild in der Galerie ist einfach der jeweils neueste
  // Beitrag, keine gesonderte Kuratierung (Merkblatt-Regel, 03.09.2026).
  const [docs, categoryDocs, settings] = await Promise.all([
    PortfolioItem.find({ visible: true, publishedAt: { $not: { $gt: new Date() } } }).sort({ createdAt: -1 }).lean(),
    PortfolioCategory.find({}).sort({ sortOrder: 1 }).lean(),
    getSettings(),
  ]);

  const items: GalleryItem[] = docs.map((d) => ({
    id: String(d._id),
    title: (locale === "en" && d.titleEn) || d.title,
    description: (locale === "en" && d.descriptionEn) || d.description,
    category: d.category || "",
    eventLabel: d.eventLabel || "",
    tags: d.tags || [],
    modelInstagram: d.modelInstagram || [],
    images: d.images,
    coverImage: d.coverImage || d.images[0] || "",
  }));

  // Reihenfolge kommt aus der verwaltbaren Kategorienliste (admin/portfolio)
  // statt aus zufälliger Auftrittsreihenfolge — nur Kategorien mit
  // mindestens einem sichtbaren Beitrag werden als Filter angezeigt.
  const usedCategoryNames = new Set(items.map((i) => i.category).filter(Boolean));
  const categories = categoryDocs.map((c) => c.name).filter((name) => usedCategoryNames.has(name));
  const siteUrl = getSiteUrl();

  return (
    // Kein rk-shell mehr: der Seitenrand ist eine FESTE, zentrierte Spalte
    // (1120px, siehe PortfolioGallery) — damit die Seite auf FHD, 4K und
    // 14"-Notebook exakt gleich aussieht statt mit der Fensterbreite
    // mitzuwachsen (rk-shell = calc(25vw - 12rem), das ist genau die
    // vw-Skalierung, die laut Merkblatt-Regel raus soll). Den Kopfabstand
    // für den schwebenden Header übernimmt der PageHeaderBanner (-mt-32).
    // bg-[var(--rk-bg)] deckend auf <main>: der body-Hintergrund hat oben
    // einen 100vh hohen weissen Radial-Schimmer (rgba(255,255,255,0.04) @
    // 50% 0%, fuer den Startseiten-Hero). Auf der Portfolio-Seite scheint
    // der sonst durch jede Luecke zwischen den (deckenden) Bloecken Banner
    // / Filterleiste / Raster und liest sich als hellgrauer Querstreifen
    // (08.09.2026 mehrfach beanstandet). Eine deckende --rk-bg-Flaeche auf
    // <main> blockt ihn komplett.
    <main className="min-h-screen bg-[var(--rk-bg)] pb-24">
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "CollectionPage",
          name: t("title"),
          description: t("metaDescription"),
          url: `${siteUrl}/${locale}/portfolio`,
          mainEntity: {
            "@type": "ItemList",
            itemListElement: items.slice(0, 30).map((item, i) => ({
              "@type": "ImageObject",
              position: i + 1,
              name: item.title,
              contentUrl: `${siteUrl}${item.coverImage}`,
            })),
          },
        }}
      />

      {/* Exakt derselbe Banner wie auf "Über mich" (Till, 09.09.2026: "das
          ist das bild was ich wollte") — gleiche Datei, gleicher
          Bildausschnitt (47%/22%), gleiche `tall`-Höhe. */}
      <PageHeaderBanner
        image="/img/about-banner.jpg"
        eyebrow={t("eyebrow")}
        title={t("title")}
        subtitle={t("subtitle")}
        focalPoint="47% 22%"
        tall
      />

      {/* -mt-8 hebt das mb-8 des PageHeaderBanner auf, damit die Filterleiste
          DIREKT ans Bannerbild grenzt (kein Spalt, kein Fade — Till,
          09.09.2026). Galerie-Bereich flächig #131315; die Filterleiste
          selbst ist #101012 (siehe PortfolioGallery) und hebt sich dadurch
          als dunkler Balken ab. */}
      <div className="-mt-8 bg-[#131315]">
        <PortfolioGallery
          items={items}
          categories={categories}
          photographerInstagram={settings.socialLinks?.instagram || ""}
        />
      </div>

      <div className="mx-auto mt-20 max-w-[1120px] px-5 text-center sm:px-8">
        <p className="text-sm text-[var(--rk-ink-muted)]">{t("ctaText")}</p>
        <Link
          href="/account/new-order"
          className="mt-5 inline-block border border-white/30 px-8 py-3 text-xs uppercase tracking-[0.25em] text-[var(--rk-ink)] transition-colors hover:border-white"
        >
          {t("ctaButton")}
        </Link>
      </div>
    </main>
  );
}