import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
import "../components"

Item {
    id: page

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 8
        spacing: 12

        BackHeader { title: "Обводка отклика"; onBack: page.StackView.view.pop() }

        Text {
            Layout.fillWidth: true
            text: "Цвет и ширина свечения вокруг кнопки при успехе (ОК) и ошибке."
            color: settingsContainer.darkMode ? "#cccccc" : "#444444"
            font.pixelSize: 12
            wrapMode: Text.Wrap
        }

        // OK color
        RowLayout {
            Layout.fillWidth: true
            Text { text: "Цвет «ОК»:"; color: settingsContainer.darkMode ? "white" : "black"; Layout.preferredWidth: 150 }
            TextField {
                id: okColor
                Layout.fillWidth: true
                text: settingsContainer.feedbackOkColor
                onEditingFinished: btnController.setFeedbackColors(text, errorColor.text)
            }
            Rectangle {
                width: 28; height: 28; radius: 14
                color: okColor.text || "#00cc44"
                border.color: "#80ffffff"; border.width: 1
            }
        }

        LabeledSlider {
            label: "Ширина «ОК»"
            from: 0; to: 30; stepSize: 1
            value: settingsContainer.feedbackOkWidth
            onMoved: btnController.setFeedbackWidths(value, settingsContainer.feedbackErrorWidth)
        }

        // Error color
        RowLayout {
            Layout.fillWidth: true
            Text { text: "Цвет «Ошибка»:"; color: settingsContainer.darkMode ? "white" : "black"; Layout.preferredWidth: 150 }
            TextField {
                id: errorColor
                Layout.fillWidth: true
                text: settingsContainer.feedbackErrorColor
                onEditingFinished: btnController.setFeedbackColors(okColor.text, text)
            }
            Rectangle {
                width: 28; height: 28; radius: 14
                color: errorColor.text || "#cc2200"
                border.color: "#80ffffff"; border.width: 1
            }
        }

        LabeledSlider {
            label: "Ширина «Ошибка»"
            from: 0; to: 30; stepSize: 1
            value: settingsContainer.feedbackErrorWidth
            onMoved: btnController.setFeedbackWidths(settingsContainer.feedbackOkWidth, value)
        }

        LabeledSlider {
            label: "Радиус свечения"
            from: 0; to: 60; stepSize: 1
            value: settingsContainer.feedbackGlowRadius
            onMoved: btnController.setFeedbackGlowRadius(value)
        }

        // Preview
        RowLayout {
            Layout.fillWidth: true
            Layout.topMargin: 8
            spacing: 32
            Item { Layout.fillWidth: true }
            Repeater {
                model: [
                    { c: settingsContainer.feedbackOkColor, w: settingsContainer.feedbackOkWidth, t: "ОК" },
                    { c: settingsContainer.feedbackErrorColor, w: settingsContainer.feedbackErrorWidth, t: "Ошибка" }
                ]
                delegate: Rectangle {
                    width: 84; height: 84; radius: 42
                    color: "#7b007b"
                    border.color: modelData.c
                    border.width: modelData.w
                    Text {
                        anchors.centerIn: parent
                        text: modelData.t
                        color: "white"
                        font.bold: true
                    }
                    layer.enabled: settingsContainer.feedbackGlowRadius > 0
                    layer.effect: Glow {
                        radius: settingsContainer.feedbackGlowRadius
                        samples: 24
                        color: modelData.c
                        transparentBorder: true
                    }
                }
            }
            Item { Layout.fillWidth: true }
        }

        Item { Layout.fillHeight: true }
    }
}