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 { getScoreColor } from "@/lib/hypixel/copsandcrims/general"
import { devide } from "@/lib/hypixel/general"
import { NonNullStats } from "@/lib/schema/player"
import CollapsedStats from "../../_components/CollapsedStats"

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

    const kills = stats.kills + stats.kills_deathmatch + stats.kills_gungame
    const deaths = stats.deaths + stats.deaths_deathmatch + stats.deaths_gungame
    const wins = stats.game_wins + stats.game_wins_deathmatch + stats.game_wins_gungame
    const kd = formatNumber(devide(kills, deaths))
    const score = Math.floor(kills / 2 + (stats.bombs_planted + stats.bombs_defused) / 3 + wins + devide(kills, stats.shots_fired) * 200)
    const scoreColor = getScoreColor(score)

    return (
        <AccordionItem value="cops-and-crims">
            <Card className="py-0">
                <CardContent>
                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
                        <h1 className="text-xl font-bold">Cops And Crims</h1>
                        <div className="flex gap-4">
                            <CollapsedStats
                                stats={[
                                    {
                                        title: <p>Score</p>,
                                        stat: <p className={`text-mc-${scoreColor}`}>{formatNumber(score)}</p>
                                    },
                                    {
                                        title: <p>Kills</p>,
                                        stat: <p className="text-muted-foreground">{formatNumber(kills)}</p>
                                    },
                                    {
                                        title: <p>KD</p>,
                                        stat: <p className="text-muted-foreground">{kd}</p>
                                    },
                                    {
                                        title: <p>Wins</p>,
                                        stat: <p className="text-muted-foreground">{formatNumber(wins)}</p>
                                    }
                                ]}
                            />
                        </div>
                    </AccordionTrigger>
                    <AccordionContent>
                        <Separator className="my-4" />
                    </AccordionContent>
                </CardContent>
            </Card>
        </AccordionItem>
    )
}