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

export const revalidate = 300;

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

export default async function RadioContestsPage() {
  const t = await getTranslations("pages.radioContests");

  const contests = await prisma.radioContests
    .findMany({
      where: { isActive: true },
      orderBy: { startDate: "desc" },
      take: 50,
      select: { id: true, title: true, prize: true, startDate: true, endDate: true },
    })
    .catch(() => []);

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🎉"
        title={t("title")}
        subtitle={t("subtitle")}
      />

      <ContentCard padded={contests.length === 0}>
        {contests.length === 0 ? (
          <EmptyState icon="🎉">{t("empty")}</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> {c.title || t("contestLabel", { id })}
                  </h3>
                  {c.prize ? (
                    <p className="muted" style={{ margin: 0, fontSize: "0.9rem" }}>
                      Prize: {c.prize}
                    </p>
                  ) : null}
                  <p className="muted" style={{ margin: 0, fontSize: "0.85rem" }}>
                    {c.startDate ? `${formatDate(c.startDate)} — ${c.endDate ? formatDate(c.endDate) : "ongoing"}` : t("dateUnknown")}
                  </p>
                </Link>
              );
            })}
          </div>
        )}
      </ContentCard>
    </main>
  );
}