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 { getAllDivisions, getMostPlayed } from "@/lib/hypixel/duels/duels"
import { devide, romanize } from "@/lib/hypixel/general"
import { NonNullStats } from "@/lib/schema/player"
import CollapsedStats from "../../_components/CollapsedStats"
import DuelsGeneralStats from "./stats"
import DuelsStatsTable from "./table"

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

    const wl = formatNumber(devide(stats.wins, stats.losses))
    const kd = formatNumber(devide(stats.kills, stats.deaths))
    const div = getAllDivisions(stats)
    const mostPlayed = getMostPlayed(stats)

    return (
        <AccordionItem value="duels">
            <Card className="py-0">
                <CardContent>
                    <AccordionTrigger className="items-center py-2 hover:no-underline hover:cursor-pointer">
                        <h1 className="text-xl font-bold">Duels</h1>
                        <div className="flex gap-4">
                            <CollapsedStats
                                stats={[
                                    {
                                        title: <p>Division</p>,
                                        stat: (
                                            <p className="font-bold">
                                                {div !== null ?
                                                    (
                                                        <span className={`text-mc-${div.color}`}>
                                                            {`${div.name} ${romanize(div.level)}`}
                                                        </span>
                                                    ) :
                                                    <span className="text-muted-foreground">-</span>}
                                            </p>
                                        )
                                    },

                                    {
                                        title: <p>Wins</p>,
                                        stat: (
                                            <p className="font-bold">
                                                {mostPlayed !== null ?
                                                    (
                                                        <span>
                                                            {mostPlayed.name}
                                                        </span>
                                                    ) :
                                                    <span className="text-muted-foreground">-</span>}
                                            </p>
                                        )
                                    },
                                    {
                                        title: <p>Wins</p>,
                                        stat: <p className="text-muted-foreground">{formatNumber(stats.wins)}</p>
                                    },
                                    {
                                        title: <p>WL</p>,
                                        stat: <p className="text-muted-foreground">{wl}</p>
                                    }
                                ]}
                            />
                        </div>
                    </AccordionTrigger>
                    <AccordionContent>
                        <Separator className="my-4" />
                        <DuelsGeneralStats statsChecked={stats} div={div} kd={kd} wl={wl} />
                        <Separator className="my-4" />
                        <DuelsStatsTable stats={stats} />
                    </AccordionContent>
                </CardContent>
            </Card>
        </AccordionItem>
    )
}