import QtQuick
import QtQuick.Layouts
import Quickshell
import "../config"

// One bar instance per monitor.
PanelWindow {
    id: panel
    required property var modelData
    screen: modelData

    color: "transparent"

    // Auto-rotation flips the output transform and resizes this layer surface
    // in place; the old buffer bleeds through the area that isn't fully
    // repainted, leaving stale "garbage" pixels. Remapping the surface on any
    // geometry change forces Sway to hand us a fresh, fully-painted buffer.
    readonly property string geomKey: modelData
        ? (modelData.width + "x" + modelData.height)
        : ""
    onGeomKeyChanged: Qt.callLater(function () {
        if (!panel.visible) return;
        panel.visible = false;
        panel.visible = true;
    })

    anchors {
        top: true
        left: true
        right: true
    }

    // Wrap onto two rows when a single row can't hold everything (portrait
    // outputs). Needed width is computed from implicit sizes, which don't
    // depend on which row anything sits in, so this can't bind-loop.
    readonly property real neededWidth:
        (Theme.gap + 2) * 2                 // outer margins
        + workspaces.implicitWidth
        + Theme.gap * 4                     // breathing room between clusters
        + metricsRow.implicitWidth
        + Theme.gap
        + endRow.implicitWidth
    readonly property bool twoRows: width > 0 && neededWidth > width

    implicitHeight: twoRows ? Theme.barHeight * 2 : Theme.barHeight

    // background strip
    Rectangle {
        anchors.fill: parent
        color: Theme.barColor
    }

    // row 1 left: workspaces
    Workspaces {
        id: workspaces
        anchors.left: parent.left
        anchors.leftMargin: Theme.gap + 2
        y: (Theme.barHeight - height) / 2
        screen: panel.modelData
    }

    // row 1 right: clock, tray
    RowLayout {
        id: endRow
        anchors.right: parent.right
        anchors.rightMargin: Theme.gap + 2
        y: (Theme.barHeight - height) / 2
        spacing: Theme.gap

        Clock {}
        Tray { panelWindow: panel }
    }

    // metrics: left of the clock in one-row mode, own second row when narrow
    RowLayout {
        id: metricsRow
        anchors.right: panel.twoRows ? parent.right : endRow.left
        anchors.rightMargin: panel.twoRows ? Theme.gap + 2 : Theme.gap
        y: panel.twoRows
            ? Theme.barHeight + (Theme.barHeight - height) / 2
            : (Theme.barHeight - height) / 2
        spacing: Theme.gap

        Battery {}
        CpuGraph {}
        CpuTemp {}
        Ram {}
        Disk {}
        Network {}
        Volume {}
    }
}