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=" 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-2  row-start-2 col-start-2 bg-pink-200 rounded-lg shadow-md flex items-center justify-center">
        <p>Salmon</p>
      </div>

      <div className="col-span-4 row-span-4  row-start-2  bg-lime-200 rounded-lg shadow-md flex items-center justify-center">
        <p>Broccoli</p>
      </div>

      <div className="col-span-2 col-start-2 row-span-2 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
        <p>Tamago</p>
      </div>

      <div className="col-span-2 col-start-2  row-span-3 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
        <p>Pork</p>
      </div>

      <div className="col-span-4 col-start-4 row-span-2 bg-green-200 rounded-lg shadow-md flex items-center justify-center">
        <p>Edamame</p>
      </div>
    </div>
    // <div className="py-4 px-2 mx-auto max-w-screen-xl sm:py-4 lg:px-6">
    //   <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4 h-full">
    //     {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>
  );
}