import { formatNumber } from "@/lib/formatters"
import { getSkywarsLevel } from "@/lib/hypixel/skywars/level"
import { getPrestige, getSkyWarsIcon } from "@/lib/hypixel/skywars/skywars"
import { cn } from "@/lib/utils"
import GenericProgress from "../../_components/GenericProgress"
import { HeadsBar, PresigeousHeads } from "./client"

type SkywarsHeadsProps = {
    heads: number
    heads_special: {
        eww: number
        yucky: number
        meh: number
        decent: number
        salty: number
        tasty: number
        succulent: number
        sweet: number
        divine: number
        heavenly: number
    }
    prestigeous: { username: string, timestamp: number, sacrifice: string }[]
}

export function SkywarsHeads({
    heads,
    heads_special,
    prestigeous
}: SkywarsHeadsProps) {
    const total_special = Object.values(heads_special).reduce((a, b) => a + b)
    const percentages = {
        heavenly: heads_special.heavenly,
        divine: heads_special.divine,
        sweet: heads_special.sweet,
        succulent: heads_special.succulent,
        tasty: heads_special.tasty,
        salty: heads_special.salty,
        decent: heads_special.decent,
        meh: heads_special.meh,
        yucky: heads_special.yucky,
        eww: heads_special.eww,
        rest: (heads - total_special)
    }

    const headsArray = Object.entries(percentages)

    return (
        <div>
            <p>
                <span className="font-bold">{"Total Heads Gathered: "}</span>
                <span className="text-mc-gray">{formatNumber(heads)}</span>
            </p>
            {total_special > 0 ? <HeadsBar heads={headsArray} heads_total={heads} /> : <p>This person has no heads collected.</p>}
            <p className="font-bold">Prestigious Head Collection</p>
            {prestigeous.length > 0 ? <PresigeousHeads heads={prestigeous} /> : <p>No prestigeous heads. Now what a skill issue.</p>}
        </div>
    )
}

export function AngelOfDeath(
    { shards, lifetime_shards, opals, lifetime_opals }: { shards: number, lifetime_shards: number, opals: number, lifetime_opals: number }
) {
    return (
        <div className="grid grid-cols-2 grid-rows-2">
            <p>
                <span className="font-bold">{"Shards: "}</span>
                <span className="text-mc-aqua">{shards}</span>
            </p>
            <p>
                <span className="font-bold">{"Opals: "}</span>
                <span className="text-mc-blue">{opals}</span>
            </p>
            <p>
                <span className="font-bold">{"Lifetime Shards: "}</span>
                <span className="text-mc-aqua">{formatNumber(lifetime_shards)}</span>
            </p>
            <p>
                <span className="font-bold">{"Lifetime Opals: "}</span>
                <span className="text-mc-blue">{lifetime_opals}</span>
            </p>
        </div>
    )
}

export function ShardProgress({ percent, shards }: { percent: number, shards: number }) {
    return (
        <div>
            <h1 className="font-bold">Shard Progress</h1>
            <div className="flex">
                <GenericProgress percent={percent} className="bg-mc-aqua" tooltipId="shards-progress" tooltipContent={`${shards}/20000 Shards`} />
            </div>
        </div>
    )
}

export function SkywarsLevel({ xp, icon }: { xp: number, icon: string | undefined }) {
    const level = getSkywarsLevel(xp)
    const pres = getPrestige(Math.floor(level))
    const swIcon = getSkyWarsIcon(icon)
    const val = `${Math.floor(level)}${swIcon}`

    // if (level > 150) {
    //     return (
    //         <p className="font-bold">
    //             <span className={`text-mc-${pres.leftBracket}`}>[</span>
    //             <span
    //                 style={{
    //                     backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
    //                     WebkitBackgroundClip: "text",
    //                     color: "transparent"
    //                 }}
    //             >
    //                 {`${val}`}
    //             </span>
    //             <span className={`text-mc-${pres.rightBracket}`}>]</span>
    //         </p>
    //     )
    // }
    //
    // if (level === 50) {
    //     <p>
    //         <span className={`text-mc-${pres.brackets}`}>[</span>
    //         <span
    //             style={{
    //                 backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
    //                 WebkitBackgroundClip: "text",
    //                 color: "transparent"
    //             }}
    //         >
    //             {`${val}`}
    //         </span>
    //         <span className={`text-mc-${pres.brackets}`}>]</span>
    //     </p>
    // }

    function MapSkywarsPrestigeColors() {
        if (typeof pres.colormap_2 === "string") {
            return <span className={`text-mc-${pres.colormap_2}`}>{val}</span>
        }

        return (
            <>
                {val.split("").map((c, i) => {
                    if (level.toString().length === 2) {
                        return <span className={`text-mc-${pres.colormap_2}`} key={i}>{c}</span>
                    } else {
                    }
                })}
            </>
        )
    }

    return (
        <p>
            <span className={`text-mc-${pres.leftBracket}`}>[</span>
            <MapSkywarsPrestigeColors />
            <span className={`text-mc-${pres.rightBracket}`}>]</span>
        </p>
    )
}

export function SkywarsProgress({ level, percent, currentXp, ceilingXp }: { level: number, percent: number, currentXp: number, ceilingXp: number }) {
    return (
        <div className="flex items-center mb-10">
            <LevelNumber level={level} className="mr-2" />
            <Progress
                level={level}
                percent={percent}
                tooltipId="skywars-progress"
                tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
            />
            <LevelNumber level={level + 1} className="ml-2" />
        </div>
    )
}

function LevelNumber({ level, className }: { level: number, className?: string }) {
    if (level > 150 || level === 50) {
        return (
            <div
                className={cn(level > 150 ? "font-bold" : undefined, className)}
                style={{
                    backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
                    WebkitBackgroundClip: "text",
                    color: "transparent"
                }}
            >
                {level}
            </div>
        )
    }

    return <div className={cn(`text-mc-${getPrestige(level).leftBracket}`, className)}>{level}</div>
}

function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
    if (level > 150 || level === 50) {
        return <GenericProgress percent={percent} rainbow={true} tooltipId={tooltipId} tooltipContent={tooltipContent} />
    }

    return (
        <GenericProgress
            percent={percent}
            className={`bg-mc-${getPrestige(level).leftBracket}`}
            tooltipId={tooltipId}
            tooltipContent={tooltipContent}
        />
    )
}

export function SkywarsPrestige({ level, icon }: { level: number, icon?: string }) {
    const swIcon = getSkyWarsIcon(icon)
    const pres = getPrestige(level)
    const val = `${pres} ${swIcon}`

    // if (level > 150 || level === 50) {
    //     return (
    //         <span
    //             style={{
    //                 backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
    //                 WebkitBackgroundClip: "text",
    //                 color: "transparent"
    //             }}
    //             className={level > 150 ? "font-bold" : undefined}
    //         >
    //             {val}
    //         </span>
    //     )
    // }

    return (
        <span className={`text-mc-${pres.leftBracket}`}>
            {val}
        </span>
    )
}