import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: root
    width: 1000
    height: 700
    visible: true
    title: qsTr("orkmode")

    // orkmode palette — muted, org-like.
    readonly property color bgColor: "#1e2127"
    readonly property color panelColor: "#252932"
    readonly property color textColor: "#d8dee9"
    readonly property color dimColor: "#7a8290"
    readonly property color accentColor: "#5e81ac"

    color: bgColor

    // Currently selected document name (namespace directory).
    property string currentDoc: ""

    function refreshDocs() {
        docList.model = orkClient.docs()
        if (docList.model.length > 0 && root.currentDoc === "")
            root.selectDoc(docList.model[0].name)
    }

    function selectDoc(name) {
        root.currentDoc = name
        docModel.document = name
    }

    Component.onCompleted: refreshDocs()

    Connections {
        target: orkClient
        function onConnectedChanged() { root.refreshDocs() }
    }

    header: ToolBar {
        background: Rectangle { color: root.panelColor }
        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 12
            anchors.rightMargin: 12
            Label {
                text: "orkmode"
                color: root.textColor
                font.pixelSize: 16
                font.bold: true
            }
            Item { Layout.fillWidth: true }
            Label {
                text: orkClient.connected
                      ? "● " + orkClient.address
                      : "○ disconnected"
                color: orkClient.connected ? "#a3be8c" : "#bf616a"
                font.pixelSize: 12
            }
            ToolButton {
                text: "⟳"
                onClicked: { docModel.reload(); root.refreshDocs() }
                ToolTip.text: qsTr("Reload")
                ToolTip.visible: hovered
            }
        }
    }

    RowLayout {
        anchors.fill: parent
        spacing: 0

        // Document sidebar.
        Rectangle {
            Layout.preferredWidth: 220
            Layout.fillHeight: true
            color: root.panelColor

            ColumnLayout {
                anchors.fill: parent
                spacing: 0

                Label {
                    text: qsTr("Documents")
                    color: root.dimColor
                    font.pixelSize: 11
                    font.bold: true
                    Layout.margins: 10
                }

                ListView {
                    id: docList
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    model: []
                    delegate: ItemDelegate {
                        required property var modelData
                        width: docList.width
                        highlighted: root.currentDoc === modelData.name
                        onClicked: root.selectDoc(modelData.name)
                        background: Rectangle {
                            color: highlighted ? root.accentColor : "transparent"
                            opacity: highlighted ? 0.3 : 1.0
                        }
                        contentItem: ColumnLayout {
                            spacing: 1
                            Label {
                                text: modelData.title
                                color: root.textColor
                                font.pixelSize: 13
                                elide: Text.ElideRight
                                Layout.fillWidth: true
                            }
                            Label {
                                text: modelData.name
                                color: root.dimColor
                                font.pixelSize: 10
                                elide: Text.ElideRight
                                Layout.fillWidth: true
                            }
                        }
                    }
                }
            }
        }

        Rectangle { Layout.preferredWidth: 1; Layout.fillHeight: true; color: "#11141a" }

        // Outline view.
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            OutlineView {
                anchors.fill: parent
                anchors.margins: 8
                model: docModel
            }

            Label {
                anchors.centerIn: parent
                visible: root.currentDoc === ""
                text: orkClient.connected
                      ? qsTr("Select a document")
                      : qsTr("Not connected: %1").arg(orkClient.error)
                color: root.dimColor
                font.pixelSize: 14
            }
        }
    }
}