import QtQuick
import QtQuick.Layouts

// ── SysInfoRow ────────────────────────────────────────────────────────────────
// Metric row with icon badge, label, right-aligned value, and an optional
// animated progress bar underneath.
Item {
    id: root

    property string icon:       ""
    property string label:      ""
    property string value:      "—"
    property color  iconColor:  "#ffffffff"
    property color  dimColor:   "#997a8996"
    property color  textColor:  "#ffe8eef2"
    property bool   showBar:    false
    property int    barPct:     0          // 0-100
    property color  barColor:   iconColor
    property color  trackColor: "#15ffffff"

    implicitHeight: col.implicitHeight
    implicitWidth:  col.implicitWidth

    ColumnLayout {
        id: col
        anchors { left: parent.left; right: parent.right }
        spacing: 5

        // ── Label row ─────────────────────────────────────────────────────────
        RowLayout {
            Layout.fillWidth: true
            spacing: 10

            // Icon in a tinted pill badge
            Rectangle {
                width: 18; height: 18
                radius: 4
                color: Qt.alpha(root.iconColor, 0.15)
                Layout.alignment: Qt.AlignVCenter

                Text {
                    anchors.centerIn: parent
                    text:           root.icon
                    color:          root.iconColor
                    font.pixelSize: 12
                }
            }

            Text {
                text:           root.label
                color:          root.dimColor
                font.pixelSize: 12
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignVCenter
            }

            Text {
                text:           root.value
                color:          root.textColor
                font.pixelSize: 12
                font.weight:    Font.Medium
                Layout.alignment: Qt.AlignVCenter
            }
        }

        // ── Progress bar (optional) ───────────────────────────────────────────
        Rectangle {
            visible:         root.showBar
            Layout.fillWidth: true
            height: 3
            radius: 2
            color:  root.trackColor

            Rectangle {
                width:  parent.width * Math.max(0, Math.min(root.barPct, 100)) / 100
                height: parent.height
                radius: parent.radius
                color:  root.barColor

                // smooth fill transitions on data refresh
                Behavior on width {
                    NumberAnimation { duration: 800; easing.type: Easing.OutCubic }
                }
                Behavior on color {
                    ColorAnimation { duration: 300 }
                }
            }
        }
    }
}