import Quickshell
import QtQuick

import qs.config
import qs.services

Rectangle {
    id: root

    property string backgroundMode: DesktopPreferences.get("lockBackgroundMode")
    property int blurLevel: DesktopPreferences.get("lockBlurLevel")
    property bool showClock: DesktopPreferences.get("lockShowClock")
    property bool showDate: DesktopPreferences.get("lockShowDate")
    property bool showUser: DesktopPreferences.get("lockShowUser")
    property bool fadeOnEmpty: DesktopPreferences.get("lockFadeOnEmpty")
    property bool use24Hour: DesktopPreferences.get("use24Hour")
    property string wallpaperPath: Wallpaper.active !== ""
        ? Wallpaper.active
        : (Wallpaper.configured !== "" ? Wallpaper.configured : Wallpaper.shippedPath)

    readonly property string previewMode: root.backgroundMode
    readonly property real blurStrength: Math.max(0, Math.min(1, root.blurLevel / 5))
    readonly property bool wallpaperVisible: wallpaper.visible
    readonly property bool clockVisible: clockLabel.visible
    readonly property bool dateVisible: dateLabel.visible
    readonly property bool userVisible: userLabel.visible
    readonly property bool passwordVisible: passwordField.visible

    width: parent ? parent.width : 620
    implicitHeight: 230
    radius: Theme.cardRadius
    clip: true
    color: Theme.bg
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.10)

    Image {
        id: wallpaper
        anchors.fill: parent
        visible: root.backgroundMode === "wallpaper"
        source: visible && root.wallpaperPath !== "" ? root.wallpaperPath : ""
        asynchronous: true
        cache: true
        fillMode: Image.PreserveAspectCrop
        sourceSize.width: 960
        sourceSize.height: 540
    }

    // Screenshot mode stays representative instead of taking a real desktop
    // capture inside Settings. The layered window silhouettes communicate the
    // selected softness without a live ShaderEffect or GPU repaint loop.
    Rectangle {
        anchors.fill: parent
        visible: root.backgroundMode === "screenshot"
        color: Theme.bgDark

        Rectangle {
            x: parent.width * 0.10
            y: parent.height * 0.12
            width: parent.width * 0.45
            height: parent.height * 0.66
            radius: 14 + root.blurStrength * 10
            color: Theme.alpha(Theme.bgHighlight, 0.52 - root.blurStrength * 0.18)
            border.width: 1
            border.color: Theme.alpha(Theme.accent, 0.14)
        }

        Rectangle {
            x: parent.width * 0.48
            y: parent.height * 0.24
            width: parent.width * 0.40
            height: parent.height * 0.57
            radius: 14 + root.blurStrength * 10
            color: Theme.alpha(Theme.bgPanel, 0.64 - root.blurStrength * 0.20)
            border.width: 1
            border.color: Theme.alpha(Theme.accentSecondary, 0.13)
        }
    }

    Rectangle {
        anchors.fill: parent
        color: root.backgroundMode === "wallpaper"
            ? Theme.alpha(Theme.bg, 0.42)
            : Theme.alpha(Theme.bg, 0.12 + root.blurStrength * 0.16)
    }

    Text {
        id: clockLabel
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 26
        visible: root.showClock
        text: Qt.formatDateTime(clock.date, root.use24Hour ? "HH:mm" : "h:mm")
        color: Theme.fg
        font.family: Theme.fontFamily
        font.pixelSize: 42
        font.weight: Font.Light
    }

    Text {
        id: dateLabel
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: clockLabel.visible ? clockLabel.bottom : parent.top
        anchors.topMargin: clockLabel.visible ? 1 : 35
        visible: root.showDate
        text: Qt.formatDateTime(clock.date, "dddd, MMMM d")
        color: Theme.fgDim
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
    }

    Rectangle {
        id: passwordField
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: root.showUser ? 48 : 30
        visible: !root.fadeOnEmpty
        width: Math.min(270, parent.width * 0.48)
        height: 36
        radius: height / 2
        color: Theme.alpha(Theme.bgPanel, 0.84)
        border.width: 1
        border.color: Theme.alpha(Theme.accent, 0.78)

        Text {
            anchors.centerIn: parent
            text: "Password"
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            font.italic: true
        }
    }

    Text {
        id: userLabel
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 19
        visible: root.showUser
        text: Quickshell.env("USER") || "User"
        color: Theme.alpha(Theme.fg, 0.90)
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        font.weight: Font.Medium
    }

    SystemClock {
        id: clock
        precision: SystemClock.Minutes
    }
}