import { createFileRoute, Link } from "@tanstack/react-router";
import { Calendar } from "lucide-react";
import { PublicShell } from "@/components/public-shell";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { getPublicSite } from "@/lib/server/api-public";
import { formatDateTime } from "@/lib/utils";

export const Route = createFileRoute("/public/game-days")({
  loader: () => getPublicSite(),
  component: Page,
});

function Page() {
  const { events } = Route.useLoaderData();
  return (
    <PublicShell>
      <div className="mb-6">
        <p className="mb-1 text-[11px] font-medium tracking-[0.18em] text-primary uppercase">Public view</p>
        <h1 className="font-display text-4xl">Game days</h1>
        <p className="mt-2 max-w-2xl text-sm text-muted-foreground sm:text-base">
          Public studio sessions anyone can see. Donor-only sideline nights and member stadium nights stay off this
          list — those go out as special invites.
        </p>
      </div>
      <Card>
        <CardContent className="pt-5">
          <ul className="space-y-5">
            {events.map((e) => (
              <li key={e.id} className="flex gap-3">
                <span className="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary">
                  <Calendar className="size-4" />
                </span>
                <div>
                  <p className="font-semibold">{e.title}</p>
                  <p className="text-sm text-muted-foreground">
                    {formatDateTime(e.starts_at)} · {e.location}
                  </p>
                  {e.notes ? <p className="mt-1 text-sm text-muted-foreground">{e.notes}</p> : null}
                </div>
              </li>
            ))}
            {events.length === 0 ? (
              <li className="text-sm text-muted-foreground">No public Game Days posted yet.</li>
            ) : null}
          </ul>
        </CardContent>
      </Card>
      <p className="mt-6 text-sm text-muted-foreground">
        Donors receive special Game Day invites after they sign in.
      </p>
      <Button asChild className="mt-3">
        <Link to="/login">Donor login</Link>
      </Button>
    </PublicShell>
  );
}