page.tsx

import FollowButton from "@/components/following-button"
import GameItem from "@/components/game-item"
import { AspectRatio } from "@/components/ui/aspect-ratio"
import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { UserAvatar } from "@/components/user-avatar"
import { db } from "@/lib/db"
import { getFavoriteGames } from "@/lib/igdb"
import { getCurrentUser } from "@/lib/session"
import { IGame } from "@/types/igdb-types"
import { redirect } from "next/navigation"


export default async function User({ params }: { params: { userid: string } }) {
  const user = await getCurrentUser()

  const sessionUser = await db.user.findFirst({
    where: {
      id: user?.id
    },
    include: {
      following: true,
      followers: true
    }
  })

  const fullUser = await db.user.findFirst({
    where: {
      username: params.userid
    },
    include: {
      following: true,
      followers: true
    }
  })

  if (!fullUser) {
    redirect('/')
  }

  let favoritegames = undefined
  let playingGames = undefined
  let finishedGames = undefined
  let planningGames = undefined

  if (fullUser?.favGameList?.length !== 0 && fullUser?.favGameList?.length != undefined) {
    favoritegames = await getFavoriteGames(fullUser?.favGameList!)
  }
  if (fullUser?.playingGameList?.length !== 0) {
    playingGames = await getFavoriteGames(fullUser?.playingGameList!)
  }
  if (fullUser?.finishedGameList?.length !== 0) {
    finishedGames = await getFavoriteGames(fullUser?.finishedGameList!)
  }
  if (fullUser?.planningGameList?.length !== 0) {
    planningGames = await getFavoriteGames(fullUser?.planningGameList!)
  }

  return (
    <>
      <div className="main-content h-full">
        <Card className="w-full h-full overflow-hidden">
          <div className="h-64 overflow-hidden">
            <AspectRatio ratio={889 / 500} className="bg-slate-600  dark:bg-slate-400">
              {/* profile banner */}
              {/* <Image
              src={ }
              alt={ }
              fill
              priority
              className="object-center" /> */}
            </AspectRatio>
          </div>
          <div className="p-6 md:p-12 ss:flex">
            <UserAvatar
              user={{ username: fullUser.username, image: fullUser.image || null }}
              className="h-52 w-52 -mt-36"
            />
            <div className="ml-6 md:ml-12 space-y-3">
              <h1 className="text-2xl font-bold">{fullUser.name}</h1>
              <h1 className="text-md text-sky-500">@{fullUser.username}</h1>
              {/* <h1 className="pt-3">{fullUser.bio}</h1> */}
            </div>
            <div className="flex justify-start ml-6 md:ml-12 space-y-3">
              <FollowButton user={sessionUser!} followingId={fullUser?.id!} />
            </div>
          </div>

          <div className="px-6 md:px-12">
            {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
            {/* gweets */}
          </div>
        </Card >
        <div className="side-content">
          <Card className="p-6 grid items-start gap-2 bg-secondary">
            <h1>Media</h1>
            <div className="grid grid-cols-1 gap-4">
              {Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
                return (
                  <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
                )
              })}
            </div>
          </Card>
        </div>


      </div >
      <div className="main-content">
        <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
          <h1 className="text-2xl font-bold pb-3">Your Favorite Games</h1>
          <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
            {favoritegames ? favoritegames.map((game: IGame) => (
              <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
            ))
              :
              <p>You have no favorites currently</p>}
          </div>
        </Card>

        <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
          <h1 className="text-2xl font-bold pb-3">Currently Playing</h1>
          <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
            {playingGames ? playingGames.map((game: IGame) => (
              <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
            ))
              :
              <p>You are currently not playing any games</p>}
          </div>
        </Card>

        <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
          <h1 className="text-2xl font-bold pb-3">Planning on Playing</h1>
          <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
            {planningGames ? planningGames.map((game: IGame) => (
              <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
            ))
              :
              <p>You are currently not planning on playing any games</p>}
          </div>
        </Card>

        <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
          <h1 className="text-2xl font-bold pb-3">Finished Games</h1>
          <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
            {finishedGames ? finishedGames.map((game: IGame) => (
              <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
            ))
              :
              <p>You have no Games in your finished-Games-List </p>}
          </div>
        </Card>
      </div>
    </>
  )
}