import QtQuick
import qs.config

Item {
    Flickable {
        anchors.fill: parent
        clip: true
        contentWidth: width
        contentHeight: content.implicitHeight + 64
        boundsBehavior: Flickable.StopAtBounds

        Column {
            id: content
            width: parent.width - 68
            x: 34
            y: 30
            spacing: 16

            Text { text: "Appearance"; color: Theme.fg; font.family: Theme.fontFamily; font.pixelSize: 27; font.weight: Font.DemiBold }
            Text { text: "Tokyo Night Moon, tuned for clarity and quiet motion."; color: Theme.fgDim; font.family: Theme.fontFamily; font.pixelSize: Theme.fontSize; bottomPadding: 6 }

            SettingsCard {
                title: "Theme"
                subtitle: "Panama has one curated visual identity rather than a matrix of partially compatible themes."
                SettingRow { label: "Color palette"; detail: "Tokyo Night Moon"; value: "Prism" }
                SettingRow { label: "Interface type"; detail: "Adwaita Sans"; value: "System"; divider: false }
            }

            SettingsCard {
                title: "Clock"
                SettingRow {
                    label: "24-hour time"
                    detail: "Use 18:30 instead of 6:30 PM"
                    controlWidth: 48
                    SettingsToggle { anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter; checked: DesktopPreferences.get("use24Hour"); onToggled: value => DesktopPreferences.set("use24Hour", value) }
                }
                SettingRow {
                    label: "Show seconds"
                    detail: "Keep a precise clock in the center of the bar"
                    controlWidth: 48
                    SettingsToggle { anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter; checked: DesktopPreferences.get("showSeconds"); onToggled: value => DesktopPreferences.set("showSeconds", value) }
                }
                SettingRow {
                    label: "Show weekday"
                    detail: "Include the abbreviated weekday before the date"
                    divider: false
                    controlWidth: 48
                    SettingsToggle { anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter; checked: DesktopPreferences.get("showWeekday"); onToggled: value => DesktopPreferences.set("showWeekday", value) }
                }
            }

            SettingsCard {
                title: "System vitals"
                subtitle: "Choose what appears beside the workspace indicator."
                SettingRow { label: "Processor"; controlWidth: 48; SettingsToggle { anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter; checked: DesktopPreferences.get("showCpu"); onToggled: value => DesktopPreferences.set("showCpu", value) } }
                SettingRow { label: "Memory"; controlWidth: 48; SettingsToggle { anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter; checked: DesktopPreferences.get("showMemory"); onToggled: value => DesktopPreferences.set("showMemory", value) } }
                SettingRow { label: "Graphics"; divider: false; controlWidth: 48; SettingsToggle { anchors.right: parent.right; anchors.verticalCenter: parent.verticalCenter; checked: DesktopPreferences.get("showGpu"); onToggled: value => DesktopPreferences.set("showGpu", value) } }
            }
        }
    }
}