import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15
import QtQuick.Window 2.15

Item {
    id: root
    width: Screen.width
    height: Screen.height

    // Grid overlay is enabled at startup.
    property bool editMode: true

    // Blue gradient background (edges fading inward) with stops shifted inward.
    Rectangle {
        id: gradientBackground
        width: parent.width
        height: parent.height
        opacity: 0.5
        gradient: Gradient {
            // Shifted stops: outer stops moved to 0.1 and 0.9, inner stops to 0.4 and 0.6.
            GradientStop { position: 0.1; color: Qt.rgba(0, 100/255, 255/255, 0.5) }
            GradientStop { position: 0.4; color: Qt.rgba(0, 50/255, 180/255, 0.2) }
            GradientStop { position: 0.5; color: Qt.rgba(0, 0, 0, 0.0) }
            GradientStop { position: 0.6; color: Qt.rgba(0, 50/255, 180/255, 0.2) }
            GradientStop { position: 0.9; color: Qt.rgba(0, 100/255, 255/255, 0.5) }
        }
        visible: editMode  // Only show the gradient in edit mode
    }

    // Top & Bottom fade remains unchanged.
    Rectangle {
        id: topBottomGradient
        width: parent.width
        height: parent.height
        opacity: 0.3
        gradient: Gradient {
            orientation: Gradient.Vertical
            GradientStop { position: 0.0; color: Qt.rgba(0, 100/255, 255/255, 0.4) }
            GradientStop { position: 0.3; color: Qt.rgba(0, 50/255, 180/255, 0.1) }
            GradientStop { position: 0.5; color: Qt.rgba(0, 0, 0, 0.0) }
            GradientStop { position: 0.7; color: Qt.rgba(0, 50/255, 180/255, 0.1) }
            GradientStop { position: 1.0; color: Qt.rgba(0, 100/255, 255/255, 0.4) }
        }
        visible: editMode
    }

    // Full-Screen Dynamic Grid with 10% increased transparency (grid lines at 0.3 opacity).
    Canvas {
        id: gridCanvas
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
            ctx.strokeStyle = "rgba(255, 255, 255, 0.3)"; // Reduced opacity from 0.4 to 0.3.
            ctx.lineWidth = 1;

            var step = 120;  // Grid spacing remains unchanged.

            for (var x = 0; x < width; x += step) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, height);
                ctx.stroke();
            }
            for (var y = 0; y < height; y += step) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(width, y);
                ctx.stroke();
            }
        }
        Component.onCompleted: requestPaint()
        onVisibleChanged: requestPaint()
        visible: editMode  // Hide when edit mode is off.
    }
}