import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { formatNumber } from "@/lib/formatters"
import { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwars/level"
import { getProgress } from "@/lib/hypixel/general"
import { NonNullStats } from "@/lib/schema/player"
import CollapsedStats from "../../_components/CollapsedStats"
import { BedwarsLevel, BedwarsProgress } from "./components"
import BedwarsGeneralStats from "./stats"
import BedwarsStatTable from "./table"

export default function BedwarsStats({ stats }: { stats: NonNullStats["Bedwars"] }) {
    if (!stats) return null

    const kd = formatNumber(stats.kills_bedwars / stats.deaths_bedwars)
    const fkd = formatNumber(stats.final_kills_bedwars / stats.final_deaths_bedwars)
    const wl = formatNumber(stats.wins_bedwars / stats.losses_bedwars)
    const bbl = formatNumber(stats.beds_broken_bedwars / stats.beds_lost_bedwars)
    const level = getBWLevelForExp(stats.Experience)

    const current = getTotalExpForLevel(level)
    const next = getTotalExpForLevel(level + 1)
    const percent = getProgress(current, stats.Experience, next)

    const xpProgress = stats.Experience - current
    const ceilingXp = next - current

    return (
        <AccordionItem value="bedwars">
            <Card className="py-0">
                <CardContent>
                    <AccordionTrigger className="items-center hover:no-underline hover:cursor-pointer">
                        <h1 className="text-xl font-bold">BedWars</h1>
                        <div className="flex gap-4">
                            <CollapsedStats
                                stats={[
                                    {
                                        title: <p>Level</p>,
                                        stat: <BedwarsLevel xp={stats.Experience} />
                                    },
                                    {
                                        title: <p>WS</p>,
                                        stat: <p className="text-muted-foreground">{stats.winstreak ?? "?"}</p>
                                    },
                                    {
                                        title: <p>KD</p>,
                                        stat: <p className="text-muted-foreground">{kd}</p>
                                    },
                                    {
                                        title: <p>FKD</p>,
                                        stat: <p className="text-muted-foreground">{fkd}</p>
                                    },
                                    {
                                        title: <p>WL</p>,
                                        stat: <p className="text-muted-foreground">{wl}</p>
                                    },
                                    {
                                        title: <p>BBL</p>,
                                        stat: <p className="text-muted-foreground">{bbl}</p>
                                    }
                                ]}
                            />
                        </div>
                    </AccordionTrigger>
                    <AccordionContent>
                        <Separator className="my-4" />
                        <BedwarsProgress level={level} percent={percent} currentXp={xpProgress} ceilingXp={ceilingXp} />
                        <BedwarsGeneralStats statsChecked={stats} level={level} percent={percent} bbl={bbl} kd={kd} fkd={fkd} wl={wl} />
                        <Separator className="my-4" />
                        <BedwarsStatTable stats={stats} />
                    </AccordionContent>
                </CardContent>
            </Card>
        </AccordionItem>
    )
}