import Link from "next/link";
import { PageShell } from "@/components/page";
import { upcomingEvents } from "@/lib/mock";
import { prisma } from "@/lib/prisma";

export default async function EventsPage() {
  const dbEvents = await prisma.post.findMany({
    where: { hidden: false, kind: "event" },
    include: { author: true },
    orderBy: { eventAt: "asc" },
  });
  const extras = upcomingEvents().filter(
    (event) => !dbEvents.some((item) => item.title === event.title),
  );

  return (
    <PageShell
      wide
      eyebrow="Events"
      title="Viewings, shows, and meetups"
      lede="Invitation trays, lab days, and cutter tables. Verified professionals may request a seat."
    >
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {dbEvents.map((event) => (
          <article key={event.id} className="event-card">
            <p className="eg-eyebrow">{event.kind}</p>
            <h2 className="text-2xl">
              <Link href={`/feed/${event.id}`}>{event.title}</Link>
            </h2>
            {event.eventAt ? (
              <time dateTime={event.eventAt.toISOString()}>
                {event.eventAt.toLocaleDateString(undefined, {
                  weekday: "short",
                  month: "short",
                  day: "numeric",
                })}
                {event.location ? ` · ${event.location}` : ""}
              </time>
            ) : null}
            <p className="text-muted">{event.body}</p>
            <p className="text-sm text-muted">Posted by {event.author.name}</p>
          </article>
        ))}
        {extras.map((event) => (
          <article key={event.title} className="event-card">
            <p className="eg-eyebrow">{event.kind}</p>
            <h2 className="text-2xl">{event.title}</h2>
            <time dateTime={event.when.toISOString()}>
              {event.when.toLocaleDateString(undefined, {
                weekday: "short",
                month: "short",
                day: "numeric",
              })}
              {` · ${event.location}`}
            </time>
            <p className="text-muted">{event.body}</p>
          </article>
        ))}
      </div>
      <p className="mt-8 text-sm text-muted">
        Want the conversation around an event?{" "}
        <Link href="/feed" className="text-primary">
          Open discussions
        </Link>
        .
      </p>
    </PageShell>
  );
}