// modules/PowerMenuWidget.qml  -  ⏻  button with inline popup menu.
// Matches waybar custom/power with menu-actions.
import QtQuick
import QtQuick.Layouts
import Quickshell.Io
import ".."

Pill {
    id: root
    onClicked: (m) => {
        if (m.button === Qt.LeftButton) menu.visible = !menu.visible
    }

    Text {
        text:  "⏻ "
        font { family: Theme.fontSans; pixelSize: Theme.fontSize }
        color: Theme.foreground
    }
    
    // Inline drop-up popup - appears above the bar
    Rectangle {
        id: menu
        visible:  false
        z:        100

        width:  130
        height: menuCol.implicitHeight + 16
        radius: 5
        color:  Qt.rgba(0.086, 0.075, 0.125, 0.85)
        border.color: Qt.rgba(1, 1, 1, 0.06)
        border.width: 1

        // Anchor above the pill
        parent:    root.parent   // reparent to bar so z-ordering works
        x:         root.x + root.width - width
        y:         root.y - height - 4

        ColumnLayout {
            id: menuCol
            anchors { fill: parent; margins: 8 }
            spacing: 2

            Repeater {
                model: [
                    { label: "Suspend",   cmd: ["systemctl", "suspend"] },
                    { label: "Hibernate", cmd: ["systemctl", "hibernate"] },
                    { label: "Logout",    cmd: ["hyprctl", "dispatch", "exit"] },
                    { label: "Reboot",    cmd: ["reboot"] },
                    { label: "Shutdown",  cmd: ["shutdown", "now"] },
                ]

                delegate: Rectangle {
                    required property var modelData
                    Layout.fillWidth: true
                    height: 26
                    radius: 5
                    color: itemHover.containsMouse
                           ? Theme.pillHover
                           : "transparent"
                    Behavior on color { ColorAnimation { duration: 100 } }

                    Text {
                        anchors { left: parent.left; verticalCenter: parent.verticalCenter; leftMargin: 8 }
                        text:  modelData.label
                        font { family: Theme.fontSans; pixelSize: Theme.fontSize }
                        color: Theme.foreground
                    }

                    MouseArea {
                        id: itemHover
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: {
                            menu.visible = false
                            Exec.run(modelData.cmd)
                        }
                    }
                }
            }
        }

    }
}