pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import Quickshell
import Quickshell.Io
import Quickshell.Services.Notifications
import Quickshell.Wayland
import "." as N

Scope {
    id: root

    // Synthetic service state, never a host service.
    property bool muted: false
    property real volume: 0.3
    property string query: ""
    property int writes: 0
    property int accepted: 0
    property int cancelled: 0
    property bool controlsEnabled: true
    property bool extraEnabled: true
    property int cardWrites: 0
    property int nestedWrites: 0
    property int iconWrites: 0
    property int disabledWrites: 0

    function rect(item: Item): var {
        const point = item.mapToItem(window.contentItem, 0, 0);
        return {
            x: point.x,
            y: point.y,
            width: item.width,
            height: item.height
        };
    }

    N.Theme {
        id: palette
        lowPowerMode: true
    }

    // A real notification daemon on the private bus handles screenshot notices.
    NotificationServer {}

    IpcHandler {
        target: "uiTest"

        function snapshot(): string {
            return JSON.stringify({
                width: window.width,
                height: window.height,
                muted: root.muted,
                checked: mute.checked,
                volume: root.volume,
                sliderValue: slider.displayedValue,
                queryMatchesInput: root.query === field.text,
                queryIsHeadphones: root.query === "headphones",
                queryIsEdited: root.query === "headphones test",
                writes: root.writes,
                accepted: root.accepted,
                cancelled: root.cancelled,
                enabled: mute.enabled,
                tooltipVisible: mute.tooltipVisible,
                buttonPressed: mute.pressed,
                buttonVisualFocus: mute.visualFocus,
                sliderPressed: slider.pressed,
                sliderPosition: slider.position,
                sliderThumb: root.rect(slider.handle),
                fieldHintVisible: field.hintVisible,
                extras: {
                    card: root.rect(actionCard),
                    nested: root.rect(nestedAction),
                    icon: root.rect(iconAction),
                    disabled: root.rect(disabledAction),
                    longButton: root.rect(longAction),
                    field: root.rect(iconField),
                    cardWrites: root.cardWrites,
                    nestedWrites: root.nestedWrites,
                    iconWrites: root.iconWrites,
                    disabledWrites: root.disabledWrites,
                    cardPressed: actionCard.pressed,
                    cardFocused: actionCard.controlFocused,
                    nestedFocused: nestedAction.controlFocused,
                    iconFocused: iconAction.controlFocused,
                    iconVisualFocus: iconAction.visualFocus,
                    iconTooltipVisible: iconAction.tooltipVisible,
                    longTooltipVisible: longAction.tooltipVisible,
                    fieldFocused: iconField.input.activeFocus,
                    fieldHintVisible: iconField.hintVisible,
                    fieldEdited: iconField.text === "padding",
                    iconName: iconAction.Accessible.name,
                    sliderName: slider.Accessible.name
                },
                focus: mute.activeFocus ? "mute" : slider.activeFocus ? "slider" : field.input.activeFocus ? "field" : "other",
                surface: root.rect(surface),
                mute: root.rect(mute),
                slider: root.rect(slider),
                field: root.rect(field)
            });
        }

        function enableExtras(enabled: bool): void {
            root.extraEnabled = enabled;
        }

        // Fixture events simulate external service changes, never user actions.
        function external(muted: bool, volume: real, enabled: bool): void {
            root.muted = muted;
            root.volume = volume;
            root.controlsEnabled = enabled;
        }
    }

    PanelWindow {
        id: window
        anchors {
            top: true
            left: true
            right: true
            bottom: true
        }
        exclusionMode: ExclusionMode.Ignore
        WlrLayershell.layer: WlrLayer.Overlay
        WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
        WlrLayershell.namespace: "nuguland-ui-test"
        color: palette.content.backdrop

        N.PopupSurface {
            id: surface
            theme: palette
            x: 32
            y: 32
            width: 540
            height: 300

            Column {
                spacing: 20

                N.NuguText {
                    theme: palette
                    variant: "title"
                    text: "shared controls: synthetic audio"
                }
                N.PopupButton {
                    id: mute
                    theme: palette
                    text: root.muted ? "unmute" : "mute"
                    checked: root.muted
                    enabled: root.controlsEnabled
                    width: 180
                    focus: true
                    onClicked: {
                        root.muted = !root.muted;
                        root.writes++;
                    }
                }
                N.PopupSlider {
                    id: slider
                    theme: palette
                    width: 360
                    accessibleName: "output volume"
                    value: root.volume
                    enabled: root.controlsEnabled
                    onMoved: value => {
                        root.volume = value;
                        root.writes++;
                    }
                }
                N.PopupTextField {
                    id: field
                    theme: palette
                    width: 360
                    placeholderText: "filter devices"
                    onEdited: text => root.query = text
                    onAccepted: root.accepted++
                    onCancelled: root.cancelled++
                }
                N.NuguText {
                    theme: palette
                    text: `${root.muted ? "muted" : "audible"} · ${Math.round(root.volume * 100)}% · ${root.query || "all devices"}`
                }
            }
        }

        // Separate geometry leaves the original control driver coordinates intact.
        N.PopupSurface {
            theme: palette
            x: 600
            y: 32
            width: 440
            height: 500

            Column {
                width: parent.width
                spacing: 16

                N.NuguText {
                    theme: palette
                    variant: "title"
                    text: "activation, focus and long content"
                }
                N.PopupCard {
                    id: actionCard

                    theme: palette
                    width: parent.width
                    height: 64
                    interactive: true
                    enabled: root.extraEnabled
                    active: true
                    accessibleName: "select headphones"
                    onClicked: root.cardWrites++

                    N.NuguText {
                        theme: palette
                        anchors.left: parent.left
                        anchors.right: nestedAction.left
                        anchors.rightMargin: 12
                        anchors.verticalCenter: parent.verticalCenter
                        text: "selected headphones"
                    }
                    N.PopupButton {
                        id: nestedAction

                        theme: palette
                        anchors.right: parent.right
                        anchors.verticalCenter: parent.verticalCenter
                        text: "options"
                        role: "ghost"
                        onClicked: root.nestedWrites++
                    }
                }
                Row {
                    spacing: 12

                    N.PopupButton {
                        id: iconAction

                        theme: palette
                        width: 34
                        icon: ""
                        text: "refresh devices"
                        showText: false
                        role: "ghost"
                        enabled: root.extraEnabled
                        onClicked: root.iconWrites++
                    }
                    N.PopupButton {
                        id: disabledAction

                        theme: palette
                        text: "unavailable"
                        tooltip: "no device supports this action"
                        enabled: false
                        onClicked: root.disabledWrites++
                    }
                }
                N.PopupButton {
                    id: longAction

                    theme: palette
                    width: 180
                    icon: ""
                    text: "find a device with a very long descriptive name that must remain inside the button"
                    tooltip: "find a device by its full name; this useful explanation wraps instead of leaving the popup or hiding nearby actions"
                }
                N.PopupTextField {
                    id: iconField

                    theme: palette
                    width: parent.width
                    icon: ""
                    placeholderText: "filter devices by name"
                    enabled: root.extraEnabled
                }
                N.PopupBadge {
                    theme: palette
                    width: 180
                    icon: "!"
                    role: "warning"
                    text: "a long device status remains bounded"
                }
                N.PopupSection {
                    theme: palette
                    width: parent.width
                    title: "a long section title stays inside its available geometry"
                    detail: "a long secondary detail"
                }
            }
        }
    }
}