import { createFileRoute, Link } from "@tanstack/react-router";
import { PublicShell } from "@/components/public-shell";
import { AuctionCatalog } from "@/components/stadium/auction-catalog";
import { AuctionPaddle } from "@/components/stadium/auction-paddle";
import { GivebutterOptions } from "@/components/stadium/givebutter-options";
import { Button } from "@/components/ui/button";
import { getStadiumAuction } from "@/lib/server/api-stadium";
import { useRoleStore } from "@/lib/role-store";

export const Route = createFileRoute("/public/auction")({
  loader: async () => getStadiumAuction({ data: {} }),
  component: Page,
});

function Page() {
  const seed = Route.useLoaderData();
  const signedIn = useRoleStore((s) => s.signedIn);
  const role = useRoleStore((s) => s.role);
  return (
    <PublicShell>
      <div className="mb-6">
        <p className="mb-1 text-[11px] font-medium tracking-[0.18em] text-primary uppercase">Charitable auction · child app</p>
        <h1 className="font-display text-4xl">Sports memorabilia</h1>
        <p className="mt-2 max-w-2xl text-sm text-muted-foreground sm:text-base">
          Helmets, jerseys, and sideline pieces. Public members and donors hold the paddle. Students and instructors can
          watch. Sample photographs are watermarked — the lot you win is the authenticated piece, not the picture.
        </p>
        <div className="mt-4 flex flex-wrap gap-2">
          <Button asChild variant="outline" size="sm">
            <Link to="/public/stadium/$arena" params={{ arena: "football" }} search={{ walk: true }}>
              Walk into the stadium
            </Link>
          </Button>
          {role === "staff" ? (
            <Button asChild size="sm">
              <Link to="/admin/auction">Bid ledger</Link>
            </Button>
          ) : null}
        </div>
      </div>
      {signedIn ? <div className="mb-6"><AuctionPaddle compact /></div> : null}
      <AuctionCatalog lots={seed.lots} />
      <GivebutterOptions />
    </PublicShell>
  );
}