import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: root

    property var settings
    property var theme
    property var availableModules: []
    implicitHeight: pageColumn.implicitHeight

    function moveModule(module, delta) {
        let modules = settings.barModules.slice();
        const index = modules.indexOf(module);
        const next = index + delta;
        if (index < 0 || next < 0 || next >= modules.length) return;
        const swap = modules[next];
        modules[next] = module;
        modules[index] = swap;
        settings.setBarModules(modules);
    }

    ColumnLayout {
        id: pageColumn
        width: parent.width
        spacing: 10

        SettingsCard {
            theme: root.theme
            title: "Bar modules"
            description: "Weather stays first; workspace buttons remain on the left."
            Layout.fillWidth: true

            Repeater {
                model: root.settings && Array.isArray(root.settings.barModules)
                       ? root.settings.barModules : root.availableModules
                delegate: SettingsRow {
                    required property string modelData
                    required property int index
                    theme: root.theme
                    label: modelData
                    description: index + 1 + " / " + (root.settings && Array.isArray(root.settings.barModules)
                                 ? root.settings.barModules.length : root.availableModules.length)
                    CCSwitch {
                        theme: root.theme
                        checked: root.settings.visibleBarModules().indexOf(modelData) >= 0
                        onToggled: root.settings.setModuleVisible(modelData, checked)
                    }
                    CCButton {
                        theme: root.theme
                        text: "↑"
                        enabled: index > 0
                        onClicked: root.moveModule(modelData, -1)
                    }
                    CCButton {
                        theme: root.theme
                        text: "↓"
                        enabled: index < (root.settings && Array.isArray(root.settings.barModules)
                                         ? root.settings.barModules.length : root.availableModules.length) - 1
                        onClicked: root.moveModule(modelData, 1)
                    }
                }
            }
        }

        SettingsCard {
            theme: root.theme
            title: "Indicator style"
            description: "Keep the bar compact and consistent with the cards."
            Layout.fillWidth: true
            SettingsRow {
                theme: root.theme
                label: "Card style"
                ComboBox {
                    palette.base: root.theme.surfaceVariant
                    palette.button: root.theme.surfaceVariant
                    palette.text: root.theme.text
                    palette.buttonText: root.theme.text
                    palette.highlight: root.theme.primary
                    model: ["Cards", "Indicators"]
                    currentIndex: root.settings.panelStyle === "indicators" ? 1 : 0
                    onActivated: root.settings.panelStyle = currentIndex === 1 ? "indicators" : "cards"
                }
            }
            SettingsRow {
                theme: root.theme
                label: "Notification badge"
                CCSwitch {
                    theme: root.theme
                    checked: root.settings.notificationBadge
                    onToggled: root.settings.notificationBadge = checked
                }
            }
        }
    }
}