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 } from "@/lib/payload/globals";
import { mediaAlt, mediaUrl } from "@/lib/payload/media";

export const dynamic = "force-dynamic";

export async function generateMetadata(): Promise<Metadata> {
  const intro = await getAktuellesIntroGlobal();
  return {
    title: intro.title || "Aktuelles",
    description: intro.lead || "Neuigkeiten, Termine und Inspiration von Anouma.",
  };
}

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

  return (
    <>
      <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>
    </>
  );
}