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 RadioContestsPage() {
  // RadioContests.id is a BigInt — stringify before use in keys/routes.
  const contests = await prisma.radioContests
    .findMany({
      orderBy: { createdAt: "desc" },
      take: 50,
    })
    .catch(() => []);

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🎉"
        title="Radio Contests"
        subtitle="Tune in and take part in our latest on-air contests"
      />

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