// Named themes are the first layer of Appearance: shipped profiles stay
// immutable, while saved profiles can be selected or removed in place.

import QtQuick
import qs.config
import qs.services

Column {
    id: root

    width: parent ? parent.width : 620
    spacing: 0

    Repeater {
        model: ThemeProfiles.profiles

        SettingRow {
            id: profileRow

            required property var modelData

            label: profileRow.modelData.name
            detail: (profileRow.modelData.scheme === "light" ? "Light" : "Dark")
                + " · " + profileRow.modelData.accent + " → " + profileRow.modelData.secondary
            controlWidth: profileRow.modelData.shipped ? 88 : 170

            Row {
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                spacing: 6

                SettingsButton {
                    id: useButton
                    text: profileRow.modelData.id === ThemeProfiles.activeProfile.id ? "Selected" : "Use"
                    enabled: profileRow.modelData.id !== ThemeProfiles.activeProfile.id
                    activeFocusOnTab: enabled
                    border.width: activeFocus ? 2 : (tone === "accent" ? 0 : 1)
                    border.color: activeFocus ? Theme.accent : Theme.alpha(Theme.fg, 0.08)
                    onClicked: ThemeProfiles.selectProfile(profileRow.modelData.id)
                    Keys.onReturnPressed: if (enabled) ThemeProfiles.selectProfile(profileRow.modelData.id)
                    Keys.onSpacePressed: if (enabled) ThemeProfiles.selectProfile(profileRow.modelData.id)
                }

                SettingsButton {
                    id: deleteButton
                    visible: !profileRow.modelData.shipped
                    text: "Delete"
                    activeFocusOnTab: visible
                    border.width: activeFocus ? 2 : 1
                    border.color: activeFocus ? Theme.danger : Theme.alpha(Theme.fg, 0.08)
                    onClicked: ThemeProfiles.deleteProfile(profileRow.modelData.id)
                    Keys.onReturnPressed: ThemeProfiles.deleteProfile(profileRow.modelData.id)
                    Keys.onSpacePressed: ThemeProfiles.deleteProfile(profileRow.modelData.id)
                }
            }
        }
    }

    SettingRow {
        label: "Save current theme"
        detail: "Stores this scheme and accent pair under a unique name"
        divider: false
        controlWidth: 292

        Row {
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: 7

            Rectangle {
                width: 196
                height: 31
                radius: 8
                color: Theme.alpha(Theme.fg, 0.05)
                border.width: nameInput.activeFocus ? 2 : 1
                border.color: nameInput.activeFocus ? Theme.accent : Theme.alpha(Theme.fg, 0.12)

                TextInput {
                    id: nameInput
                    anchors.fill: parent
                    anchors.leftMargin: 10
                    anchors.rightMargin: 10
                    activeFocusOnTab: true
                    verticalAlignment: TextInput.AlignVCenter
                    maximumLength: 40
                    color: Theme.fg
                    selectionColor: Theme.alpha(Theme.accent, 0.35)
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    Accessible.name: "Theme profile name"

                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        visible: nameInput.text === "" && !nameInput.activeFocus
                        text: "Theme name"
                        color: Theme.fgMuted
                        font: nameInput.font
                    }

                    onAccepted: saveButton.save()
                }
            }

            SettingsButton {
                id: saveButton
                text: "Save"
                tone: "accent"
                activeFocusOnTab: true
                border.width: activeFocus ? 2 : 0
                border.color: activeFocus ? Theme.fg : "transparent"

                function save(): void {
                    if (ThemeProfiles.saveProfile(nameInput.text))
                        nameInput.text = "";
                }

                onClicked: save()
                Keys.onReturnPressed: save()
                Keys.onSpacePressed: save()
            }
        }
    }
}