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

export const dynamic = "force-dynamic";

export const metadata = { title: "Rare values" };

type CategoryRow = {
  id: bigint;
  name: string;
  badge: string;
  priority: number;
};

export default async function RareValuesPage() {
  const t = await getTranslations("pages.rares");
  let categories: CategoryRow[] = [];
  try {
    categories = await prisma.websiteRareValueCategories.findMany({
      orderBy: [{ priority: "asc" }, { name: "asc" }],
      select: { id: true, name: true, badge: true, priority: true },
    });
  } catch {
    categories = [];
  }

  // Per-category rare counts (grouped so we avoid N queries).
  const counts = new Map<string, number>();
  try {
    const grouped = await prisma.websiteRareValues.groupBy({
      by: ["categoryId"],
      _count: { _all: true },
    });
    for (const g of grouped) {
      counts.set(String(g.categoryId), g._count._all);
    }
  } catch {
    // leave counts empty -> shown as 0
  }

  const badgesBase = (await siteSettings.get("badges_path", "")) ?? "";

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

      {categories.length === 0 ? (
        <ContentCard padded={false}>
          <EmptyState icon="💎">{t("empty")}</EmptyState>
        </ContentCard>
      ) : (
        <div className="card-grid sm-2 lg-3">
          {categories.map((c) => {
            const id = String(c.id);
            const count = counts.get(id) ?? 0;
            const badgeSrc = badgesBase && c.badge ? `${badgesBase}/${c.badge}.gif` : "";
            return (
              <Link
                key={id}
                href={`/rares/${id}`}
                className="content-card hover-lift"
                style={{ color: "inherit", textDecoration: "none" }}
              >
                <div className="content-card-head">
                  {badgeSrc ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={badgeSrc}
                      alt={`${c.name} badge`}
                      width={36}
                      height={36}
                      style={{ flexShrink: 0 }}
                    />
                  ) : (
                    <span className="content-card-icon" aria-hidden>
                      💎
                    </span>
                  )}
                  <div className="content-card-head-text">
                    <p className="content-card-title">{c.name}</p>
                    <p className="content-card-subtitle">
                      {t("rareCount", { count })}
                    </p>
                  </div>
                </div>
                <div className="content-card-body">
                  <span className="btn btn-outline">{t("viewRares")}</span>
                </div>
              </Link>
            );
          })}
        </div>
      )}
    </main>
  );
}