import type { Metadata } from "next";
import Link from "next/link";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { getAllEvents, priceFromCents, isSoldOut } from "@db/queries/events";
import EventsExplorer, { type EventCard } from "./events-explorer";

export const metadata: Metadata = {
  title: "Events · VibePass Tickets",
  description: "Discover live events across Kenya — music, culture, wellness and more.",
};

// 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 EventsPage() {
  const events = await getAllEvents();

  const cards: EventCard[] = events.map((e) => ({
    id: e.id,
    slug: e.slug,
    title: e.title,
    organizer: e.organizer_name,
    venue: e.venue,
    city: e.city,
    startsAt: e.starts_at,
    endsAt: e.ends_at,
    coverImageUrl: e.cover_image_url,
    ageRestriction: e.age_restriction,
    category: e.categories?.name ?? null,
    currency: e.ticket_types[0]?.currency ?? "kes",
    priceFromCents: priceFromCents(e.ticket_types),
    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">
            <div>
              <h1 className="text-4xl sm:text-5xl font-black tracking-tight text-white">
                What&rsquo;s on
              </h1>
              <p className="mt-3 max-w-xl text-muted">
                Live events across Kenya — pay with M-Pesa and your ticket arrives instantly.
              </p>
            </div>
            <Link
              href="/events/calendar"
              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"
            >
              <CalendarIcon />
              Calendar view
            </Link>
          </div>
        </div>
      </section>

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

      <SiteFooter />
    </div>
  );
}

function CalendarIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
      <rect x="3" y="4.5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
      <path d="M3 9h18M8 3v3M16 3v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}