import AddGameDropdown from "@/components/add-game-dropdown"
import AddGameToFavList from "@/components/addGameToFavList"
import { BackHeader } from "@/components/back-header"
import { GlobalLayout } from "@/components/global-layout"
import { TryAgain } from "@/components/try-again"
import { AspectRatio } from "@/components/ui/aspect-ratio"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { db } from "@/lib/db"
import { getGame } from "@/lib/igdb"
import { getCurrentUser } from "@/lib/session"
import { formatDate } from "@/lib/utils"
import { IGame } from "@/types/igdb-types"
import Image from "next/image"

// renders a single game detail page
export default async function GameDetail({ params }: { params: { gameid: string } }) {
    const data: IGame[] = await getGame(parseInt(params.gameid))

    if (!data[0]) return <TryAgain />

    // TODO put to backend
    const date = data[0].first_release_date && formatDate(data[0].first_release_date * 1000)

    const user = await getCurrentUser()
    const fullUser = await db.user.findFirst({
        where: {
            id: user?.id
        }
    })

    const companies = data[0].involved_companies.map((company) => {
        if (company !== data[0]?.involved_companies[0]) {
            return `, ${company.company.name}`
        }
        return company.company.name
    })

    return (
        <GlobalLayout
            mainContent={
                <Card className="w-full overflow-hidden">
                    <div className="p-3">
                        <BackHeader>
                            <h1 className="font-bold">Game</h1>
                        </BackHeader>
                    </div>

                    <div className="h-64 overflow-hidden">
                        <AspectRatio ratio={889 / 500}>
                            <Image
                                src={data[0].screenshots[0]?.url ?? ""}
                                alt={data[0].name ?? ""}
                                fill
                                priority
                                className="object-center" />
                        </AspectRatio>
                    </div>
                    <div className="p-6 md:p-12 ss:flex">
                        <div className="aspect-[264/374]">
                            <Card className="aspect-[264/374] relative block group -mt-36 w-52 flex-shrink-0">
                                <Image
                                    src={data[0].cover.url ?? ""}
                                    alt={data[0].name ?? ""}
                                    fill
                                    priority
                                    className="object-cover rounded-lg" />
                            </Card>
                            <div className="flex flex-col space-y-6 justify-start p-6">
                                {user &&
                                    <>
                                        <AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />
                                        <AddGameToFavList userGameList={fullUser?.favGameList!} gameId={params.gameid} />
                                    </>
                                }
                            </div>
                        </div>

                        <div className="ml-6 md:ml-12 space-y-3">
                            <h1 className="text-2xl font-bold">{data[0].name ?? ""}</h1>
                            {date && companies &&
                                <h1>released on{' '}
                                    <span className="font-semibold">{date}</span> by{' '}
                                    <span className="font-semibold">{companies}</span>
                                </h1>
                            }
                            <h1 className="pt-3">{data[0].summary ?? ""}</h1>

                            <div className="pt-6">

                                <h1 className="mb-2">Genres</h1>
                                {data[0].genres && data[0].genres.length === 0 &&
                                    <div className="flex flex-wrap gap-2">
                                        {data[0].genres.map((genre, i) => {
                                            return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{genre.name}</Button>
                                        })}
                                    </div>
                                }
                            </div>
                            <div className="pt-6">
                                <h1 className="mb-2">Platforms</h1>
                                {data[0].platforms && data[0].platforms.length === 0 &&
                                    <div className="flex flex-wrap gap-2">
                                        {data[0].platforms.map((platform, i) => {
                                            return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{platform.name}</Button>
                                        })}
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </Card >
            }

            sideContent={
                <Card className="p-6 grid items-start gap-2 bg-secondary">
                    <h1>Screenshots</h1>
                    <div className="grid grid-cols-1 gap-4">
                        {data[0].screenshots.slice(1, 4).map((screenshot, i) => {
                            return (
                                <Card key={i} className="aspect-[264/374] relative block">
                                    <Image
                                        src={screenshot.url}
                                        alt={data[0]?.name ?? ""}
                                        fill
                                        priority
                                        className="object-cover rounded-lg" />
                                </Card>
                            )
                        })}
                    </div>
                </Card>
            }
        />
    )
}