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

export const revalidate = 300;

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

type TopUser = {
  username: string;
  look: string;
  credits: number;
  rank: number;
  online: string;
};

export default async function RankingsPage() {
  const t = await getTranslations("pages.rankings");
  let users: TopUser[] = [];
  try {
    users = await prisma.user.findMany({
      select: { username: true, look: true, credits: true, rank: true, online: true },
      orderBy: { credits: "desc" },
      take: 12,
    });
  } catch {
    users = [];
  }

  const imagerBase = await siteSettings.get(
    "habbo_imaging_url",
    "https://www.habbo.com/habbo-imaging/avatarimage",
  );

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

      <ContentCard padded={users.length === 0}>
        {users.length === 0 ? (
          <EmptyState icon="🏆">{t("emptyState")}</EmptyState>
        ) : (
          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
            {users.map((u, i) => {
              const avatar = avatarImageUrl(imagerBase ?? "", u.look, { size: "m" });
              return (
                <div
                  key={u.username}
                  className="card hover"
                  style={{ display: "flex", gap: "0.9rem", alignItems: "center" }}
                >
                  <RankBadge position={i + 1} />
                  {/* biome-ignore lint/performance/noImgElement: external avatar imager */}
                  <img
                    className="avatar"
                    src={avatar}
                    alt={`${u.username} avatar`}
                    width={50}
                    height={90}
                  />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
                      <Link href={`/u/${u.username}`}>{u.username}</Link>
                    </h3>
                    <p className="currency" style={{ margin: "0 0 0.3rem" }}>
                      <span className="coin credits">c</span>
                      {u.credits.toLocaleString()}
                    </p>
                    <OnlineBadge online={u.online === "1"} />
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </ContentCard>
    </main>
  );
}