import QtQuick
import "../services" as S
import NovaStats as NS

Item {
    id: root

    required property real screenHeight
    property real wavePhase: 0
    property real unlockFade: 1

    readonly property real _fontSize: Math.max(48, screenHeight * 0.28)

    // Appear as wave reaches the clock (left edge), latch once fully revealed.
    // With reducedMotion the wave never runs, so show immediately.
    property bool _revealed: false
    on_RawProgressChanged: if (_rawProgress >= 1)
        _revealed = true
    readonly property real _rawProgress: S.ThemeUtil.reducedMotion ? 1 : Math.max(0, Math.min(1, wavePhase / 300))
    readonly property real _progress: (_revealed ? 1 : _rawProgress) * unlockFade
    opacity: _progress
    property real _slideX: (1 - _progress) * -80

    transform: Translate {
        x: root._slideX
    }

    Column {
        anchors.centerIn: parent
        spacing: 8
        rotation: -90
        transformOrigin: Item.Center

        Row {
            id: _clockRow

            property string _hours: ""
            property string _minutes: ""

            function _update() {
                const now = new Date();
                _hours = Qt.formatTime(now, "HH");
                _minutes = Qt.formatTime(now, "mm");
            }

            Component.onCompleted: _update()

            Timer {
                interval: 1000
                running: true
                repeat: true
                onTriggered: _clockRow._update()
            }

            Text {
                text: _clockRow._hours
                color: NS.ThemeService.base0C
                font.pixelSize: root._fontSize
                font.family: NS.ThemeService.fontFamily
                font.bold: true
            }
            Text {
                text: ":"
                color: NS.ThemeService.base0E
                font.pixelSize: root._fontSize
                font.family: NS.ThemeService.fontFamily
                font.bold: true
            }
            Text {
                text: _clockRow._minutes
                color: NS.ThemeService.base09
                font.pixelSize: root._fontSize
                font.family: NS.ThemeService.fontFamily
                font.bold: true
            }
        }

        Text {
            text: Qt.formatDate(new Date(), "dddd, d MMMM")
            color: NS.ThemeService.base04
            font.pixelSize: NS.ThemeService.fontSize + 2
            font.family: NS.ThemeService.fontFamily

            Timer {
                interval: 60000
                running: true
                repeat: true
                onTriggered: parent.text = Qt.formatDate(new Date(), "dddd, d MMMM")
            }
        }
    }

    implicitWidth: _clockRow.height
}