MineGeo/app/leaderboard/page.tsx

import { getI18n } from "@/lib/i18n";
import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, ArrowRight, Search } from "lucide-react";
import { Header, Footer } from "@/components/Shell";
import {
  LeaderboardEmpty,
  LeaderboardTable,
  WinnersPodium,
} from "@/components/Leaderboard";
import { PixelTrophy } from "@/components/PixelArt";
import { leaderboard } from "@/lib/leaderboard";
import { user } from "@/lib/supabase";
import {
  leaderboardDifficulties,
  leaderboardFilters,
  leaderboardHref,
} from "@/shared/leaderboard";

export const dynamic = "force-dynamic";
export async function generateMetadata(): Promise<Metadata> {
  const { t } = await getI18n();
  return {
    title: t("Leaderboard"),
    description: t(
      "Meet MineGeo’s top explorers. Compare the best five-round scores across easy, normal, and hard Minecraft expeditions.",
    ),
  };
}

export default async function LeaderboardPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const { t, formatNumber } = await getI18n();
  const { difficulty, search, page } = leaderboardFilters(await searchParams);
  const [data, account] = await Promise.all([
    leaderboard({ difficulty, search, page }),
    user(),
  ]);
  return (
    <>
      <Header />
      <main className="section page-content leaderboard-page" id="main-content">
        <Link href="/" className="text-link leaderboard-back">
          <ArrowLeft size={14} /> {t("Back to home")}
        </Link>
        <header className="leaderboard-intro">
          <div>
            <span className="eyebrow">{t("THE EXPLORERS’ BOARD")}</span>
            <h1>{t("Every block counts.")}</h1>
            <p className="lead">
              {t("The sharpest eyes in the Overworld.")}
              <br />
              {t("Five rounds. 25,000 possible points. Where do you stand?")}
            </p>
          </div>
          <PixelTrophy className="intro-trophy" />
        </header>
        <div className="leaderboard-toolbar">
          <nav
            className="leaderboard-filters"
            aria-label={t("Filter leaderboard by difficulty")}
          >
            {leaderboardDifficulties.map((value) => (
              <Link
                key={value}
                href={leaderboardHref(value, search)}
                aria-current={difficulty === value ? "page" : undefined}
              >
                {value === "all"
                  ? t("All difficulties")
                  : t(value[0].toUpperCase() + value.slice(1))}
              </Link>
            ))}
          </nav>
          <span className="leaderboard-period">{t("All time")}</span>
        </div>
        {data ? (
          <>
            {data.leaders.length > 0 && !search && data.page === 1 && (
              <WinnersPodium leaders={data.leaders} />
            )}
            <section
              className="rankings-board"
              aria-labelledby="rankings-heading"
            >
              <div className="rankings-heading">
                <div>
                  <h2 id="rankings-heading">{t("The rankings")}</h2>
                  <p>
                    {t("Players: {players} · Completed expeditions: {games}", {
                      players: formatNumber(data.total_players),
                      games: formatNumber(data.total_games),
                    })}
                  </p>
                </div>
                <form
                  action="/leaderboard"
                  className="leaderboard-search"
                  role="search"
                >
                  {difficulty !== "all" && (
                    <input type="hidden" name="difficulty" value={difficulty} />
                  )}
                  <label className="sr-only" htmlFor="player-search">
                    {t("Search players")}
                  </label>
                  <input
                    key={`${difficulty}-${search}`}
                    id="player-search"
                    type="search"
                    name="q"
                    defaultValue={search}
                    placeholder={t("Find an explorer…")}
                    maxLength={64}
                  />
                  <button type="submit" aria-label={t("Search players")}>
                    <Search size={17} />
                  </button>
                </form>
              </div>
              {search && (
                <div className="search-summary">
                  <span>
                    {t("Results for “{search}”: {count}", {
                      search,
                      count: formatNumber(data.matching_players),
                    })}
                  </span>
                  <Link href={leaderboardHref(difficulty)}>
                    {t("Clear search ×")}
                  </Link>
                </div>
              )}
              {data.entries.length ? (
                <LeaderboardTable
                  entries={data.entries}
                  playerId={account?.id}
                />
              ) : (
                <LeaderboardEmpty search={!!search} />
              )}
              {data.matching_players > 0 && (
                <div className="leaderboard-pagination">
                  <span>
                    {t("Showing")} {formatNumber((data.page - 1) * 25 + 1)}–
                    {formatNumber(
                      Math.min(data.page * 25, data.matching_players),
                    )}{" "}
                    {t("of")} {formatNumber(data.matching_players)}
                  </span>
                  <nav aria-label={t("Leaderboard pages")}>
                    {data.page > 1 ? (
                      <Link
                        aria-label={t("Previous page")}
                        href={leaderboardHref(
                          difficulty,
                          search,
                          data.page - 1,
                        )}
                      >
                        <ArrowLeft size={15} /> {t("Previous")}
                      </Link>
                    ) : (
                      <span aria-disabled="true">
                        <ArrowLeft size={15} /> {t("Previous")}
                      </span>
                    )}
                    <span className="page-number">
                      {data.page} / {data.pages}
                    </span>
                    {data.page < data.pages ? (
                      <Link
                        aria-label={t("Next page")}
                        href={leaderboardHref(
                          difficulty,
                          search,
                          data.page + 1,
                        )}
                      >
                        {t("Next")} <ArrowRight size={15} />
                      </Link>
                    ) : (
                      <span aria-disabled="true">
                        {t("Next")} <ArrowRight size={15} />
                      </span>
                    )}
                  </nav>
                </div>
              )}
            </section>
          </>
        ) : (
          <LeaderboardEmpty unavailable />
        )}
        <aside className="leaderboard-rules">
          <div>
            <span className="eyebrow">{t("HOW THE BOARD WORKS")}</span>
            <h2>{t("A place earned, one guess at a time.")}</h2>
          </div>
          <div>
            <p>
              {t(
                "Your best completed expedition sets your rank. Ties are broken by average score, then completed games. Difficulty filters rank only games in that mode.",
              )}
            </p>
            <p>
              {t(
                "Log in before you play. All five rounds must be finished to count; guest games stay off the board.",
              )}
            </p>
            <Link href={account ? "/servers" : "/log-in"} className="text-link">
              {account
                ? t("Start your next expedition")
                : t("Log in to join the board")}{" "}
              <ArrowRight size={15} />
            </Link>
          </div>
        </aside>
      </main>
      <Footer />
    </>
  );
}