// A dwm-style bar for att_wm.
//
// Run with:  quickshell -p /path/to/att_wm/quickshell
//
// Left click a tag to view it, right click to toggle it into the view,
// middle click to move the focused window there. The layout symbol cycles
// layouts on click, mirroring dwm's bar.

import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Io

ShellRoot {
    Variants {
        // One bar per monitor.
        model: Quickshell.screens

        PanelWindow {
            id: bar

            required property var modelData
            screen: modelData

            // att_wm reads layer-shell exclusive zones and lays windows out in
            // what is left, so the bar never overlaps a window.
            anchors {
                top: true
                left: true
                right: true
            }
            implicitHeight: 26
            exclusiveZone: 26
            color: "#1a1a1a"

            readonly property var output: AttWm.outputFor(modelData.name)

            RowLayout {
                anchors.fill: parent
                spacing: 0

                // ── Tags ────────────────────────────────────────────────
                Repeater {
                    model: AttWm.tagCount

                    Rectangle {
                        required property int index

                        readonly property bool active: AttWm.tagActive(bar.output, index)
                        readonly property bool occupied: AttWm.tagOccupied(bar.output, index)

                        Layout.fillHeight: true
                        implicitWidth: label.implicitWidth + 16
                        color: active ? "#5294e2" : "transparent"

                        Text {
                            id: label
                            anchors.centerIn: parent
                            text: AttWm.tagNames[parent.index] ?? (parent.index + 1)
                            color: parent.active ? "#1a1a1a" : (parent.occupied ? "#eeeeee" : "#666666")
                            font.family: "monospace"
                            font.pixelSize: 13
                            font.bold: parent.active
                        }

                        // dwm draws a small square in the corner of a tag that
                        // holds windows but is not currently shown.
                        Rectangle {
                            visible: parent.occupied && !parent.active
                            x: 3
                            y: 3
                            width: 4
                            height: 4
                            color: "#5294e2"
                        }

                        MouseArea {
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
                            onClicked: event => {
                                const tag = parent.index + 1;
                                if (event.button === Qt.LeftButton)
                                    AttWm.send(`view ${tag}`);
                                else if (event.button === Qt.RightButton)
                                    AttWm.send(`toggle-view ${tag}`);
                                else
                                    AttWm.send(`tag ${tag}`);
                            }
                        }
                    }
                }

                // ── Layout symbol ───────────────────────────────────────
                Rectangle {
                    Layout.fillHeight: true
                    implicitWidth: layoutLabel.implicitWidth + 16
                    color: "#242424"

                    Text {
                        id: layoutLabel
                        anchors.centerIn: parent
                        text: bar.output ? bar.output.layout_symbol : "[]="
                        color: "#bbbbbb"
                        font.family: "monospace"
                        font.pixelSize: 13
                    }

                    MouseArea {
                        anchors.fill: parent
                        acceptedButtons: Qt.LeftButton | Qt.RightButton
                        onClicked: event => AttWm.send(
                            event.button === Qt.LeftButton ? "cycle-layout next" : "cycle-layout prev")
                    }
                }

                // ── Focused window title ────────────────────────────────
                Text {
                    Layout.fillWidth: true
                    Layout.leftMargin: 10
                    elide: Text.ElideRight
                    text: AttWm.focusedTitle
                    color: "#dddddd"
                    font.pixelSize: 13
                    verticalAlignment: Text.AlignVCenter
                }

                // ── Tabs, for the tabbed layout ─────────────────────────
                //
                // att_wm draws its own solid-colour tab strip; this shows the
                // titles alongside it. Set `tabbar_height = 0` in config.zig to
                // rely on this instead.
                RowLayout {
                    Layout.fillHeight: true
                    spacing: 2
                    visible: bar.output && bar.output.layout === "tabbed"

                    Repeater {
                        model: bar.output
                            ? bar.output.windows.filter(w => w.visible && !w.floating)
                            : []

                        Rectangle {
                            required property var modelData

                            Layout.fillHeight: true
                            implicitWidth: Math.min(160, tabText.implicitWidth + 16)
                            color: modelData.focused ? "#5294e2" : "#2c2c2c"

                            Text {
                                id: tabText
                                anchors.centerIn: parent
                                width: parent.width - 12
                                elide: Text.ElideRight
                                horizontalAlignment: Text.AlignHCenter
                                text: modelData.title || modelData.app_id
                                color: parent.modelData.focused ? "#1a1a1a" : "#cccccc"
                                font.pixelSize: 12
                            }
                        }
                    }
                }

                // ── Connection indicator ────────────────────────────────
                Text {
                    Layout.rightMargin: 10
                    visible: !AttWm.connected
                    text: "att_wm ✕"
                    color: "#e06c75"
                    font.family: "monospace"
                    font.pixelSize: 12
                }
            }
        }
    }
}