import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { formatNumber } from "@/lib/formatters"
import { devide, romanize } from "@/lib/hypixel/general"
import { getTNTGameMode, getTNTModeStats } from "@/lib/hypixel/tnt-games/general"
import { NonNullStats } from "@/lib/schema/player"
import { GenericProgressNoTooltip } from "../../_components/generic-progress"
import { BasicStat } from "../../_components/stats"

export default function TNTGamesWizardsStats({ stats }: { stats: NonNullable<NonNullStats["TNTGames"]> }) {
    return (
        <div className="space-y-4">
            <h2 className="text-xl font-bold">TNT Wizards</h2>
            <div>
                <BasicStat title="Wins: " value={formatNumber(stats.wins_capture)} />
                <BasicStat title="Kills: " value={formatNumber(stats.kills_capture)} />
                <BasicStat title="Deaths: " value={formatNumber(stats.deaths_capture)} />
                <BasicStat title="Kill/Death Ratio: " value={formatNumber(devide(stats.kills_capture, stats.deaths_capture))} />
            </div>
            <Table>
                <TNTWizardsTableHeader />
                <TableBody>
                    <TableStats id="ancient" stats={stats} />
                    <TableStats id="blood" stats={stats} />
                    <TableStats id="fire" stats={stats} />
                    <TableStats id="hydro" stats={stats} />
                    <TableStats id="ice" stats={stats} />
                    <TableStats id="kinetic" stats={stats} />
                    <TableStats id="storm" stats={stats} />
                    <TableStats id="toxic" stats={stats} />
                    <TableStats id="wither" stats={stats} />
                </TableBody>
            </Table>
        </div>
    )
}

function TableStats({ id, stats }: { id: Parameters<typeof getTNTGameMode>[0], stats: NonNullable<NonNullStats["TNTGames"]> }) {
    const gm = getTNTGameMode(id)
    const modeStats = getTNTModeStats(id, stats)
    return (
        <TableRow>
            <TableCell className={`text-mc-${gm.color}`}>{gm.name}</TableCell>
            {modeStats.map((m, i) => {
                if (i === modeStats.length - 2) {
                    if (m === 0) {
                        return <TableCell key={i}>?</TableCell>
                    }
                    return (
                        <TableCell key={i}>
                            {
                                <GenericProgressNoTooltip
                                    text={romanize(m)}
                                    percent={m / 7 * 100}
                                    className={`bg-mc-${gm.color}`}
                                />
                            }
                        </TableCell>
                    )
                }
                if (i === modeStats.length - 1) {
                    if (m === 0) {
                        return <TableCell key={i}>?</TableCell>
                    }
                    return (
                        <TableCell key={i}>
                            {
                                <GenericProgressNoTooltip
                                    text={romanize(m)}
                                    percent={m / 7 * 100}
                                    className={`bg-mc-${gm.color}`}
                                />
                            }
                        </TableCell>
                    )
                }
                return <TableCell key={i}>{formatNumber(m)}</TableCell>
            })}
        </TableRow>
    )
}

function TNTWizardsTableHeader() {
    const headerElements = [
        "Wizard",
        "Kills",
        "Deaths",
        "Assists",
        "KD",
        "Power",
        "Regen"
    ]

    return (
        <TableHeader>
            <TableRow>
                {headerElements.map((v, i) => {
                    return <TableHead key={i} className="font-bold">{v}</TableHead>
                })}
            </TableRow>
        </TableHeader>
    )
}