Frontend/src/app/(pages)/player/[[...id]]/page.tsx

/* eslint-disable @next/next/no-img-element */
import { Card } from "@/app/components/card";
import { CodeDialog } from "@/app/components/code-dialog";
import { CopyButton } from "@/app/components/copy-button";
import { ErrorCard } from "@/app/components/error-card";
import { LookupPlayer } from "@/app/components/player/lookup-player";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
import { Separator } from "@/app/components/ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
import { Colors } from "@/common/colors";
import { generateEmbed } from "@/common/embed";
import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
import { Metadata, Viewport } from "next";
import Image from "next/image";
import Link from "next/link";
import { ReactElement } from "react";
import config from "../../../../../config.json";

type Params = {
  params: {
    id: string;
  };
};

export async function generateViewport({ params: { id } }: Params): Promise<Viewport> {
  try {
    if (!id || id.length === 0) {
      return {
        themeColor: Colors.red,
      };
    }
    await getPlayer(id); // Ensure the player is valid.
    return {
      themeColor: Colors.green,
    };
  } catch (err) {
    // An error occurred
    return {
      themeColor: Colors.red,
    };
  }
}

export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
  try {
    // No id provided
    if (!id || id.length === 0) {
      return generateEmbed({
        title: "Player Lookup",
        description: "Click to lookup a player.",
      });
    }
    const player = await getPlayer(id);

    const { username, uniqueId, skin } = player;
    const headPartUrl = skin.parts.head;

    const description = `UUID: ${uniqueId}\n\nClick to view more information about the player.`;

    return generateEmbed({
      title: `${username}`,
      description: description,
      image: headPartUrl,
    });
  } catch (err) {
    // An error occurred
    return generateEmbed({
      title: "Player Not Found",
      description: (err as McUtilsAPIError).message,
    });
  }
}

export default async function Page({ params: { id } }: Params): Promise<ReactElement> {
  let error: string | undefined = undefined; // The error to display
  let player: CachedPlayer | undefined = undefined; // The player to display

  // Try and get the player to display
  try {
    player = id ? await getPlayer(id) : undefined;
  } catch (err) {
    error = (err as McUtilsAPIError).message; // Set the error message
  }

  return (
    <div className="h-full flex flex-col items-center">
      <div className="mb-4 text-center">
        <h1 className="text-xl">Lookup a Player</h1>
        <p>You can enter a players uuid or username to get information about the player.</p>

        <LookupPlayer />
      </div>

      {error && <ErrorCard message={error} />}
      {player != undefined && (
        <ContextMenu>
          <ContextMenuTrigger>
            <Card className="w-max xs:w-fit">
              <div className="flex gap-4 flex-col xs:flex-row relative">
                <div className="absolute 8xl:top-0 xs:bottom-0">
                  <CodeDialog
                    title="Player Data"
                    description="The player's data from the API"
                    code={JSON.stringify(player, undefined, 2)}
                  >
                    <button className="bg-background rounded-lg">
                      <p className="p-1">JSON</p>
                    </button>
                  </CodeDialog>
                </div>

                <div className="flex justify-center xs:justify-start">
                  <Image
                    className="w-[96px] h-[96px]"
                    src={player.skin.parts.head}
                    width={96}
                    height={96}
                    quality={100}
                    alt="The player's skin"
                  />
                </div>

                <div className="flex flex-col gap-2">
                  <div>
                    <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
                    <p>{player.uniqueId}</p>
                  </div>

                  <Separator />

                  <div className="flex flex-col gap-2">
                    <p className="text-lg">Skin Parts</p>
                    <div className="flex gap-2">
                      {Object.entries(player.skin.parts)
                        .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
                        .map(([part, url]) => {
                          return (
                            <Tooltip key={part}>
                              <TooltipTrigger>
                                <Link href={url} target="_blank">
                                  <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
                                </Link>
                              </TooltipTrigger>
                              <TooltipContent>
                                <p>
                                  Click to view {player.username}&apos;s {part}
                                </p>
                              </TooltipContent>
                            </Tooltip>
                          );
                        })}
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </ContextMenuTrigger>
          <ContextMenuContent className="flex flex-col">
            <CopyButton content={player.username}>
              <ContextMenuItem>Copy Player Username</ContextMenuItem>
            </CopyButton>

            <CopyButton content={player.uniqueId}>
              <ContextMenuItem>Copy Player UUID</ContextMenuItem>
            </CopyButton>

            <CopyButton content={`${config.siteUrl}/player/${id}`}>
              <ContextMenuItem>Copy Share URL</ContextMenuItem>
            </CopyButton>
          </ContextMenuContent>
        </ContextMenu>
      )}
    </div>
  );
}