import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: root

    property var settings
    property var theme
    implicitHeight: pageColumn.implicitHeight

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

        SettingsCard {
            theme: root.theme
            title: "Panel"
            description: "The right-side full-height slide-out panel."
            Layout.fillWidth: true
            SettingsRow {
                theme: root.theme
                label: "Width"
                SpinBox {
                    palette.base: root.theme.surfaceVariant
                    palette.text: root.theme.text
                    palette.button: root.theme.surfaceVariant
                    palette.buttonText: root.theme.text
                    from: 360
                    to: 720
                    value: root.settings.panelWidth
                    editable: true
                    onValueModified: root.settings.panelWidth = value
                }
            }
            SettingsRow {
                theme: root.theme
                label: "Corner radius"
                SpinBox {
                    palette.base: root.theme.surfaceVariant
                    palette.text: root.theme.text
                    palette.button: root.theme.surfaceVariant
                    palette.buttonText: root.theme.text
                    from: 8
                    to: 40
                    value: root.settings.panelRadius
                    editable: true
                    onValueModified: root.settings.panelRadius = value
                }
            }
            SettingsRow {
                theme: root.theme
                label: "Opacity"
                CCSlider {
                    theme: root.theme
                    implicitWidth: 130
                    from: 0.75
                    to: 1.0
                    value: root.settings.panelOpacity
                    onMoved: root.settings.panelOpacity = value
                }
                Label {
                    text: Math.round(root.settings.panelOpacity * 100) + "%"
                    color: root.theme.text
                }
            }
            SettingsRow {
                theme: root.theme
                label: "Open from corner"
                description: "A small top-right hot corner."
                CCSwitch {
                    theme: root.theme
                    checked: root.settings.panelOpenOnCorner
                    onToggled: root.settings.panelOpenOnCorner = checked
                }
            }
        }

        SettingsCard {
            theme: root.theme
            title: "Motion"
            description: "Content appears after the slide completes."
            Layout.fillWidth: true
            Label {
                text: "The panel keeps its existing open/close animation and overlay dismissal."
                color: root.theme.mutedText
                wrapMode: Text.Wrap
                Layout.fillWidth: true
            }
        }
    }
}