import QtQuick
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Layouts
import ISC

// ── BOX 4: Utility Buttons ─────────────────────────────────
Rectangle {
    id: utilFooter
    Layout.fillWidth: true
    Layout.preferredHeight: Theme.sideFooterUtility
    radius: Theme.sidePanelRadius
    border.color: Theme.sideBorder
    border.width: 1
    color: Theme.sidePanelBackground

    property var settingsPopup: null
    property var aboutDialog: null

    RowLayout {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 4

        Button {
            id: aboutBtn
            flat: true
            Layout.fillWidth: true
            Layout.fillHeight: true
            icon.source: "../icons/about.svg"
            onClicked: if (aboutDialog) aboutDialog.open()

            background: Rectangle {
                radius: 8
                color: aboutBtn.hovered
                    ? Theme.sideActiveBackground : "transparent"
            }

            contentItem: Item {
                Row {
                    spacing: 6
                    anchors.centerIn: parent

                    IconImage {
                        anchors.verticalCenter: parent.verticalCenter
                        width: 16
                        height: 16
                        source: "../icons/about.svg"
                        sourceSize.width: 16
                        sourceSize.height: 16
                        color: Theme.headingColor
                        opacity: 0.75
                    }

                    Label {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "ABOUT"
                        color: Theme.headingColor
                        font.family: Theme.uiFontFamily
                        font.pixelSize: Theme.fontXs
                        font.bold: true
                        font.letterSpacing: 1.2
                        opacity: 0.8
                    }
                }
            }
        }

        Rectangle {
            width: 1
            height: 24
            color: Theme.sideBorder
        }

        Button {
            id: settingsBtn
            flat: true
            Layout.fillWidth: true
            Layout.fillHeight: true
            icon.source: "../icons/settings.svg"
            onClicked: if (settingsPopup) settingsPopup.open()

            background: Rectangle {
                radius: 8
                color: settingsBtn.hovered
                    ? Theme.sideActiveBackground : "transparent"
            }

            contentItem: Item {
                Row {
                    spacing: 6
                    anchors.centerIn: parent

                    IconImage {
                        anchors.verticalCenter: parent.verticalCenter
                        width: 16
                        height: 16
                        source: "../icons/settings.svg"
                        sourceSize.width: 16
                        sourceSize.height: 16
                        color: Theme.headingColor
                        opacity: 0.75
                    }

                    Label {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "SETTINGS"
                        color: Theme.headingColor
                        font.family: Theme.uiFontFamily
                        font.pixelSize: Theme.fontXs
                        font.bold: true
                        font.letterSpacing: 1.2
                        opacity: 0.8
                    }
                }
            }
        }
    }
}