import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { PageHeader } from "@/components/PageHeader";
import { Section } from "@/components/Section";
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
import { RichText } from "@/components/RichText";
import { CTA } from "@/components/CTA";
import { getOfferBySlug } from "@/lib/payload/content";
import { moodForOffer } from "@/lib/angebote";
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
import { OFFER_CATEGORIES } from "@/collections/Offers";

export const dynamic = "force-dynamic";

type Args = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: Args): Promise<Metadata> {
  const { slug } = await params;
  const offer = await getOfferBySlug(slug);
  if (!offer) return {};
  return {
    title: offer.title,
    description: offer.shortDescription,
  };
}

export default async function OfferDetailPage({ params }: Args) {
  const { slug } = await params;
  const offer = await getOfferBySlug(slug);
  if (!offer) notFound();

  const categoryLabel = OFFER_CATEGORIES.find((c) => c.value === offer.category)?.label;

  return (
    <>
      <PageHeader
        eyebrow={categoryLabel}
        title={offer.title}
        lead={offer.shortDescription}
        crumbs={[{ title: "Angebote", href: "/angebote" }, { title: offer.title }]}
      />
      <div className="mx-auto -mt-10 max-w-5xl px-6 sm:px-8 lg:px-12">
        <div className="relative aspect-[21/9] w-full">
          <ImagePlaceholder
            mood={moodForOffer(offer)}
            label={offer.title}
            src={mediaUrl(offer.image, "hero")}
            alt={mediaAlt(offer.image) ?? offer.title}
            shape="soft"
            priority
            className="h-full w-full"
          />
        </div>
      </div>
      <Section tone="plain">
        <div className="mx-auto max-w-2xl">
          <RichText data={offer.description} />
        </div>
      </Section>
      <CTA
        title="Interesse geweckt?"
        lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
      />
    </>
  );
}