import type { Metadata } from "next";
import Link from "next/link";
import { PageHeader } from "@/components/PageHeader";
import { Section } from "@/components/Section";
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
import { Reveal } from "@/components/Reveal";
import { getPosts } from "@/lib/payload/content";
import { getAktuellesIntroGlobal, getSEOSettingsGlobal } from "@/lib/payload/globals";
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
import { resolveSeo } from "@/lib/seo/resolve";
import { buildMetadata } from "@/lib/seo/metadata";
import { getSiteUrl } from "@/lib/seo/config";
import { JsonLd, webPageJsonLd } from "@/lib/seo/jsonld";

export const dynamic = "force-dynamic";

const FALLBACK_DESCRIPTION = "Neuigkeiten, Termine und Inspiration von Anouma.";

export async function generateMetadata(): Promise<Metadata> {
  const [intro, seoSettings] = await Promise.all([getAktuellesIntroGlobal(), getSEOSettingsGlobal()]);
  const resolved = resolveSeo({
    seo: intro.seo,
    fallbackTitle: "Aktuelles",
    fallbackDescription: () => intro.lead || seoSettings.defaultDescription || FALLBACK_DESCRIPTION,
    defaultOgImage: seoSettings.defaultOgImage,
  });
  return buildMetadata({
    title: resolved.title,
    description: resolved.description,
    path: "/aktuelles",
    ogImageUrl: resolved.ogImageUrl,
    keywords: resolved.keywords,
  });
}

export default async function AktuellesPage() {
  const [intro, posts] = await Promise.all([getAktuellesIntroGlobal(), getPosts()]);
  const siteUrl = await getSiteUrl();

  return (
    <>
      <JsonLd
        data={webPageJsonLd({
          name: intro.title || "Aktuelles",
          description: intro.lead || FALLBACK_DESCRIPTION,
          url: `${siteUrl}/aktuelles`,
        })}
      />
      <PageHeader
        eyebrow={intro.eyebrow || "Aktuelles"}
        title={intro.title || "Neuigkeiten, Termine und Inspiration"}
        lead={intro.lead}
        crumbs={[{ title: "Aktuelles" }]}
      />

      <Section tone="plain">
        {posts.length === 0 ? (
          <p className="text-lg text-anouma-plum">
            Hier erscheinen bald die ersten Neuigkeiten — schau gerne wieder vorbei.
          </p>
        ) : (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {posts.map((post, i) => (
              <Reveal key={post.slug} delay={Math.min(i * 0.06, 0.3)}>
                <Link href={`/aktuelles/${post.slug}`} className="group block">
                  <div className="relative aspect-[4/3] w-full overflow-hidden rounded-3xl">
                    <ImagePlaceholder
                      mood="sand"
                      label={post.title}
                      src={mediaUrl(post.coverImage, "card")}
                      alt={mediaAlt(post.coverImage) ?? post.title}
                      shape="soft"
                      className="h-full w-full transition-transform duration-700 group-hover:scale-[1.03]"
                    />
                  </div>
                  <p className="mt-4 text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
                    {new Date(post.publishDate ?? post.createdAt).toLocaleDateString("de-DE", {
                      day: "2-digit",
                      month: "long",
                      year: "numeric",
                    })}
                  </p>
                  <h2 className="mt-2 font-serif text-xl font-medium text-anouma-plum">{post.title}</h2>
                  <p className="mt-2 text-sm leading-relaxed text-anouma-plum/90">{post.teaser}</p>
                </Link>
              </Reveal>
            ))}
          </div>
        )}
      </Section>
    </>
  );
}