import QtQuick
import QtQuick.Effects
import Quickshell
import Quickshell.Wayland
import "." as M

PanelWindow {
    id: root

    required property var screen

    color: "transparent"

    WlrLayershell.layer: WlrLayer.Background
    WlrLayershell.exclusiveZone: -1
    WlrLayershell.namespace: "nova-background-overlay"
    mask: Region {}

    anchors.top: true
    anchors.left: true
    anchors.right: true
    anchors.bottom: true

    SystemClock {
        id: clock
        precision: SystemClock.Seconds
    }

    Column {
        anchors.centerIn: parent
        spacing: 12

        // Neon clock
        Item {
            anchors.horizontalCenter: parent.horizontalCenter
            width: clockRow.width
            height: clockRow.height

            // Glow layer — rendered offscreen, only its neon halo is visible
            Row {
                id: glowSource
                visible: false
                anchors.centerIn: parent

                Text {
                    text: Qt.formatDateTime(clock.date, "HH")
                    color: M.Theme.base0D
                    font.pixelSize: 72
                    font.family: M.Theme.fontFamily
                    font.bold: true
                    anchors.verticalCenter: parent.verticalCenter
                }
                Text {
                    text: ":"
                    color: colon._colors[colon._colorIdx % colon._colors.length]
                    font.pixelSize: 72
                    font.family: M.Theme.fontFamily
                    font.bold: true
                    opacity: colon.opacity
                    anchors.verticalCenter: parent.verticalCenter
                }
                Text {
                    text: Qt.formatDateTime(clock.date, "mm")
                    color: M.Theme.base0E
                    font.pixelSize: 72
                    font.family: M.Theme.fontFamily
                    font.bold: true
                    anchors.verticalCenter: parent.verticalCenter
                }
            }

            MultiEffect {
                source: glowSource
                anchors.fill: glowSource
                shadowEnabled: true
                shadowColor: M.Theme.base0D
                shadowBlur: 1.0
                shadowVerticalOffset: 0
                shadowHorizontalOffset: 0
            }

            // Actual visible text on top of the glow
            Row {
                id: clockRow
                anchors.centerIn: parent

                Text {
                    text: Qt.formatDateTime(clock.date, "HH")
                    color: M.Theme.base0D
                    opacity: 0.85
                    font.pixelSize: 72
                    font.family: M.Theme.fontFamily
                    font.bold: true
                    anchors.verticalCenter: parent.verticalCenter
                }
                Text {
                    id: colon
                    text: ":"
                    font.pixelSize: 72
                    font.family: M.Theme.fontFamily
                    font.bold: true
                    anchors.verticalCenter: parent.verticalCenter

                    property int _colorIdx: 0
                    readonly property var _colors: [M.Theme.base08, M.Theme.base09, M.Theme.base0A, M.Theme.base0B, M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base05]
                    color: _colors[_colorIdx % _colors.length]

                    SequentialAnimation {
                        loops: Animation.Infinite
                        running: true
                        NumberAnimation {
                            target: colon
                            property: "opacity"
                            to: 0.1
                            duration: 1000
                            easing.type: Easing.InOutSine
                        }
                        ScriptAction {
                            script: colon._colorIdx++
                        }
                        NumberAnimation {
                            target: colon
                            property: "opacity"
                            to: 0.85
                            duration: 1000
                            easing.type: Easing.InOutSine
                        }
                    }
                }
                Text {
                    text: Qt.formatDateTime(clock.date, "mm")
                    color: M.Theme.base0E
                    opacity: 0.85
                    font.pixelSize: 72
                    font.family: M.Theme.fontFamily
                    font.bold: true
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }

        // Date with subtle glow
        Text {
            id: dateText
            anchors.horizontalCenter: parent.horizontalCenter
            text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy")
            color: M.Theme.base05
            opacity: 0.5
            font.pixelSize: 18
            font.family: M.Theme.fontFamily
            font.letterSpacing: 4

            layer.enabled: true
            layer.effect: MultiEffect {
                shadowEnabled: true
                shadowColor: M.Theme.base0D
                shadowBlur: 0.4
                shadowVerticalOffset: 0
                shadowHorizontalOffset: 0
            }
        }

        // Seconds as a thin animated progress bar
        Item {
            anchors.horizontalCenter: parent.horizontalCenter
            width: clockRow.width
            height: 2

            Rectangle {
                anchors.fill: parent
                color: M.Theme.base02
                radius: 1
                opacity: 0.3
            }
            Rectangle {
                width: parent.width * (clock.date.getSeconds() / 59)
                height: parent.height
                color: colon._colors[colon._colorIdx % colon._colors.length]
                radius: 1
                opacity: 0.6

                Behavior on width {
                    NumberAnimation {
                        duration: 300
                    }
                }
            }
        }
    }
}