import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

function formatDate(d: Date | null | undefined): string {
  return d ? d.toISOString().slice(0, 10) : "";
}

export default async function RadioGiveawaysPage() {
  // RadioGiveaways.id is a BigInt — stringify before use in keys/routes.
  const giveaways = await prisma.radioGiveaways
    .findMany({
      orderBy: { createdAt: "desc" },
      take: 50,
    })
    .catch(() => []);

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🎁"
        title="Radio Giveaways"
        subtitle="Listen in for your chance to win in our radio giveaways"
      />

      <ContentCard padded={giveaways.length === 0}>
        {giveaways.length === 0 ? (
          <EmptyState icon="🎁">No giveaways yet.</EmptyState>
        ) : (
          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
            {giveaways.map((g) => {
              const id = g.id.toString();
              return (
                <Link
                  key={id}
                  href={`/radio/giveaways/${id}`}
                  className="card hover"
                  style={{ color: "inherit", textDecoration: "none", display: "grid", gap: "0.3rem" }}
                >
                  <h3 style={{ margin: 0, fontSize: "1rem" }}>
                    <span aria-hidden>🎁</span> Giveaway #{id}
                  </h3>
                  <p className="muted" style={{ margin: 0 }}>
                    {formatDate(g.createdAt) || "Date unknown"}
                  </p>
                </Link>
              );
            })}
          </div>
        )}
      </ContentCard>
    </main>
  );
}