import { getAuth } from "@/auth/queries/getauth";
import { generatePlaylogId, getSongsWithTitles } from "@/lib/api";
import { shareScore } from "../token";
import { getDifficultyClass, getDifficultyText } from "@/lib/helpers";

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 = songsData.filter((song) => playlogIds.includes(song.id));
  return (
    <div className="flex justify-center items-center h-screen">
      {matchedSongs.map((song) => (
        <div
          key={song.id}
          className="bg-slate-500  h-200 w-400 flex justify-center items-center"
        >
          <div className="text-white text-lg">
            <p>{song.title}</p>
            <p>Artist: {song.artist}</p>
            <p>Genre: {song.genre}</p>
            <p>diff: {song.chartlevel}</p>

            <p>Level: {song.level}</p>

            <p>Full Combo: {song.isFullCombo ? "Yes" : "No"}</p>
            <p>Score: {song.score}</p>

            <div>
              <span
                className={`justify-center rounded-sm text-center text-sm font-bold ${getDifficultyClass(
                  song.chartId
                )} text-white`}
              >
                {getDifficultyText(song.chartId)}
              </span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}