import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { LeaderboardBoard, LeaderboardError, LeaderboardShell } from "../content";
import { RealtimeRefresh } from "@/components/realtime-refresh";
import { getXpLeaderboardPage } from "@/lib/leaderboard/database";
import { normalizeLeaderboardSearch, normalizeRequestedPage } from "@/lib/leaderboard/ranking";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "อันดับ XP",
  description: "ดูอันดับ XP รวมและเลเวลของสมาชิกใน Discord ของ Erika!",
  alternates: {
    canonical: "/leaderboard/xp",
  },
};

type XpLeaderboardPageProps = {
  searchParams: Promise<{
    page?: string | string[];
    q?: string | string[];
  }>;
};

export default async function XpLeaderboardPage({
  searchParams,
}: XpLeaderboardPageProps) {
  const query = await searchParams;
  const requestedPage = normalizeRequestedPage(query.page);
  const searchQuery = normalizeLeaderboardSearch(query.q);

  let data;
  try {
    data = await getXpLeaderboardPage(requestedPage, searchQuery);
  } catch (error) {
    console.error("Failed to load XP leaderboard", error);
    return (
      <LeaderboardShell
        active="xp"
        title="อันดับ XP"
        description="จัดอันดับจาก XP รวมของสมาชิกที่มีเลเวล 1 ขึ้นไป อันดับที่มี XP เท่ากันจะแชร์อันดับเดียวกัน"
        searchQuery={searchQuery}
      >
        <LeaderboardError source="database" />
      </LeaderboardShell>
    );
  }

  if (query.page !== undefined && query.page !== String(data.page)) {
    const params = new URLSearchParams();
    if (searchQuery) params.set("q", searchQuery);
    if (data.page > 1) params.set("page", String(data.page));
    const redirectQuery = params.toString();
    redirect(redirectQuery ? `/leaderboard/xp?${redirectQuery}` : "/leaderboard/xp");
  }

  return (
    <LeaderboardShell
      active="xp"
      title="อันดับ XP"
      description="จัดอันดับจาก XP รวมของสมาชิกที่มีเลเวล 1 ขึ้นไป อันดับที่มี XP เท่ากันจะแชร์อันดับเดียวกัน"
      searchQuery={searchQuery}
    >
      <RealtimeRefresh topic="leaderboards" leaderboard="xp" />
      <LeaderboardBoard kind="xp" data={data} searchQuery={searchQuery} />
    </LeaderboardShell>
  );
}