import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import { JoinForm } from "@/components/meeting/JoinForm";
import { OrganicBlob } from "@/components/OrganicBlob";
import { getEventForJoin } from "@/lib/payload/content";
import { combineDateAndTime } from "@/lib/meeting/status";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Meeting beitreten",
  robots: { index: false, follow: false },
};

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

export default async function BeitretenPage({ params }: Args) {
  const { slug } = await params;
  const event = await getEventForJoin(slug);
  if (!event || !event.isOnline) notFound();

  const start = combineDateAndTime(event.date, event.startTime);
  const dateLabel = start.toLocaleDateString("de-DE", { day: "2-digit", month: "long" });
  const timeLabel = start.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });

  return (
    <section className="relative flex min-h-[80vh] items-center overflow-hidden py-20">
      <OrganicBlob tone="rose" className="-right-24 -top-24 h-96 w-96" />
      <OrganicBlob tone="cream" className="-left-32 bottom-0 h-96 w-96" />
      <div className="relative mx-auto w-full max-w-md px-6 text-center">
        <Link href="/" className="font-serif text-2xl font-semibold tracking-[0.12em] text-anouma-mauve-dark">
          ANOUMA
        </Link>
        <p className="mt-8 text-sm font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
          Dein Termin beginnt bald
        </p>
        <h1 className="mt-3 font-serif text-3xl font-medium text-anouma-plum">{event.title}</h1>
        <p className="mt-2 text-base text-anouma-plum/80">
          {dateLabel} · {timeLabel} Uhr
        </p>

        <div className="mt-10 rounded-[2rem] bg-white/70 p-8 text-left shadow-sm backdrop-blur">
          <JoinForm slug={slug} />
        </div>
      </div>
    </section>
  );
}