import Quickshell
import QtQuick
import "../components"

PanelWindow {
    id: root

    property var modelData
    screen: modelData

    anchors {
        top: true
        left: true
        right: true
    }
    implicitHeight: 40
    color: Theme.bg

    readonly property string screenName: modelData.name
    property string activePopup: ""

    readonly property int bw:  Theme.borderWidth     // 2
    readonly property int pad: Theme.enclosureMargin // 3

    // ── Bar bottom border ─────────────────────────────────────────────
    Rectangle {
        anchors { bottom: parent.bottom; left: parent.left; right: parent.right }
        height: root.bw
        color:  Theme.border
    }

    // ── Bar content ───────────────────────────────────────────────────
    Item {
        anchors {
            fill:         parent
            leftMargin:   8
            rightMargin:  8
            topMargin:    root.bw
            bottomMargin: root.bw
        }

        Workspaces {
            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
            screenName: root.screenName
        }

        MusicPlayer {
            id: musicChip
            anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
            onClicked: root.activePopup = root.activePopup === "controls" ? "" : "controls"
        }

        Row {
            id: rightRow
            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
            spacing: 8

            SysTray {
                anchors.verticalCenter: parent.verticalCenter
                barWindow: root
            }
            NetworkStatus {
                anchors.verticalCenter: parent.verticalCenter
            }
            VolumeControl {
                anchors.verticalCenter: parent.verticalCenter
                onClickedLeft: root.activePopup = root.activePopup === "mixer" ? "" : "mixer"
            }
            Clock {
                id: clockDisp
                anchors.verticalCenter: parent.verticalCenter
                onClicked: root.activePopup = root.activePopup === "calendar" ? "" : "calendar"
            }
        }
    }

    // ── Music controls popup ──────────────────────────────────────────
    PopoutWindow {
        popupName:   "controls"
        activePopup: root.activePopup

        anchor.window:   root
        anchor.rect.y:   root.implicitHeight - root.bw - Theme.radius
        anchor.rect.x:   Math.round((root.width - implicitWidth) / 2)

        implicitWidth:  Math.max(musicChip.implicitWidth + 2 * root.pad,
                                 ctrlContent.implicitWidth + 2 * root.bw)
        implicitHeight: ctrlContent.implicitHeight + root.bw + Theme.radius

        MusicPlayerControls {
            id: ctrlContent
            anchors { left: parent.left; right: parent.right }
            player: musicChip.player
        }
    }

    // ── Calendar popup ────────────────────────────────────────────────
    PopoutWindow {
        popupName:   "calendar"
        activePopup: root.activePopup

        anchor.window: root
        anchor.rect.y: root.implicitHeight - root.bw - Theme.radius
        readonly property real pw: Math.max(rightRow.width + 2 * root.pad,
                                            calContent.implicitWidth + 2 * root.bw)
        anchor.rect.x:  root.width - pw

        implicitWidth:  pw
        implicitHeight: calContent.implicitHeight + root.bw + Theme.radius

        CalendarContent {
            id: calContent
            anchors { left: parent.left; right: parent.right }
            now: clockDisp.now
        }
    }

    // ── Volume mixer popup ────────────────────────────────────────────
    PopoutWindow {
        popupName:   "mixer"
        activePopup: root.activePopup

        anchor.window: root
        anchor.rect.y: root.implicitHeight - root.bw - Theme.radius
        readonly property real pw: Math.max(rightRow.width + 2 * root.pad,
                                            mixContent.implicitWidth + 2 * root.bw)
        anchor.rect.x:  root.width - pw

        implicitWidth:  pw
        implicitHeight: mixContent.implicitHeight + root.bw + Theme.radius

        VolumeMixerContent {
            id: mixContent
            anchors { left: parent.left; right: parent.right }
        }
    }
}