import {animated, useSpring} from "@react-spring/web";
import {ReactElement, useMemo} from "react";
import {evaluateResourceBarStyles, ResourceBarColors, ResourceBarStyles} from "./ResourceBarGradient";
import {isDefined} from "../types/type_check";
import {SpringyValueInterpolatables, useSpringyValue} from "./SpringyValueHook";
import "./CharacterStatus.css";
import DefaultPortrait from "./default-portrait.svg";
import DefaultStatus from "./default-status.svg";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";
import {altTo as to} from "./FixedInterpolation";
import {
    Character,
    CharacterHealth,
    CharacterTurnState,
    healthToBounds,
    healthToFraction,
    hpToHealth, spTypeToDescription, turnStateToDescription,
    turnStateToTitle
} from "../model/Character";
import {StatusEffect} from "../model/GameState";

export function healthToColor(health: CharacterHealth | undefined): string {
    switch (health) {
        case CharacterHealth.Full:
            return "#cfc"
        case CharacterHealth.Healthy:
            return "#efe"
        case CharacterHealth.Crisis:
            return "#ffa"
        case CharacterHealth.Peril:
            return "#faa"
        case CharacterHealth.KO:
            return "#f66"
        case CharacterHealth.Wounded:
        default:
            return "#fff"
    }
}

const hpBarStyle: SpringyValueInterpolatables<ResourceBarStyles> = {
    foreground: 'linear-gradient(to bottom, rgb(255, 255, 255, 0.1) 0%, rgb(0, 0, 0, 0) 30% 50%, rgb(0, 0, 0, 0.1) 80%, rgb(0, 0, 0, 0.2) 95%, rgb(0, 0, 0, 0.3) 100%)',
    barDirection: "to right",
    barColors: ({flashValue}: {flashValue: number}): ResourceBarColors => {
        return {
            emptiedColor: `rgb(${Math.min(1, Math.max(flashValue, 0)) * 55 + 55}, 55, 55)`,
            toEmptyColor: 'rgb(200, 0, 0)',
            toFillColor: 'rgb(150, 250, 250)',
            filledColor: 'rgb(0, 200, 0)',
        }
    },
}

const mpBarStyle: SpringyValueInterpolatables<ResourceBarStyles> = {
    foreground: 'linear-gradient(to bottom, rgb(255, 255, 255, 0.1) 0%, rgb(0, 0, 0, 0) 30% 50%, rgb(0, 0, 0, 0.1) 80%, rgb(0, 0, 0, 0.2) 95%, rgb(0, 0, 0, 0.3) 100%)',
    barColors: ({flashValue}: {flashValue: number}): ResourceBarColors => {
        return {
            emptiedColor: `rgb(${Math.min(1, Math.max(flashValue, 0)) * 55 + 55}, 55, 55)`,
            toEmptyColor: 'rgb(250, 250, 60)',
            toFillColor: 'rgb(150, 250, 250)',
            filledColor: 'rgb(0, 150, 255)',
        }
    },
}

const ipBarStyle: SpringyValueInterpolatables<ResourceBarStyles> = {
    foreground: 'linear-gradient(to bottom, rgb(255, 255, 255, 0.1) 0%, rgb(0, 0, 0, 0) 30% 50%, rgb(0, 0, 0, 0.1) 80%, rgb(0, 0, 0, 0.2) 95%, rgb(0, 0, 0, 0.3) 100%)',
    barColors: ({flashValue}: {flashValue: number}): ResourceBarColors => {
        return {
            emptiedColor: `rgb(${Math.min(1, Math.max(flashValue, 0)) * 55 + 55}, 55, 55)`,
            toEmptyColor: 'rgb(160, 55, 195)',
            toFillColor: 'rgb(250, 250, 60)',
            filledColor: 'rgb(255, 150, 55)',
        }
    },
}

export function CharacterStatus({character, statuses, active}: {character: Character, statuses: readonly StatusEffect[], active: boolean}): ReactElement {
    const {name, altName, minion, level, health, koText} = character

    const {hp, maxHp} = character
    const effectiveMaxHp = maxHp ?? 100
    const effectiveHp = hp ?? (healthToFraction(health) * effectiveMaxHp)
    const {springs: [, , {v: hpRecentSpring}], flashSpring: {v: hpFlashSpring}, interpolate: hpInterpolate} = useSpringyValue({
        current: effectiveHp,
        max: effectiveMaxHp,
        starting: 0,
        flash: effectiveHp * 2 <= effectiveMaxHp && effectiveHp > 0,
    })
    const {hpText, hpTextStyleInterpolated, hpBarStyleInterpolated} = useMemo(() => {
        if ((isDefined(hp) && isDefined(maxHp)) || isDefined(health)) {
            return {
                hpText: isDefined(hp)
                    ? to([hpRecentSpring], recentValue => `${Math.round(recentValue)}`)
                    : "",
                hpBarStyleInterpolated: evaluateResourceBarStyles(hpBarStyle, hpInterpolate),
                hpTextStyleInterpolated: {
                    color: to([hpRecentSpring], recentValue => healthToColor(hpToHealth({hp: recentValue, maxHp})))
                }
            }
        } else {
            return {}
        }
    }, [hp, health, maxHp, hpRecentSpring, hpInterpolate])

    const {mp, maxMp} = character
    const {springs: [, , {v: mpRecentSpring}], interpolate: mpInterpolate} = useSpringyValue({
        current: mp,
        max: maxMp,
        starting: 0,
        flash: false,
    })
    const {mpText, mpBarStyleInterpolated} = useMemo(() => {
        if (isDefined(mp) && isDefined(maxMp) && maxMp > 0) {
            return {
                mpText: to([mpRecentSpring], (recentValue) => `${Math.round(recentValue)}`),
                mpBarStyleInterpolated: evaluateResourceBarStyles(mpBarStyle, mpInterpolate),
            }
        } else {
            return {}
        }
    }, [mp, maxMp, mpRecentSpring, mpInterpolate])

    const {ip, maxIp} = character
    const {springs: [, , {v: ipRecentSpring}], interpolate: ipInterpolate} = useSpringyValue({
        current: ip,
        max: maxIp,
        starting: 0,
        flash: false,
    })
    const {ipText, ipBarStyleInterpolated} = useMemo(() => {
        if (isDefined(ip) && isDefined(maxIp) && maxIp > 0) {
            return {
                ipText: to([ipRecentSpring], recentValue => `${Math.round(recentValue)}`),
                ipBarStyleInterpolated: evaluateResourceBarStyles(ipBarStyle, ipInterpolate),
            }
        } else {
            return {}
        }
    }, [ip, maxIp, ipRecentSpring, ipInterpolate])

    const {sp, spBank, spType} = character
    const {springs: [, , {v: spRecentSpring}]} = useSpringyValue({
        current: sp,
        starting: 0,
        flash: isDefined(spType) && isDefined(sp) && sp > 0,
    })
    const {spText} = useMemo(() => {
        if (isDefined(sp) && isDefined(spType)) {
            return {
                spText: to([spRecentSpring], (recentValue) => recentValue.toFixed(0))
            }
        } else {
            return {}
        }
    }, [sp, spType, spRecentSpring])

    const {bp, maxBp} = character
    const {springs: [, , {v: bpRecentSpring}]} = useSpringyValue({
        current: bp,
        starting: 0,
        flash: isDefined(bp) && bp > 0,
    })
    const {bpText} = useMemo(() => {
        if (isDefined(bp) && isDefined(maxBp)) {
            return {
                bpText: to([bpRecentSpring], (recentValue) => recentValue.toFixed(0))
            }
        } else {
            return {}
        }
    }, [bp, maxBp, bpRecentSpring])

    const {zp, maxZp} = character
    const {springs: [, , {v: zpRecentSpring}]} = useSpringyValue({
        current: zp,
        max: maxZp,
        starting: 0,
        flash: isDefined(maxZp) && isDefined(zp) && zp >= maxZp,
    })
    const {zpStyle} = useMemo(() => {
        if (isDefined(zp) && isDefined(maxZp)) {
            return {
                zpStyle: {
                    bottom: 0,
                    top: "auto",
                    height: to([zpRecentSpring],(recentValue) => {
                        return ((225/104) + (600 * ((recentValue / maxZp) ** 2) / 13) + (50 * (recentValue / maxZp))).toFixed(3) + "%"
                    })
                }
            }
        } else {
            return {}
        }
    }, [zp, maxZp, zpRecentSpring])
    const {turnsLeft, turnsTotal, canAct} = character
    const {turnsState, turnsText} = useMemo(() => {
        if (!isDefined(turnsTotal) || !isDefined(turnsLeft)) {
            return {
                turnsState: CharacterTurnState.None
            }
        } else if (active) {
            return {
                turnsState: CharacterTurnState.Active,
                turnsText: "🞂",
            }
        } else if (effectiveHp === 0) {
            return {
                turnsState: CharacterTurnState.Downed,
                turnsText: (isDefined(turnsTotal) && turnsLeft === 0) ? "✓" : "",
            }
        } else if (canAct === false || turnsTotal === 0) {
            return {
                turnsState: CharacterTurnState.CantAct,
            }
        } else if (turnsLeft === 0) {
            return {
                turnsState: CharacterTurnState.Done,
                turnsText: "✓"
            }
        } else if (turnsTotal > 1) {
            return {
                turnsState: CharacterTurnState.HighTurns,
                turnsText: `${turnsLeft}`
            }
        } else {
            return {
                turnsState: CharacterTurnState.Ready,
            }
        }
    }, [active, effectiveHp, canAct, turnsLeft, turnsTotal])

    const {portraitUrl} = character
    const effectivePortraitUrl = portraitUrl ?? DefaultPortrait
    const portraitFilterInterpolated = useMemo(() => {
        return to([hpRecentSpring], recentValue => {
            const filter = {
                color: 100,
                brightness: 100,
                showKOBar: false,
            }
            if (isDefined(effectiveMaxHp) && Math.round(recentValue) < 1 && effectiveMaxHp > 0) {
                filter.color *= 0.35
                filter.brightness *= 0.40
                filter.showKOBar = true
            } else if (canAct === false || turnsTotal === 0) {
                filter.color *= 1
                filter.brightness *= 0.40
            }
            return filter
        })
    }, [hpRecentSpring, effectiveMaxHp, turnsTotal, canAct])
    const {brightness: brightnessSpring, grayscale: grayscaleSpring} = useSpring({
        grayscale: to([portraitFilterInterpolated], ({color}) => 100 - color),
        brightness: to([portraitFilterInterpolated], ({brightness}) => brightness),
    })
    const {opacity: koOpacitySpring} = useSpring({
        opacity: to([portraitFilterInterpolated], ({showKOBar}) => showKOBar ? 100 : 0)
    })
    const characterKOBarStyleInterpolated = useMemo(() => {
        return {
            opacity: to([koOpacitySpring], (opacity: number) => `${opacity}%`)
        }
    }, [koOpacitySpring])
    const characterPortraitStyleInterpolated = useMemo(() => {
        return {
            backgroundImage: to([hpFlashSpring], (flashValue: number) => {
                return `radial-gradient(closest-side, rgb(75% 0% 0% / ${Math.round(100 * flashValue)}%), transparent), url("${effectivePortraitUrl}")`
            }),
            filter: to([brightnessSpring, grayscaleSpring],
                (brightness: number, grayscale: number) =>
                    `grayscale(${grayscale}%) brightness(${brightness}%)`)
        }
    }, [brightnessSpring, grayscaleSpring, hpFlashSpring, effectivePortraitUrl])

    const characterStatuses = character.statuses ?? []
    const effectiveStatuses = characterStatuses.map((statusInstance) => ({
        ...statuses.find(s => s.id === statusInstance.id) ?? {id: statusInstance.id, name: statusInstance.id, description: "Unrecognized status effect.", iconUrl: undefined}, count: statusInstance.count}))

    const hpTooltip = <Tooltip>
        <div className={"characterHelpHeader"}>
            <span className={"characterHelpName"}>{isDefined(maxHp) && isDefined(hp) ? "Health Points" : health}</span>
            <span className={"characterHelpValue"}>{isDefined(maxHp) && isDefined(hp) ? `${hp}/${maxHp}` : (healthToBounds(health))}</span></div>
        {<div className={"characterHelpDescription"}>
            {isDefined(hp)
                ? "Health Points, or HP. HP represent a character's determination and will. "
                +  "HP are lost when taking damage. When a character's HP reach 0, they are defeated."
                : "The enemy's condition, giving a rough estimate of its current HP."}
        </div>}
    </Tooltip>
    const mpTooltip = <Tooltip>
        <div className={"characterHelpHeader"}>
            <span className={"characterHelpName"}>Mind Points</span>
            {isDefined(maxMp) && isDefined(mp) && <span className={"characterHelpValue"}>{mp}/{maxMp}</span>}
        </div>
        <div className={"characterHelpDescription"}>
            Mind Points, or MP. MP represent a character's focus and energy. MP are spent to use all manner of abilities.
        </div>
    </Tooltip>
    const ipTooltip = <Tooltip>
        <div className={"characterHelpHeader"}>
            <span className={"characterHelpName"}>Inventory Points</span>
            {isDefined(maxIp) && isDefined(ip) && <span className={"characterHelpValue"}>{ip}/{maxIp}</span>}
        </div>
        <div className={"characterHelpDescription"}>
            Inventory Points, or IP. IP represent a character's stock of prepared items. IP are spent to use items.
        </div>
    </Tooltip>


    return <div className={"characterStatus" + (minion ? " minion" : "")}>
        <animated.div className={"characterPortrait"} style={characterPortraitStyleInterpolated} />
        {isDefined(maxZp) && isDefined(zp) && <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
            <Tooltip>
                <div className={"characterHelpHeader"}>
                    <span className={"characterHelpName"}>Zero Charge</span>
                    <span className={"characterHelpValue"}>{(100 * zp / maxZp).toFixed(0)}% - {zp}/{maxZp}</span></div>
                {<div className={"characterHelpDescription"}>
                    The amount of energy stored up towards unleashing the might of a Zero Power. When the gauge is full, let loose!
                </div>}
            </Tooltip>
        } placement={"right"}>
            <div className={"characterZeroGauge"}>
                <div className={"characterZeroBarBack"} />
                <animated.div className={"characterZeroBar"} style={zpStyle} />
                <div className={"characterZeroBarPulse" + (zp >= maxZp ? " active" : "")} />
            </div>
        </OverlayTrigger>}
        {isDefined(effectiveMaxHp) && effectiveHp < 1 && effectiveMaxHp > 0 && <animated.div className={"characterKOBar"} style={characterKOBarStyleInterpolated}>{koText ?? "KO"}</animated.div>}
        {isDefined(turnsState) &&
            <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                <Tooltip>
                    <div className={"characterHelpHeader"}>
                        <span className={"characterHelpName"}>{turnStateToTitle(turnsState)}</span>
                        {isDefined(turnsTotal) && isDefined(turnsLeft) && turnsTotal > 1 && <span className={"characterHelpValue"}>{turnsLeft}/{turnsTotal}</span>}</div>
                    {<div className={"characterHelpDescription"}>
                        {isDefined(turnsTotal) && isDefined(turnsLeft) &&
                            turnStateToDescription(turnsState)
                                .replaceAll("%c%", turnsLeft.toFixed(0))
                                .replaceAll("%m%", turnsTotal.toFixed(0))}
                    </div>}
                </Tooltip>
            } placement={"right"}>
                <div className={"characterTurns characterTurns" + turnsState}>{turnsText}</div>
            </OverlayTrigger>}
        <div className={"characterHeader"}>
            <div className="characterLevel">
                <span className="characterLevelLabel">Lv</span>
                <span className="characterLevelValue">{level ?? "??"}</span>
            </div>
            <div className={"characterName"}>{name ?? altName ?? "???"}</div>
        </div>
        {isDefined(hpText) &&
            <div className={"characterHp"}>
                <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={hpTooltip} placement={"top"}>
                    <animated.div className={"characterHpBar"} style={hpBarStyleInterpolated} />
                </OverlayTrigger>
                {isDefined(hp) && <animated.div
                    className={"characterHpValue"}
                    style={hpTextStyleInterpolated}>{hpText}</animated.div>}
            </div>}
        {isDefined(mpText) &&
            <div className={"characterMp"}>
                <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={mpTooltip} placement={"top"}>
                    <animated.div className={"characterMpBar"} style={mpBarStyleInterpolated} />
                </OverlayTrigger>
                <animated.div className={"characterMpValue"}>{mpText}</animated.div>
            </div>}
        {isDefined(ipText) &&
                <div className={"characterIp"}>
                    <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={ipTooltip} placement={"top"}>
                        <animated.div className={"characterIpBar"} style={ipBarStyleInterpolated} />
                    </OverlayTrigger>
                    <animated.div className={"characterIpValue"}>{ipText}</animated.div>
                </div>
}
        {isDefined(spText) &&
            <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                <Tooltip>
                    <div className={"characterHelpHeader"}>
                        <span className={"characterHelpName"}>{spType} Points</span>
                        <span className={"characterHelpValue"}>{sp}{typeof spBank === "number" ? ` / ${spBank} banked`: null}</span></div>
                    {isDefined(spType) && <div className={"characterHelpDescription"}>
                        {spTypeToDescription(spType)}
                    </div>}
                </Tooltip>
            } placement={"right"}>
                <animated.div className={"characterSp characterSp" + spType}>
                    <animated.span className={"characterSpValue characterSpValue" + spType}>
                        {spText}</animated.span>
                </animated.div>
            </OverlayTrigger>}
        {isDefined(bpText) &&
            <OverlayTrigger delay={{show: 750, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                <Tooltip>
                    <div className={"characterHelpHeader"}>
                        <span className={"characterHelpName"}>Blood Points</span>
                        <span className={"characterHelpValue"}>{bp}/{maxBp}</span></div>
                    {isDefined(spType) && <div className={"characterHelpDescription"}>
                        The current number of blood points, used for Vampire abilities.
                    </div>}
                </Tooltip>
            } placement={"right"}>
                <animated.div className={"characterBp"}>
                    <animated.span className={"characterBpValue"}>
                        {bpText}</animated.span>
                </animated.div>
            </OverlayTrigger>}
        {isDefined(effectiveStatuses) && effectiveStatuses.length > 0 &&
            <div className={"characterStatuses"}>
                {effectiveStatuses.map(({id, name, count, description, iconUrl}) =>
                    <OverlayTrigger key={id} delay={{show: 300, hide: 0}} trigger={["hover", "click", "focus"]} overlay={
                        <Tooltip>
                            <div className={"characterStatusHeader"}>
                                <span className={"characterStatusName"}>{name}</span>
                                {isDefined(count) && count > 0 && <span className={"characterStatusCount"}>{count}</span>}</div>
                            {isDefined(description) && <div className={"characterStatusDescription"}>
                                {count > 0 ? description.replaceAll("%c%", count.toFixed(0)) : description}
                            </div>}
                        </Tooltip>
                    } placement={"bottom"}>
                        <div className={"characterStatusIcon"} style={{backgroundImage: `url("${iconUrl ?? DefaultStatus}")`}}>{count > 0 && <span className={"characterStatusIconCountBadge"}>{count}</span>}</div>
                    </OverlayTrigger>
                )}
            </div>}
    </div>
}