hypixel-stats/src/app/(stats)/player/[ign]/_components/Sidebar.tsx

import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { getColor } from "@/lib/colors"
import { formatDate, formatNumber } from "@/lib/formatters"
import { getCoinMultiplier, getTotalChallenges, getTotalCoins, getTotalQuests, rewardClaimed } from "@/lib/hypixel/general/stats"
import { getGuildMember, getGuildRankTag, getMemberGEXP, getMemberWeeklyGEXP } from "@/lib/hypixel/guild/guild"
import { Guild } from "@/lib/schema/guild"
import { Player } from "@/lib/schema/player"
import Link from "next/link"
import SocialIcons from "./SocialIcons"

type SidebarProps = {
    level: number
    ign: string
    player: Player["player"]
    guild: Guild["guild"] | undefined
    rank: string | undefined
    specialRank: string | undefined
    eulaCoins: boolean | undefined
}

export default function Sidebar({ level, ign, player, guild, rank, specialRank, eulaCoins }: SidebarProps) {
    const levelMultiplier = getCoinMultiplier(level, rank, specialRank, eulaCoins)

    const levelMultiplierVal = levelMultiplier.value
    const levelMultiplierText = levelMultiplier.level === true ? `(Level ${level.toFixed(1).split(".")[0]})` : `(${levelMultiplier.name})`

    function General() {
        return (
            <div className="flex justify-between px-8">
                <div className="text-center">
                    <p>Hypixel level</p>
                    <p>{level.toFixed(2)}</p>
                </div>
                <div className="text-center">
                    <p>Karma</p>
                    <p className="text-mc-light-purple">{formatNumber(player.karma)}</p>
                </div>
            </div>
        )
    }

    function Coins() {
        return (
            <div>
                <p>
                    <span className="font-bold">{"Coin multiplier: "}</span>
                    <span>{`x${levelMultiplierVal} ${levelMultiplierText}`}</span>
                </p>
                <p>
                    <span className="font-bold">{"Total coins: "}</span>
                    <span className="text-mc-gold">
                        {formatNumber(getTotalCoins(player.stats as Record<string, Record<"coins", number | undefined>>))}
                    </span>
                </p>
            </div>
        )
    }

    function Other() {
        return (
            <div>
                <p>
                    <span>
                        <Link href={`/achievements/${ign}`} className="font-bold underline">
                            Achievement Points
                        </Link>
                    </span>
                    <span className="font-bold">{": "}</span>
                    <span>{formatNumber(player.achievementPoints ?? 0)}</span>
                </p>
                <p>
                    <span>
                        <Link href={`/quests/${ign}`} className="font-bold underline">
                            Quests Completed
                        </Link>
                    </span>
                    <span className="font-bold">{": "}</span>
                    <span>{formatNumber(getTotalQuests(player.quests))}</span>
                </p>
                <p>
                    <span className="font-bold">{"Challenges Completed: "}</span>
                    <span>{formatNumber(getTotalChallenges(player.challenges))}</span>
                </p>
            </div>
        )
    }

    function DailyRewards() {
        return (
            <div>
                <p>
                    <span className="font-bold">{"Today's Reward: "}</span>
                    <span
                        className={`${rewardClaimed(player.lastClaimedReward) === true ? "font-bold text-mc-green" : undefined}`}
                    >
                        {rewardClaimed(player.lastClaimedReward) ? "Claimed" : "Unclaimed"}
                    </span>
                </p>
                <p>
                    <span className="font-bold">{"Rewards Claimed: "}</span>
                    <span>{player.totalRewards}</span>
                </p>
                <p>
                    <span className="font-bold">{"Reward Streak: "}</span>
                    <span>{player.rewardStreak}</span>
                </p>
                <p>
                    <span className="font-bold">{"Top Reward Streak: "}</span>
                    <span>{player.rewardHighScore}</span>
                </p>
            </div>
        )
    }

    function Gifting() {
        return (
            <div>
                <p>
                    <span className="font-bold">{"Gifts Given: "}</span>
                    <span>{player.giftingMeta?.giftsGiven ?? 0}</span>
                </p>
                <p>
                    <span className="font-bold">{"Ranks Given: "}</span>
                    <span>{player.giftingMeta?.ranksGiven ?? 0}</span>
                </p>
            </div>
        )
    }

    function Logins() {
        return (
            <div>
                <p>
                    <span className="font-bold">{"First Login: "}</span>
                    <span>{formatDate(player.firstLogin ?? 0)}</span>
                </p>
                <p>
                    <span className="font-bold">{"Last Login: "}</span>
                    <span>{formatDate(player.lastLogin ?? 0)}</span>
                </p>
            </div>
        )
    }

    function SoicalLinks() {
        return (
            <div className="flex flex-col gap-2">
                <h1 className="text-xl font-bold underline">Social Links</h1>
                <div className="flex gap-2">
                    <SocialIcons
                        discord={player?.socialMedia?.links?.DISCORD}
                        twitch={player?.socialMedia?.links?.TWITCH}
                        youtube={player?.socialMedia?.links?.YOUTUBE}
                        twitter={player?.socialMedia?.links?.TWITCH}
                        hypixel={player?.socialMedia?.links?.HYPIXEL}
                    />
                </div>
            </div>
        )
    }

    return (
        <Card className="w-1/4">
            <CardContent>
                <General />
                <Separator className="my-4" />
                <Coins />
                <Separator className="my-4" />
                <Other />
                <Separator className="my-4" />
                <DailyRewards />
                <Separator className="my-4" />
                <Gifting />
                <Separator className="my-4" />
                <Logins />
                <Separator className="my-4" />
                {guild && (
                    <>
                        <div className="flex flex-col gap-8">
                            <div>
                                <Link href={`/guild/${ign}`}>
                                    <h1 className="text-xl font-bold underline">Guild</h1>
                                </Link>
                                <p>
                                    <span className="font-bold">{"Name: "}</span>
                                    <span className={getColor(guild.tagColor, "text", "gray")}>{guild.name}</span>
                                </p>
                                <p>
                                    <span className="font-bold">{"Members: "}</span>
                                    <span>{guild.members.length}</span>
                                </p>
                            </div>
                            <div>
                                <p>
                                    <span className="font-bold">{"Rank: "}</span>
                                    <span>{`${getGuildMember(guild, player.uuid)?.rank} `}</span>
                                    <span className={getColor(guild.tagColor, "text", "gray")}>
                                        {getGuildRankTag(guild, player.uuid)}
                                    </span>
                                </p>
                                <p>
                                    <span className="font-bold">{"Daily GEXP: "}</span>
                                    <span>{formatNumber(getMemberGEXP(guild, player.uuid, 0) ?? 0)}</span>
                                </p>
                                <p>
                                    <span className="font-bold">{"Weekly GEXP: "}</span>
                                    <span>{formatNumber(getMemberWeeklyGEXP(guild, player.uuid) ?? 0)}</span>
                                </p>
                                <p>
                                    <span className="font-bold">{"Joined: "}</span>
                                    <span>{formatDate(getGuildMember(guild, player.uuid)?.joined ?? 0)}</span>
                                </p>
                            </div>
                        </div>
                        <Separator className="my-4" />
                    </>
                )}
                <SoicalLinks />
            </CardContent>
        </Card>
    )
}