"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Separator } from "@/components/ui/separator"
import { formatNumber } from "@/lib/formatters"
import { getProgress } from "@/lib/hypixel/general"
import { getSkywarsLevel, getSkywarsXpForLevel } from "@/lib/hypixel/skyWarsLevel"
import { NonNullStats } from "@/lib/schema/player"
import { ChevronDown, ChevronUp } from "lucide-react"
import { useEffect, useRef, useState } from "react"
import CollapsedStats from "../../_components/CollapsedStats"
import { SkywarsLevel, SkywarsProgress } from "./components"
import SkyWarsGeneralStats from "./stats"
import SkywarsStatTable from "./table"

export default function SkyWarsStats({ stats }: { stats: NonNullStats["SkyWars"] }) {
    const ref = useRef<HTMLDivElement>(null)
    const [opened, setOpened] = useState(false)

    useEffect(() => {
        if (!ref.current) return

        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === "attributes" && mutation.attributeName === "data-state") {
                    const dataState = ref.current?.getAttribute("data-state")
                    setOpened(dataState === "open")
                }
            })
        })

        observer.observe(ref.current, {
            attributes: true,
            attributeFilter: ["data-state"]
        })

        return () => observer.disconnect()
    }, [])

    if (!stats) return null

    const level = getSkywarsLevel(stats.skywars_experience)
    const kd = (stats.kills / stats.deaths).toFixed(2)
    const wl = (stats.wins / stats.losses).toFixed(2)

    const percent = getProgress(
        getSkywarsXpForLevel(Math.floor(level)),
        stats.skywars_experience,
        getSkywarsXpForLevel(Math.floor(level) + 1)
    )

    return (
        <Card>
            <CardContent>
                <Collapsible ref={ref}>
                    <div className="flex justify-between">
                        <h1 className="text-xl font-bold">SkyWars</h1>
                        <div className="flex gap-4">
                            <CollapsedStats
                                stats={[
                                    {
                                        title: <p>Level</p>,
                                        stat: <SkywarsLevel xp={stats.skywars_experience} icon={stats.selected_prestige_icon} />
                                    },
                                    {
                                        title: <p>KD</p>,
                                        stat: <p className="text-muted-foreground">{kd}</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>
                        <CollapsibleTrigger className="transition-all">
                            {opened === false ? <ChevronDown /> : <ChevronUp />}
                        </CollapsibleTrigger>
                    </div>
                    <CollapsibleContent>
                        <Separator className="my-4" />
                        <SkywarsProgress level={Math.floor(level)} percent={percent} />
                        <SkyWarsGeneralStats statsChecked={stats} level={level} />
                        <Separator className="my-4" />
                        <SkywarsStatTable stats={stats} />
                        <Separator className="my-4" />
                    </CollapsibleContent>
                </Collapsible>
            </CardContent>
        </Card>
    )
}