import QtQuick
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-overview-backdrop"
    mask: Region {}

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

    // Dark base tint
    Rectangle {
        anchors.fill: parent
        color: M.Theme.base00
        opacity: 0.4
    }

    // Gradient wash — slowly shifting via animated stop positions
    Rectangle {
        anchors.fill: parent
        property real _t: 0
        NumberAnimation on _t {
            from: 0
            to: 1
            duration: 20000
            loops: Animation.Infinite
        }
        gradient: Gradient {
            orientation: Gradient.Horizontal
            GradientStop {
                position: 0
                color: Qt.rgba(M.Theme.base0C.r, M.Theme.base0C.g, M.Theme.base0C.b, 0.2)
            }
            GradientStop {
                position: 0.5
                color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.12)
            }
            GradientStop {
                position: 1
                color: Qt.rgba(M.Theme.base09.r, M.Theme.base09.g, M.Theme.base09.b, 0.2)
            }
        }
    }

    // Hex grid
    Canvas {
        anchors.fill: parent
        opacity: 0.12
        onPaint: {
            const ctx = getContext("2d");
            const w = width, h = height;
            ctx.clearRect(0, 0, w, h);
            ctx.strokeStyle = M.Theme.base0D.toString();
            ctx.lineWidth = 0.5;
            const size = 50;
            const dx = size * 1.5;
            const dy = size * Math.sqrt(3);
            for (let col = -1; col < w / dx + 1; col++) {
                for (let row = -1; row < h / dy + 1; row++) {
                    const cx = col * dx;
                    const cy = row * dy + (col % 2 ? dy / 2 : 0);
                    ctx.beginPath();
                    for (let i = 0; i < 6; i++) {
                        const angle = Math.PI / 3 * i - Math.PI / 6;
                        const px = cx + size * 0.5 * Math.cos(angle);
                        const py = cy + size * 0.5 * Math.sin(angle);
                        if (i === 0)
                            ctx.moveTo(px, py);
                        else
                            ctx.lineTo(px, py);
                    }
                    ctx.closePath();
                    ctx.stroke();
                }
            }
        }
    }

    // Horizontal scan line with glow trail
    Rectangle {
        id: hScan
        width: 2
        height: parent.height
        opacity: 0.25
        color: M.Theme.base0D
        NumberAnimation on x {
            from: -100
            to: root.width + 100
            duration: 8000
            loops: Animation.Infinite
            easing.type: Easing.InOutSine
        }

        Rectangle {
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.right: parent.left
            width: 120
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop {
                    position: 0
                    color: "transparent"
                }
                GradientStop {
                    position: 1
                    color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.12)
                }
            }
        }
        Rectangle {
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.right
            width: 40
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop {
                    position: 0
                    color: Qt.rgba(M.Theme.base0D.r, M.Theme.base0D.g, M.Theme.base0D.b, 0.06)
                }
                GradientStop {
                    position: 1
                    color: "transparent"
                }
            }
        }
    }

    // Vertical scan line — different speed, different color
    Rectangle {
        id: vScan
        width: parent.width
        height: 1
        opacity: 0.15
        color: M.Theme.base0E
        NumberAnimation on y {
            from: -50
            to: root.height + 50
            duration: 12000
            loops: Animation.Infinite
            easing.type: Easing.InOutSine
        }

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.top
            height: 80
            gradient: Gradient {
                GradientStop {
                    position: 0
                    color: "transparent"
                }
                GradientStop {
                    position: 1
                    color: Qt.rgba(M.Theme.base0E.r, M.Theme.base0E.g, M.Theme.base0E.b, 0.06)
                }
            }
        }
    }

    // Diagonal scan — third line, slowest, warm color
    Rectangle {
        id: diagScan
        width: 1
        height: parent.height * 1.5
        opacity: 0.1
        color: M.Theme.base09
        rotation: 30
        transformOrigin: Item.Top

        SequentialAnimation on x {
            loops: Animation.Infinite
            NumberAnimation {
                from: -200
                to: root.width + 200
                duration: 15000
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                from: root.width + 200
                to: -200
                duration: 15000
                easing.type: Easing.InOutQuad
            }
        }
    }

    // Corner accent marks — top-left
    Rectangle {
        x: 40
        y: 40
        width: 60
        height: 1
        color: M.Theme.base0C
        opacity: 0.3
    }
    Rectangle {
        x: 40
        y: 40
        width: 1
        height: 60
        color: M.Theme.base0C
        opacity: 0.3
    }
    // Top-right
    Rectangle {
        x: parent.width - 100
        y: 40
        width: 60
        height: 1
        color: M.Theme.base09
        opacity: 0.3
    }
    Rectangle {
        x: parent.width - 41
        y: 40
        width: 1
        height: 60
        color: M.Theme.base09
        opacity: 0.3
    }
    // Bottom-left
    Rectangle {
        x: 40
        y: parent.height - 41
        width: 60
        height: 1
        color: M.Theme.base0E
        opacity: 0.3
    }
    Rectangle {
        x: 40
        y: parent.height - 100
        width: 1
        height: 60
        color: M.Theme.base0E
        opacity: 0.3
    }
    // Bottom-right
    Rectangle {
        x: parent.width - 100
        y: parent.height - 41
        width: 60
        height: 1
        color: M.Theme.base08
        opacity: 0.3
    }
    Rectangle {
        x: parent.width - 41
        y: parent.height - 100
        width: 1
        height: 60
        color: M.Theme.base08
        opacity: 0.3
    }

    // Pulsing corner dots
    Repeater {
        model: [
            {
                cx: 40,
                cy: 40,
                col: M.Theme.base0C
            },
            {
                cx: root.width - 41,
                cy: 40,
                col: M.Theme.base09
            },
            {
                cx: 40,
                cy: root.height - 41,
                col: M.Theme.base0E
            },
            {
                cx: root.width - 41,
                cy: root.height - 41,
                col: M.Theme.base08
            }
        ]
        Rectangle {
            required property var modelData
            x: modelData.cx - 2
            y: modelData.cy - 2
            width: 5
            height: 5
            radius: 2.5
            color: modelData.col

            SequentialAnimation on opacity {
                loops: Animation.Infinite
                NumberAnimation {
                    to: 0.15
                    duration: 1500 + Math.random() * 1000
                    easing.type: Easing.InOutSine
                }
                NumberAnimation {
                    to: 0.6
                    duration: 1500 + Math.random() * 1000
                    easing.type: Easing.InOutSine
                }
            }
        }
    }

    // Floating particles — slow drifting dots
    Repeater {
        model: 20
        Rectangle {
            required property int index
            width: 2
            height: 2
            radius: 1
            color: [M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base09, M.Theme.base08][index % 5]
            opacity: 0.15 + Math.random() * 0.15
            x: Math.random() * root.width
            y: Math.random() * root.height

            NumberAnimation on x {
                from: -20
                to: root.width + 20
                duration: 20000 + index * 3000
                loops: Animation.Infinite
            }
            NumberAnimation on y {
                from: Math.random() * root.height
                to: Math.random() * root.height
                duration: 30000 + index * 2000
                loops: Animation.Infinite
                easing.type: Easing.InOutSine
            }
        }
    }
}