import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import "../theme"
import ".."

Rectangle {
    id: root
    width: 240
    height: 110
    radius: Theme.radiusMedium
    color: Theme.menuDropdownBg
    border.color: Theme.menuDropdownBorder
    border.width: 1

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 12
        spacing: 8

        RowLayout {
            Layout.fillWidth: true
            Text {
                text: "Sound"
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeNormal
                font.weight: Font.DemiBold
                color: Theme.textPrimary
                Layout.fillWidth: true
            }
            Text {
                text: `${GlobalState.volume}%`
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                color: Theme.textSecondary
            }
        }

        // Custom Catalina Volume Slider
        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 24

            Rectangle {
                id: track
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                height: 6
                radius: 3
                color: Qt.rgba(1.0, 1.0, 1.0, 0.2)

                Rectangle {
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: track.width * (GlobalState.volume / 100.0)
                    radius: 3
                    color: Theme.accentBlue
                }
            }

            Rectangle {
                id: thumb
                x: Math.max(0, Math.min(track.width - width, (track.width * (GlobalState.volume / 100.0)) - width / 2))
                anchors.verticalCenter: parent.verticalCenter
                width: 16
                height: 16
                radius: 8
                color: "#FFFFFF"
                border.color: Qt.rgba(0, 0, 0, 0.2)
                border.width: 1
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                preventStealing: true

                function updateFromMouse(mouse) {
                    const frac = Math.max(0.0, Math.min(1.0, mouse.x / width));
                    GlobalState.setVolume(Math.round(frac * 100));
                }

                onPressed: (mouse) => updateFromMouse(mouse)
                onPositionChanged: (mouse) => {
                    if (pressed) updateFromMouse(mouse);
                }
            }
        }

        // Bottom Controls
        RowLayout {
            Layout.fillWidth: true
            spacing: 8

            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 24
                radius: Theme.radiusSmall
                color: muteMouse.containsMouse ? Qt.rgba(1.0, 1.0, 1.0, 0.15) : Qt.rgba(1.0, 1.0, 1.0, 0.08)

                Text {
                    anchors.centerIn: parent
                    text: GlobalState.volumeMuted ? "Unmute" : "Mute"
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    color: Theme.textPrimary
                }

                MouseArea {
                    id: muteMouse
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: GlobalState.toggleVolumeMute()
                }
            }

            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 24
                radius: Theme.radiusSmall
                color: prefMouse.containsMouse ? Qt.rgba(1.0, 1.0, 1.0, 0.15) : Qt.rgba(1.0, 1.0, 1.0, 0.08)

                Text {
                    anchors.centerIn: parent
                    text: "Sound Preferences..."
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    color: Theme.textPrimary
                }

                MouseArea {
                    id: prefMouse
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        GlobalState.volumePopupVisible = false;
                        GlobalState.launchApp("pavucontrol");
                    }
                }
            }
        }
    }
}