import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

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

    // Apply theme font globally
    font.family: theme.fontFamily || Qt.application.font.family
    font.pointSize: theme.fontSize > 0 ? theme.fontSize : Qt.application.font.pointSize

    // Apply theme palette to Qt Quick Controls
    palette.active.window: theme.windowColor
    palette.active.windowText: theme.windowTextColor
    palette.active.base: theme.baseColor
    palette.active.text: theme.textColor
    palette.active.button: theme.buttonColor
    palette.active.buttonText: theme.buttonTextColor
    palette.active.highlight: theme.highlightColor
    palette.active.highlightedText: theme.highlightedTextColor
    palette.active.mid: theme.midColor
    palette.active.dark: theme.darkColor
    palette.active.light: theme.lightColor
    palette.active.shadow: theme.shadowColor
    palette.active.link: theme.linkColor
    palette.active.toolTipBase: theme.tooltipBaseColor
    palette.active.toolTipText: theme.tooltipTextColor
    palette.active.placeholderText: theme.placeholderTextColor
    palette.active.alternateBase: theme.alternateBaseColor
    palette.inactive.window: theme.windowColor
    palette.inactive.windowText: theme.windowTextColor
    palette.inactive.base: theme.baseColor
    palette.inactive.text: theme.textColor
    palette.inactive.button: theme.buttonColor
    palette.inactive.buttonText: theme.buttonTextColor
    palette.inactive.highlight: theme.highlightColor
    palette.inactive.highlightedText: theme.highlightedTextColor
    palette.inactive.mid: theme.midColor
    palette.inactive.dark: theme.darkColor
    palette.inactive.light: theme.lightColor
    palette.inactive.shadow: theme.shadowColor
    palette.inactive.link: theme.linkColor
    palette.inactive.toolTipBase: theme.tooltipBaseColor
    palette.inactive.toolTipText: theme.tooltipTextColor
    palette.inactive.placeholderText: theme.placeholderTextColor
    palette.inactive.alternateBase: theme.alternateBaseColor
    palette.disabled.window: theme.windowColor
    palette.disabled.windowText: theme.midColor
    palette.disabled.base: theme.baseColor
    palette.disabled.text: theme.midColor
    palette.disabled.button: theme.buttonColor
    palette.disabled.buttonText: theme.midColor
    palette.disabled.highlight: theme.highlightColor
    palette.disabled.highlightedText: theme.highlightedTextColor
    palette.disabled.mid: theme.midColor
    palette.disabled.dark: theme.darkColor
    palette.disabled.light: theme.lightColor
    palette.disabled.shadow: theme.shadowColor

    color: theme.windowColor

    // 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() }
    }

    // Settings dialog
    SettingsDialog {
        id: settingsDialog
    }

    header: ToolBar {
        background: Rectangle { color: theme.buttonColor }
        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 12
            anchors.rightMargin: 12
            Label {
                text: "orkmode"
                color: theme.buttonTextColor
                font.pixelSize: 16
                font.bold: true
            }
            Item { Layout.fillWidth: true }
            Label {
                text: orkClient.connected
                      ? "● " + orkClient.address
                      : "○ disconnected"
                color: orkClient.connected ? theme.doneColor : theme.deadlineColor
                font.pixelSize: 12
            }
            ToolButton {
                text: "⟳"
                onClicked: { docModel.reload(); root.refreshDocs() }
                ToolTip.text: qsTr("Reload")
                ToolTip.visible: hovered
            }
            ToolButton {
                text: "⚙"
                onClicked: settingsDialog.open()
                ToolTip.text: qsTr("Settings")
                ToolTip.visible: hovered
            }
        }
    }

    RowLayout {
        anchors.fill: parent
        spacing: 0

        // Document sidebar.
        Rectangle {
            Layout.preferredWidth: 220
            Layout.fillHeight: true
            color: theme.baseColor

            ColumnLayout {
                anchors.fill: parent
                spacing: 0

                Label {
                    text: qsTr("Documents")
                    color: theme.placeholderTextColor
                    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 ? theme.highlightColor : "transparent"
                            opacity: highlighted ? 0.3 : 1.0
                        }
                        contentItem: ColumnLayout {
                            spacing: 1
                            Label {
                                text: modelData.title
                                color: theme.textColor
                                font.pixelSize: 13
                                elide: Text.ElideRight
                                Layout.fillWidth: true
                            }
                            Label {
                                text: modelData.name
                                color: theme.placeholderTextColor
                                font.pixelSize: 10
                                elide: Text.ElideRight
                                Layout.fillWidth: true
                            }
                        }
                    }
                }
            }
        }

        Rectangle { Layout.preferredWidth: 1; Layout.fillHeight: true; color: theme.darkColor }

        // 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: theme.placeholderTextColor
                font.pixelSize: 14
            }
        }
    }
}