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

Rectangle {
    id: root
    color: "#2B2B2B"
    radius: 14

    readonly property color cCardBg: "#20232a"
    readonly property color cCardBorder: "#333947"
    readonly property color cInputBg: "#303030"
    readonly property color cInputBorder: "#303030"
    readonly property color cAccentGreen: "#3d7839"
    readonly property color cTextWhite: "#ffffff"
    readonly property color cTextMuted: "#8b93a3"
    readonly property color cTextFaint: "#5b6270"
    readonly property color cErrorRed: "#ff6b6b"

    property bool showUserPassword: false
    property bool showRootPassword: false

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

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

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

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            ColumnLayout {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 10
                width: Math.min(parent.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: "#c7ccd6"
                        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: "#5b6270"
                        font.pixelSize: 15
                        background: Rectangle {
                            radius: 7
                            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: "#c7ccd6"
                        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: "#5b6270"
                        font.pixelSize: 15
                        background: Rectangle {
                            radius: 7
                            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: "#c7ccd6"
                        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
                }

                CheckBox {
                    id: reuseRootCheck
                    Layout.fillWidth: true
                    visible: backend.rootReuseVisible
                    text: RaveUsersModule.Translations.reuseRootLabel
                    checked: backend.reuseRootPassword
                    onToggled: backend.setReuseRootPassword(checked)

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

                        Text {
                            anchors.centerIn: parent
                            text: "\u2713"
                            font.pixelSize: 14
                            font.bold: true
                            color: "#0f1713"
                            visible: reuseRootCheck.checked
                        }
                    }

                    contentItem: Text {
                        text: reuseRootCheck.text
                        color: "#d7dbe2"
                        font.pixelSize: 14
                        verticalAlignment: Text.AlignVCenter
                        leftPadding: reuseRootCheck.indicator.width + 12
                    }
                }

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

                    Text {
                        text: RaveUsersModule.Translations.rootPasswordLabel
                        color: "#c7ccd6"
                        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
                    }
                }
            }
        }
    }
}