import QtQuick
import "../services" as S
import NovaStats as NS

Column {
    id: root

    required property color accentColor

    property bool active: true

    function _fmt(gb) {
        return gb >= 10 ? gb.toFixed(1) + "G" : gb.toFixed(2) + "G";
    }

    // Header - vendor + usage%
    Item {
        width: parent.width
        height: 28

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: S.SystemStats.gpuVendor.toUpperCase()
            color: NS.ThemeService.base03
            font.pixelSize: NS.ThemeService.fontSize - 3
            font.family: NS.ThemeService.fontFamily
            font.letterSpacing: 1
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: S.SystemStats.gpuUsage + "%"
            color: S.ThemeUtil.loadColor(S.SystemStats.gpuUsage)
            font.pixelSize: NS.ThemeService.fontSize
            font.family: NS.ThemeService.fontFamily
            font.bold: true
        }
    }

    // Usage bar
    Item {
        width: parent.width
        height: 14

        Item {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            height: 6

            Rectangle {
                anchors.fill: parent
                color: NS.ThemeService.base02
                radius: 3
            }

            Rectangle {
                width: parent.width * Math.min(1, S.SystemStats.gpuUsage / 100)
                height: parent.height
                color: S.ThemeUtil.loadColor(S.SystemStats.gpuUsage)
                radius: 3
                Behavior on width {
                    enabled: root.active
                    NumberAnimation {
                        duration: 200
                        easing.type: Easing.OutCubic
                    }
                }
            }
        }
    }

    // Usage history sparkline
    SparklineCanvas {
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.right: parent.right
        anchors.rightMargin: 12
        height: 32
        history: S.SystemStats.gpuHistory
        strokeColor: root.accentColor
        colorAt: v => S.ThemeUtil.loadColor(v)
        active: root.active
    }

    // VRAM section
    Separator {}

    Item {
        width: parent.width
        height: 22

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "VRAM"
            color: NS.ThemeService.base03
            font.pixelSize: NS.ThemeService.fontSize - 3
            font.family: NS.ThemeService.fontFamily
            font.letterSpacing: 1
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: root._fmt(S.SystemStats.gpuVramUsedGb) + " / " + root._fmt(S.SystemStats.gpuVramTotalGb)
            color: root.accentColor
            font.pixelSize: NS.ThemeService.fontSize - 1
            font.family: NS.ThemeService.fontFamily
            font.bold: true
        }
    }

    Item {
        width: parent.width
        height: 12

        Item {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            height: 5

            Rectangle {
                anchors.fill: parent
                color: NS.ThemeService.base02
                radius: 2
            }

            Rectangle {
                width: S.SystemStats.gpuVramTotalGb > 0 ? parent.width * Math.min(1, S.SystemStats.gpuVramUsedGb / S.SystemStats.gpuVramTotalGb) : 0
                height: parent.height
                color: root.accentColor
                radius: 2
                Behavior on width {
                    enabled: root.active
                    NumberAnimation {
                        duration: 200
                        easing.type: Easing.OutCubic
                    }
                }
            }
        }
    }

    // Temperature row
    InfoRow {
        visible: S.SystemStats.gpuTempC > 0
        height: 22
        label: "Temp"
        value: S.SystemStats.gpuTempC + "\u00B0C"
        valueColor: S.SystemStats.gpuTempC > NS.ModulesService.gpuHot ? NS.ThemeService.base08 : S.SystemStats.gpuTempC > NS.ModulesService.gpuWarm ? NS.ThemeService.base0A : NS.ThemeService.base05
    }

    Item {
        width: 1
        height: 4
    }
}