import QtQuick

Window {
    id: root
    visible: true
    visibility: Window.FullScreen
    color: "#0a0506"
    title: "Red Bear Greeter"

    function submitLogin() {
        greeterBackend.submitLogin(usernameInput.text, passwordInput.text)
    }

    Rectangle {
        anchors.fill: parent
        color: "#160608"

        Image {
            anchors.fill: parent
            source: greeterBackend.backgroundUrl
            fillMode: Image.PreserveAspectCrop
            opacity: 0.72
            asynchronous: true
        }

        Rectangle {
            anchors.fill: parent
            color: "#88000000"
        }

        Rectangle {
            x: -parent.width * 0.18
            y: -parent.height * 0.12
            width: parent.width * 0.7
            height: width
            radius: width / 2
            color: "#44ff2a2a"
            opacity: 0.22
        }

        Rectangle {
            x: parent.width * 0.58
            y: parent.height * 0.46
            width: parent.width * 0.52
            height: width
            radius: width / 2
            color: "#33ff4444"
            opacity: 0.18
        }
    }

    Item {
        id: card
        width: Math.min(root.width * 0.42, 560)
        height: 520
        anchors.centerIn: parent

        Rectangle {
            anchors.fill: parent
            radius: 22
            color: "#dd150c0f"
            border.color: "#44ffffff"
            border.width: 1
        }

        Rectangle {
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            height: 2
            radius: 2
            color: "#ff5555"
            opacity: 0.65
        }

        Column {
            anchors.fill: parent
            anchors.margins: 34
            spacing: 18

            Image {
                anchors.horizontalCenter: parent.horizontalCenter
                source: greeterBackend.iconUrl
                width: 96
                height: 96
                fillMode: Image.PreserveAspectFit
                asynchronous: true
            }

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Red Bear OS"
                color: "#fff4f4"
                font.pixelSize: 30
                font.bold: true
            }

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: greeterBackend.sessionName
                color: "#e8a0a0"
                font.pixelSize: 14
            }

            Item { width: 1; height: 8 }

            Rectangle {
                width: parent.width
                height: 52
                radius: 10
                color: usernameInput.activeFocus ? "#28ffffff" : "#18ffffff"
                border.color: usernameInput.activeFocus ? "#70ff7777" : "#20ffffff"
                border.width: 1

                TextInput {
                    id: usernameInput
                    anchors.fill: parent
                    anchors.leftMargin: 16
                    anchors.rightMargin: 16
                    verticalAlignment: TextInput.AlignVCenter
                    color: "#fff8f8"
                    font.pixelSize: 16
                    enabled: !greeterBackend.busy
                    clip: true
                    focus: true
                    onAccepted: passwordInput.forceActiveFocus()
                }

                Text {
                    anchors.left: parent.left
                    anchors.leftMargin: 16
                    anchors.verticalCenter: parent.verticalCenter
                    text: "Username"
                    color: "#88ffffff"
                    font.pixelSize: 16
                    visible: usernameInput.text.length === 0
                }
            }

            Rectangle {
                width: parent.width
                height: 52
                radius: 10
                color: passwordInput.activeFocus ? "#28ffffff" : "#18ffffff"
                border.color: passwordInput.activeFocus ? "#70ff7777" : "#20ffffff"
                border.width: 1

                TextInput {
                    id: passwordInput
                    anchors.fill: parent
                    anchors.leftMargin: 16
                    anchors.rightMargin: 16
                    verticalAlignment: TextInput.AlignVCenter
                    color: "#fff8f8"
                    font.pixelSize: 16
                    echoMode: TextInput.Password
                    enabled: !greeterBackend.busy
                    clip: true
                    onAccepted: root.submitLogin()
                }

                Text {
                    anchors.left: parent.left
                    anchors.leftMargin: 16
                    anchors.verticalCenter: parent.verticalCenter
                    text: "Password"
                    color: "#88ffffff"
                    font.pixelSize: 16
                    visible: passwordInput.text.length === 0
                }
            }

            Rectangle {
                width: parent.width
                height: 52
                radius: 12
                color: greeterBackend.busy ? "#66444444" : "#ffb72020"
                border.color: "#66ffffff"
                border.width: 1

                Text {
                    anchors.centerIn: parent
                    text: greeterBackend.busy ? "Please wait..." : "Log in"
                    color: "white"
                    font.pixelSize: 16
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    enabled: !greeterBackend.busy
                    onClicked: root.submitLogin()
                }
            }

            Text {
                width: parent.width
                text: greeterBackend.message
                color: greeterBackend.state === "greeter_ready" ? "#e8b8b8" : "#ffdddd"
                font.pixelSize: 13
                wrapMode: Text.WordWrap
                horizontalAlignment: Text.AlignHCenter
            }
        }
    }
}