import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { Section } from "@/components/Section";
import { Reveal } from "@/components/Reveal";
import { EventTeaserCard } from "@/components/EventTeaserCard";
import { getAllEvents } from "@/lib/payload/content";
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 DESCRIPTION = "Aktuelle Termine und Veranstaltungen von Anouma.";

export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata({ title: "Termine", description: DESCRIPTION, path: "/termine" });
}

export default async function TerminePage() {
  const events = await getAllEvents();
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const upcoming = events.filter((e) => new Date(e.date) >= today).reverse();
  const past = events.filter((e) => new Date(e.date) < today);
  const siteUrl = await getSiteUrl();

  return (
    <>
      <JsonLd data={webPageJsonLd({ name: "Termine", description: DESCRIPTION, url: `${siteUrl}/termine` })} />
      <PageHeader
        eyebrow="Termine"
        title="Aktuelle Termine"
        lead="Ein Überblick über anstehende Kreise, Begleitungen und Veranstaltungen."
        crumbs={[{ title: "Termine" }]}
      />

      <Section tone="plain">
        {upcoming.length === 0 ? (
          <p className="text-lg text-anouma-plum">
            Aktuell sind keine Termine geplant — schau gerne bald wieder vorbei oder melde dich
            direkt über die <a href="/kontakt" className="underline underline-offset-4">Kontaktseite</a>.
          </p>
        ) : (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {upcoming.map((event, i) => (
              <Reveal key={event.slug} delay={Math.min(i * 0.06, 0.3)}>
                <EventTeaserCard event={event} />
              </Reveal>
            ))}
          </div>
        )}
      </Section>

      {past.length > 0 && (
        <Section tone="warm">
          <h2 className="font-serif text-2xl font-medium text-anouma-plum">Vergangene Termine</h2>
          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {past.map((event) => (
              <div key={event.slug} className="opacity-70">
                <EventTeaserCard event={event} />
              </div>
            ))}
          </div>
        </Section>
      )}
    </>
  );
}