import type { Metadata } from "next";
import Link from "next/link";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { getAllEvents, isSoldOut } from "@db/queries/events";
import { eatDayKey, formatEventTime } from "@/lib/format";
import EventsCalendar, { type CalendarEvent } from "./events-calendar";

export const metadata: Metadata = {
  title: "Events calendar · VibePass Tickets",
  description: "Browse VibePass events by date.",
};

// Must render per-request, not bake a build-time DB snapshot into a static
// page — the event catalog changes constantly (new listings, sold-out state).
export const dynamic = "force-dynamic";

export default async function EventsCalendarPage() {
  const events = await getAllEvents();

  const calendarEvents: CalendarEvent[] = events.map((e) => ({
    id: e.id,
    slug: e.slug,
    title: e.title,
    city: e.city,
    dayKey: eatDayKey(e.starts_at),
    timeLabel: formatEventTime(e.starts_at),
    soldOut: isSoldOut(e.ticket_types),
  }));

  return (
    <div className="flex-1 bg-bg">
      <SiteNav />

      <section className="border-b border-line bg-panel">
        <div className="max-w-6xl mx-auto px-4 py-14">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
            Discover
          </p>
          <div className="mt-3 flex flex-wrap items-end justify-between gap-4">
            <h1 className="text-4xl sm:text-5xl font-black tracking-tight text-white">Calendar</h1>
            <Link
              href="/events"
              className="inline-flex items-center gap-2 rounded-full border border-line px-5 py-2.5 text-sm font-semibold text-white hover:border-brand-green"
            >
              ← List view
            </Link>
          </div>
        </div>
      </section>

      <main className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 py-12">
          <EventsCalendar events={calendarEvents} />
        </div>
      </main>

      <SiteFooter />
    </div>
  );
}