import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "." as RaveUsersModule

Rectangle {
    id: root
    color: "#1a1b1d"

    readonly property color cCardBorder: "#34363a"
    readonly property color cInputBg: "#232427"
    readonly property color cInputBorder: "#44464b"
    readonly property color cAccentGreen: "#62a052"
    readonly property color cTextWhite: "#e8e8e6"
    readonly property color cTextMuted: "#b7b9bd"
    readonly property color cTextFaint: "#9a9ca1"
    readonly property color cErrorRed: "#d9a441"

    property bool showUserPassword: false
    property bool showRootPassword: false

    function updateLanguage() {
        RaveUsersModule.Translations.setLanguage(systemLocale)
    }

    Component.onCompleted: {
        RaveUsersModule.Translations.setLanguage(systemLocale)
    }

    component RegiJelolo: CheckBox {
        id: jelolo

        indicator: Rectangle {
            implicitWidth: 20
            implicitHeight: 20
            x: jelolo.leftPadding
            y: parent.height / 2 - height / 2
            color: jelolo.checked ? cAccentGreen : cInputBg
            border.color: jelolo.checked ? cAccentGreen : cInputBorder
            border.width: 1

            Canvas {
                anchors.fill: parent
                visible: jelolo.checked
                onVisibleChanged: if (visible) requestPaint()
                onPaint: {
                    var c = getContext("2d")
                    c.reset()
                    c.strokeStyle = "#1a1b1d"
                    c.lineWidth = 2.5
                    c.beginPath()
                    c.moveTo(5, 10)
                    c.lineTo(9, 14)
                    c.lineTo(15, 6)
                    c.stroke()
                }
            }
        }

        contentItem: Text {
            text: jelolo.text
            color: cTextWhite
            font.pixelSize: 14
            verticalAlignment: Text.AlignVCenter
            leftPadding: jelolo.indicator.width + 12
        }
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 40
        spacing: 0

        Flickable {
            id: gorgeto
            Layout.fillWidth: true
            Layout.fillHeight: true
            contentHeight: tartalom.implicitHeight + 20
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            ScrollBar.vertical: ScrollBar {}

            ColumnLayout {
                id: tartalom
                x: (gorgeto.width - width) / 2
                y: 10
                width: Math.min(gorgeto.width - 40, 540)
                spacing: 16

                Image {
                    source: "raveos-logo.png"
                    sourceSize.width: 96
                    sourceSize.height: 96
                    fillMode: Image.PreserveAspectFit
                    Layout.preferredWidth: 96
                    Layout.preferredHeight: 96
                    Layout.alignment: Qt.AlignHCenter
                }

                Text {
                    text: RaveUsersModule.Translations.title
                    font.pixelSize: 28
                    font.bold: true
                    color: cTextWhite
                    Layout.alignment: Qt.AlignHCenter
                }

                Text {
                    text: RaveUsersModule.Translations.description
                    font.pixelSize: 15
                    lineHeight: 1.45
                    color: cTextMuted
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignHCenter
                }

                Item { height: 6 }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Text {
                        text: RaveUsersModule.Translations.usernameLabel
                        color: cTextMuted
                        font.pixelSize: 14
                        font.weight: Font.Medium
                    }

                    TextField {
                        id: usernameField
                        Layout.fillWidth: true
                        implicitHeight: 52
                        leftPadding: 14
                        rightPadding: 14
                        text: backend.username
                        placeholderText: "raveuser"
                        color: cTextWhite
                        placeholderTextColor: cTextFaint
                        font.pixelSize: 15
                        background: Rectangle {
                            color: cInputBg
                            border.color: usernameField.activeFocus ? cAccentGreen : cInputBorder
                            border.width: usernameField.activeFocus ? 1.5 : 1
                        }
                        onTextEdited: backend.setUsername(text)
                    }

                    Text {
                        visible: backend.usernameStatus !== ""
                        text: backend.usernameStatus
                        color: cErrorRed
                        font.pixelSize: 12
                    }
                }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Text {
                        text: RaveUsersModule.Translations.hostnameLabel
                        color: cTextMuted
                        font.pixelSize: 14
                        font.weight: Font.Medium
                    }

                    TextField {
                        id: hostnameField
                        Layout.fillWidth: true
                        implicitHeight: 52
                        leftPadding: 14
                        rightPadding: 14
                        text: backend.hostname
                        placeholderText: "raveos-pc"
                        color: cTextWhite
                        placeholderTextColor: cTextFaint
                        font.pixelSize: 15
                        background: Rectangle {
                            color: cInputBg
                            border.color: hostnameField.activeFocus ? cAccentGreen : cInputBorder
                            border.width: hostnameField.activeFocus ? 1.5 : 1
                        }
                        onTextEdited: backend.setHostname(text)
                    }

                    Text {
                        visible: backend.hostnameStatus !== ""
                        text: backend.hostnameStatus
                        color: cErrorRed
                        font.pixelSize: 12
                    }
                }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Text {
                        text: RaveUsersModule.Translations.passwordLabel
                        color: cTextMuted
                        font.pixelSize: 14
                        font.weight: Font.Medium
                    }

                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 12

                        PasswordField {
                            Layout.fillWidth: true
                            reveal: showUserPassword
                            onRevealClicked: showUserPassword = !showUserPassword
                            placeholderText: RaveUsersModule.Translations.passwordPlaceholder
                            onTextEdited: backend.setPassword(text)
                        }

                        PasswordField {
                            Layout.fillWidth: true
                            reveal: showUserPassword
                            onRevealClicked: showUserPassword = !showUserPassword
                            placeholderText: RaveUsersModule.Translations.passwordConfirmLabel
                            onTextEdited: backend.setPasswordSecondary(text)
                        }
                    }

                    Text {
                        visible: backend.passwordStatus !== ""
                        text: backend.passwordStatus
                        color: cErrorRed
                        font.pixelSize: 12
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.topMargin: 2
                    Layout.bottomMargin: 2
                    height: 1
                    color: cCardBorder
                    opacity: 0.6
                }

                RegiJelolo {
                    Layout.fillWidth: true
                    text: RaveUsersModule.Translations.autoLoginLabel
                    checked: backend.autoLogin
                    onToggled: backend.setAutoLogin(checked)
                }

                RegiJelolo {
                    Layout.fillWidth: true
                    visible: backend.rootReuseVisible
                    text: RaveUsersModule.Translations.reuseRootLabel
                    checked: backend.reuseRootPassword
                    onToggled: backend.setReuseRootPassword(checked)
                }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6
                    visible: !backend.reuseRootPassword

                    Text {
                        text: RaveUsersModule.Translations.rootPasswordLabel
                        color: cTextMuted
                        font.pixelSize: 14
                        font.weight: Font.Medium
                        Layout.topMargin: 4
                    }

                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 12

                        PasswordField {
                            Layout.fillWidth: true
                            reveal: showRootPassword
                            onRevealClicked: showRootPassword = !showRootPassword
                            placeholderText: RaveUsersModule.Translations.rootPasswordPlaceholder
                            onTextEdited: backend.setRootPasswordText(text)
                        }

                        PasswordField {
                            Layout.fillWidth: true
                            reveal: showRootPassword
                            onRevealClicked: showRootPassword = !showRootPassword
                            placeholderText: RaveUsersModule.Translations.rootPasswordConfirmLabel
                            onTextEdited: backend.setRootPasswordSecondaryText(text)
                        }
                    }

                    Text {
                        visible: backend.rootPasswordStatus !== ""
                        text: backend.rootPasswordStatus
                        color: cErrorRed
                        font.pixelSize: 12
                    }
                }
            }
        }
    }
}