import QtQuick
import QtQuick.Layouts
import Nebula.Bigscreen

Item {
    id: root

    property string userName: "Player"
    property real accentFocus: 0

    implicitHeight: Theme.topBarHeight

    RowLayout {
        anchors.fill: parent
        anchors.leftMargin: 40
        anchors.rightMargin: 40
        spacing: 16

        Text {
            text: "Nebula OS"
            font: Theme.brandFont
            color: Theme.textPrimary
            style: Text.Outline
            styleColor: Theme.accentCyan
            Layout.alignment: Qt.AlignVCenter
        }

        Item { Layout.fillWidth: true }

        RowLayout {
            spacing: 14
            Layout.alignment: Qt.AlignVCenter

            Rectangle {
                width: 36
                height: 36
                radius: 18
                color: Theme.backgroundPanel
                border.color: Theme.accentCyan
                border.width: 2

                Text {
                    anchors.centerIn: parent
                    text: root.userName.length > 0 ? root.userName.charAt(0).toUpperCase() : "?"
                    font: Theme.titleFont
                    color: Theme.textPrimary
                }
            }

            Text {
                id: clockLabel
                font: Theme.bodyFont
                color: Theme.textMuted
            }
        }
    }

    Rectangle {
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.leftMargin: 40 + root.accentFocus * 320
        width: 120
        height: 2
        radius: 1
        color: Theme.accentCyan
        opacity: 0.85

        Behavior on anchors.leftMargin {
            NumberAnimation { duration: Theme.focusScaleDuration; easing.type: Easing.OutCubic }
        }
    }

    Timer {
        interval: 1000
        running: true
        repeat: true
        triggeredOnStart: true
        onTriggered: clockLabel.text = Qt.formatTime(new Date(), "hh:mm AP")
    }
}