import QtQuick
import "../services" as S

Column {
    id: root

    required property int percent
    required property real usedGb
    required property real totalGb
    required property real availGb
    required property real cachedGb
    required property real buffersGb
    required property var processes
    required property color accentColor

    property bool active: true

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

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

        Item {
            id: memBar
            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: S.Theme.base02
                radius: 3
            }

            // Cached (base0D, behind used)
            Rectangle {
                width: parent.width * Math.min(1, (root.usedGb + root.cachedGb) / Math.max(root.totalGb, 0.001))
                height: parent.height
                color: S.Theme.base0D
                opacity: 0.4
                radius: 3
                Behavior on width {
                    enabled: root.active
                    NumberAnimation {
                        duration: 200
                    }
                }
            }

            // Used (accentColor, on top)
            Rectangle {
                width: parent.width * Math.min(1, root.usedGb / Math.max(root.totalGb, 0.001))
                height: parent.height
                color: root.accentColor
                radius: 3
                Behavior on width {
                    enabled: root.active
                    NumberAnimation {
                        duration: 200
                    }
                }
            }
        }
    }

    // Memory history sparkline
    SparklineCanvas {
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.right: parent.right
        anchors.rightMargin: 12
        height: 18
        history: S.SystemStats.memHistory
        color: root.accentColor
        active: root.active
        backgroundTint: 0.15
    }

    // Breakdown rows
    InfoRow {
        label: "Used"
        value: root._fmt(root.usedGb)
    }
    InfoRow {
        label: "Cached"
        value: root._fmt(root.cachedGb)
    }
    InfoRow {
        label: "Available"
        value: root._fmt(root.availGb)
    }
    InfoRow {
        label: "Total"
        value: root._fmt(root.totalGb)
    }

    Separator {}

    Item {
        width: root.width
        height: 18

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

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "MEM"
            color: S.Theme.base03
            font.pixelSize: S.Theme.fontSize - 3
            font.family: S.Theme.fontFamily
            font.letterSpacing: 1
        }
    }

    // Top processes by memory
    Repeater {
        model: root.processes

        delegate: Item {
            required property var modelData
            width: root.width
            height: 20

            Text {
                anchors.left: parent.left
                anchors.leftMargin: 12
                anchors.verticalCenter: parent.verticalCenter
                text: modelData.cmd
                color: S.Theme.base05
                font.pixelSize: S.Theme.fontSize - 2
                font.family: S.Theme.fontFamily
                elide: Text.ElideRight
                width: parent.width - 80
            }

            Text {
                anchors.right: parent.right
                anchors.rightMargin: 12
                anchors.verticalCenter: parent.verticalCenter
                text: modelData.mem.toFixed(1) + "%"
                color: S.Theme.base04
                font.pixelSize: S.Theme.fontSize - 2
                font.family: S.Theme.fontFamily
                width: 36
                horizontalAlignment: Text.AlignRight
            }
        }
    }

    Item {
        width: 1
        height: 4
    }
}