import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";

import { serverCaller } from "@/lib/trpc/server";

export const dynamic = "force-dynamic";

export const metadata = { title: "My Tickets · Stepping" };

function fmt(d: Date | null) {

  if (!d) return "DATE TBD";

  return new Date(d)

    .toLocaleString("en-US", {

      weekday: "short",

      month: "short",

      day: "numeric",

      hour: "numeric",

      minute: "2-digit",

    })

    .toUpperCase();

}

export default async function TicketsPage() {

  const tickets = await serverCaller().ticket.mine();

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href="/" className="kicker hover:text-gold">

        ← Chicago Stepping

      </Link>

      <p className="kicker mt-10 text-ash">Your passes</p>

      <h1 className="display mt-3 text-6xl sm:text-7xl">My Tickets</h1>

      {tickets.length === 0 ? (

        <p className="serif mt-8 text-xl text-ash">

          No tickets yet. Reserve a set or weekender and it shows up here, ready

          at the door.

        </p>

      ) : (

        <ul className="mt-10 flex flex-col gap-5">

          {tickets.map((t) => (

            <li

              key={t.id}

              className="flex items-stretch overflow-hidden border border-[var(--line)]"

            >

              <div className="flex-1 p-5">

                <p className="kicker text-gold">{(t.typeName ?? "TICKET").toUpperCase()}</p>

                <p className="display mt-1 text-2xl">{t.eventTitle}</p>

                <p className="kicker mt-2 text-ash">{fmt(t.startsAt)}</p>

              </div>

              <div className="flex w-40 flex-col items-center justify-center gap-1 border-l border-dashed border-[var(--line)] bg-gold/5 p-4">

                <span className="kicker text-ash">{t.status.toUpperCase()}</span>

                <span

                  className="text-center text-lg font-bold tracking-widest text-gold"

                  style={{ fontFamily: "var(--font-space-mono), monospace" }}

                >

                  {t.code}

                </span>

                <span className="kicker text-ash">Show at door</span>

              </div>

            </li>

          ))}

        </ul>

      )}

      <SiteFooter />

    </main>

  );

}