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 { ArrowLink } from "@/components/ArrowLink";
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)
    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
  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" }]}
        blobTone="mauve"
        blobPosition="top-left"
      />

      <Section tone="plain">
        {upcoming.length === 0 ? (
          <div className="rounded-3xl bg-anouma-cream-light p-8 text-center sm:p-10">
            <p className="font-serif text-xl font-medium text-anouma-plum">Aktuell sind keine Termine geplant</p>
            <p className="mt-2 text-base leading-relaxed text-anouma-plum/90">
              Schau gerne bald wieder vorbei, oder melde dich direkt - ich freue mich von dir zu hören.
            </p>
            <div className="mt-5 flex justify-center">
              <ArrowLink href="/kontakt">Zur Kontaktseite</ArrowLink>
            </div>
          </div>
        ) : (
          <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>
      )}
    </>
  );
}