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

export const revalidate = 300;

export const metadata = { title: "Badges" };

// Canonical Habbo badge image CDN. A badge_key (e.g. "ADM") maps to a .gif here.
const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";

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

  const badges = await prisma.websiteBadges
    .findMany({
      orderBy: { badgeName: "asc" },
    })
    .catch(() => []);

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

      <ContentCard padded={badges.length === 0}>
        {badges.length === 0 ? (
          <EmptyState icon="🏅">{t("noBadges")}</EmptyState>
        ) : (
          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
            {badges.map((badge) => (
              <div
                key={String(badge.id)}
                className="card hover"
                style={{ display: "flex", gap: "0.9rem", alignItems: "flex-start" }}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={`${BADGE_IMG_BASE}/${badge.badgeKey}.gif`}
                  alt={badge.badgeName}
                  title={badge.badgeKey}
                  width={40}
                  height={40}
                  style={{ flexShrink: 0 }}
                />
                <div style={{ minWidth: 0 }}>
                  <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>{badge.badgeName}</h3>
                  <p className="muted" style={{ margin: "0 0 0.35rem", fontFamily: "monospace" }}>
                    {badge.badgeKey}
                  </p>
                  <p style={{ margin: 0, fontSize: "0.9rem" }}>{badge.badgeDescription}</p>
                </div>
              </div>
            ))}
          </div>
        )}
      </ContentCard>
    </main>
  );
}