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

export default async function Share({
  params,
}: {
  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 matchedSongs: chuni_score_playlog[] = songsData.filter((song) =>
    playlogIds.includes(song.id)
  );
  return (
    <div className="h-screen grid w-full gap-4 bg-red-200 grid-cols-8 grid-rows-9 rounded-lg shadow-md">
      <div className="col-span-2 row-span-1 row-start-2 col-start-2 bg-white rounded-lg shadow-md flex items-center justify-center">
        {matchedSongs.map((song) => (
          <div
            key={song.id}
            className="flex justify-center items-center w-full"
          >
            <div className=" w-full p-4">
              <div className="bg-[#FE176E] rounded-xl w-full text-center uppercase font-medium ">
                <span className=" text-white font-bold text-xl ">
                  {song.isNewRecord && "NEW RECORD!!"}
                </span>
              </div>
              <p className="text-center p-5 font-bold  text-4xl">
                {" "}
                {song.score?.toLocaleString()}
              </p>
            </div>
          </div>
        ))}
      </div>

      <div className="col-span-4 row-span-4 row-start-2 bg-white rounded-lg shadow-md flex flex-col justify-start items-center p-4">
        {matchedSongs.map((song) => (
          <div key={song.id} className="w-full">
            <div className="bg-[#FE176E] rounded-xl w-full text-center uppercase font-medium">
              <span className="text-white font-bold text-xl">
                {song.isNewRecord && "NEW!!"}
              </span>
            </div>
            <div className=" flex items-center justify-center">
              <span className=" text-black  text-center p-5 font-bold text-8xl">
                {getGrade(song.score ?? 0)}
              </span>
            </div>
          </div>
        ))}
      </div>

      <div className="col-span-1 col-start-3 row-span-1 row-start-3 bg-white rounded-lg shadow-md flex items-center justify-center">
        {matchedSongs.map((song) => (
          <div key={song.id} className="w-full">
            <div className=" flex flex-col items-center justify-center">
              <span className=" text-black   text-center p-5 font-bold text-xl">
                {song.isFullCombo && "FULL COMBO"}
              </span>
              <span className=" text-black   text-center font-medium text-xl">
                Max combo: {song.maxCombo}
              </span>
            </div>
          </div>
        ))}
      </div>
      <div className="col-span-1 col-start-3 row-span-3 bg-white rounded-lg shadow-md flex items-center justify-center">
        {matchedSongs.map((song) => (
          <div key={song.id} className="w-full p-5">
            <div className=" flex flex-col items-center justify-center ">
              <span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md ">
                Judge Justice: {song.judgeJustice}
              </span>
              <span className="text-white rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md m-5">
                Judge Attack: {song.judgeAttack}
              </span>
              <span className="text-white  rounded-md shadow-[inset_0px_3px_6px_0px_#1a202c] bg-[#58329F] w-full text-center p-2 font-bold text-md">
                Miss: {song.judgeGuilty}
              </span>
            </div>
          </div>
        ))}
      </div>
      <div className="col-span-4 col-start-4 row-span-1 bg-white rounded-lg shadow-md flex items-center justify-center">
        <p>Edamame</p>
      </div>
    </div>
  );
}