daphnis/app/(sharing)/[token]/[id]/page.tsx

import { getAuth } from "@/auth/queries/getauth";
import { shareScore } from "../token";
import { getDifficultyClass, getDifficultyText, getGrade } from "@/lib/helpers";
import {
  type chuni_score_playlog,
  chuni_static_music,
} from "@/prisma/schemas/artemis/generated/artemis";
import { generatePlaylogId, getSongsWithTitles } from "./actions";

type chunithm = chuni_score_playlog &
  chuni_static_music & { playCount: number };

export default async function Share({
  params,
}: {
  // pass the token and playlog id as params www.www.com/generatedtoken/playlogid
  params: { token: string; id: string };
}) {
  const { token, id } = params;

  // Verify the token
  const tokenResult = await shareScore(token);

  if (tokenResult.error) {
    return <p>{tokenResult.error}</p>;
  }

  const { user } = await getAuth();

  if (!user?.UserId) {
    return <p>Error: No user ID found.</p>;
  }

  const userId = user?.UserId;
  const playlogId = parseInt(id);

  const songsData = await getSongsWithTitles(userId);
  const playlogIds = await generatePlaylogId(playlogId);

  // Filter songsData to match the playlogIds
  const chunithm: chunithm[] = songsData.filter((song) =>
    playlogIds.includes(song.id),
  );
  return (
    <div className="flex flex-col items-center justify-center space-y-4 p-4 dark:text-black">
      <div className="w-full rounded-sm bg-white p-4 dark:text-black">
        {chunithm.map((song) => (
          <div key={song.id} className="w-full">
            <span className="text-center text-xl font-bold text-black">
              Song: {song.title}
            </span>
          </div>
        ))}
      </div>

      <div className="w-full rounded-sm bg-white p-4 dark:text-black">
        {chunithm.map((song) => (
          <div key={song.id} className="w-full">
            <span className="text-center text-xl font-bold text-black">
              Artist: {song.artist}
            </span>
          </div>
        ))}
      </div>

      <div className="w-full rounded-sm bg-white p-4 dark:text-black">
        {chunithm.map((song) => (
          <div key={song.id} className="w-full">
            <span className="text-center text-xl font-bold text-black">
              Score: {song.score?.toLocaleString()}
            </span>
          </div>
        ))}
      </div>

      <div className="w-full rounded-sm bg-white p-4 dark:text-black">
        {chunithm.map((song) => (
          <div key={song.id} className="w-full">
            <span className="text-center text-xl font-bold text-black">
              Rank: {getGrade(song.score ?? 0)}
            </span>
          </div>
        ))}
      </div>

      <div className="w-full rounded-sm bg-white p-4 dark:text-black">
        {chunithm.map((song) => (
          <div key={song.id} className="w-full">
            <span className="pr-2 text-center text-xl font-bold text-black">
              {song.isFullCombo && "FULL COMBO!"}
            </span>
            <span className="text-center text-xl font-bold text-black">
              Max combo: {song.maxCombo}
            </span>
          </div>
        ))}
      </div>

      <div className="w-full rounded-sm bg-white p-4 dark:text-black">
        {chunithm.map((song) => (
          <div key={song.id} className="w-full">
            <div className="flex flex-col items-center justify-center">
              <span className="text-md w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-white shadow-[inset_0px_3px_6px_0px_#1a202c]">
                Judge Justice: {song.judgeJustice}
              </span>
              <span className="text-md m-5 w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-white shadow-[inset_0px_3px_6px_0px_#1a202c]">
                Judge Attack: {song.judgeAttack}
              </span>
              <span className="text-md w-full rounded-md bg-[#58329F] p-2 text-center font-bold text-white shadow-[inset_0px_3px_6px_0px_#1a202c]">
                Miss: {song.judgeGuilty}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}