import QtCore
import QtQuick
import qs.Common
import qs.Modals
import qs.Services
import qs.Widgets

Item {
    id: root

    readonly property bool hasOutputBackend: WlrOutputService.wlrOutputAvailable
    readonly property var wlrOutputs: WlrOutputService.outputs
    property var outputs: ({})
    property var savedOutputs: ({})
    property var allOutputs: buildAllOutputsMap()

    property var includeStatus: ({
            exists: false,
            included: false
        })
    property bool checkingInclude: false
    property bool fixingInclude: false

    function buildAllOutputsMap() {
        const result = {};
        for (const name in savedOutputs) {
            result[name] = Object.assign({}, savedOutputs[name], {
                connected: false
            });
        }
        for (const name in outputs) {
            result[name] = Object.assign({}, outputs[name], {
                connected: true
            });
        }
        return result;
    }

    onOutputsChanged: allOutputs = buildAllOutputsMap()
    onSavedOutputsChanged: allOutputs = buildAllOutputsMap()

    Connections {
        target: WlrOutputService
        function onStateChanged() {
            root.outputs = buildOutputsMap();
            reloadSavedOutputs();
        }
    }

    Component.onCompleted: {
        outputs = buildOutputsMap();
        reloadSavedOutputs();
        checkIncludeStatus();
    }

    function reloadSavedOutputs() {
        const paths = getConfigPaths();
        if (!paths) {
            savedOutputs = {};
            return;
        }

        Proc.runCommand("load-saved-outputs", ["cat", paths.outputsFile], (content, exitCode) => {
            if (exitCode !== 0 || !content.trim()) {
                savedOutputs = {};
                return;
            }
            const parsed = parseOutputsConfig(content);
            const filtered = filterDisconnectedOnly(parsed);
            savedOutputs = filtered;
        });
    }

    function filterDisconnectedOnly(parsedOutputs) {
        const result = {};
        const liveNames = Object.keys(outputs);
        const liveByIdentifier = {};
        for (const name of liveNames) {
            const o = outputs[name];
            if (o?.make && o?.model) {
                const serial = o.serial || "Unknown";
                const id = (o.make + " " + o.model + " " + serial).trim();
                liveByIdentifier[id] = true;
                liveByIdentifier[o.make + " " + o.model] = true;
            }
            liveByIdentifier[name] = true;
        }

        for (const savedName in parsedOutputs) {
            const trimmed = savedName.trim();
            if (!liveByIdentifier[trimmed]) {
                result[savedName] = parsedOutputs[savedName];
            }
        }
        return result;
    }

    function parseOutputsConfig(content) {
        switch (CompositorService.compositor) {
        case "niri":
            return parseNiriOutputs(content);
        case "hyprland":
            return parseHyprlandOutputs(content);
        case "dwl":
            return parseMangoOutputs(content);
        default:
            return {};
        }
    }

    function parseNiriOutputs(content) {
        const result = {};
        const outputRegex = /output\s+"([^"]+)"\s*\{([^}]*)\}/g;
        let match;
        while ((match = outputRegex.exec(content)) !== null) {
            const name = match[1];
            const body = match[2];

            const modeMatch = body.match(/mode\s+"(\d+)x(\d+)@([\d.]+)"/);
            const posMatch = body.match(/position\s+x=(-?\d+)\s+y=(-?\d+)/);
            const scaleMatch = body.match(/scale\s+([\d.]+)/);
            const transformMatch = body.match(/transform\s+"([^"]+)"/);
            const vrrMatch = body.match(/variable-refresh-rate(?:\s+on)?/);

            result[name] = {
                name: name,
                logical: {
                    x: posMatch ? parseInt(posMatch[1]) : 0,
                    y: posMatch ? parseInt(posMatch[2]) : 0,
                    scale: scaleMatch ? parseFloat(scaleMatch[1]) : 1.0,
                    transform: transformMatch ? transformMatch[1] : "Normal"
                },
                modes: modeMatch ? [
                    {
                        width: parseInt(modeMatch[1]),
                        height: parseInt(modeMatch[2]),
                        refresh_rate: Math.round(parseFloat(modeMatch[3]) * 1000)
                    }
                ] : [],
                current_mode: 0,
                vrr_enabled: !!vrrMatch,
                vrr_supported: true
            };
        }
        return result;
    }

    function parseHyprlandOutputs(content) {
        const result = {};
        const lines = content.split("\n");
        for (const line of lines) {
            const match = line.match(/^\s*monitor\s*=\s*([^,]+),\s*(\d+)x(\d+)@([\d.]+),\s*(-?\d+)x(-?\d+),\s*([\d.]+)(?:,\s*transform,\s*(\d+))?(?:,\s*vrr,\s*(\d+))?/);
            if (!match)
                continue;
            const name = match[1].trim();
            result[name] = {
                name: name,
                logical: {
                    x: parseInt(match[5]),
                    y: parseInt(match[6]),
                    scale: parseFloat(match[7]),
                    transform: hyprlandToTransform(parseInt(match[8] || "0"))
                },
                modes: [
                    {
                        width: parseInt(match[2]),
                        height: parseInt(match[3]),
                        refresh_rate: Math.round(parseFloat(match[4]) * 1000)
                    }
                ],
                current_mode: 0,
                vrr_enabled: match[9] === "1",
                vrr_supported: true
            };
        }
        return result;
    }

    function hyprlandToTransform(value) {
        switch (value) {
        case 0:
            return "Normal";
        case 1:
            return "90";
        case 2:
            return "180";
        case 3:
            return "270";
        case 4:
            return "Flipped";
        case 5:
            return "Flipped90";
        case 6:
            return "Flipped180";
        case 7:
            return "Flipped270";
        default:
            return "Normal";
        }
    }

    function parseMangoOutputs(content) {
        const result = {};
        const lines = content.split("\n");
        for (const line of lines) {
            const match = line.match(/^\s*monitorrule=([^,]+),([^,]+),([^,]+),([^,]+),(\d+),([\d.]+),(-?\d+),(-?\d+),(\d+),(\d+),(\d+)/);
            if (!match)
                continue;
            const name = match[1].trim();
            result[name] = {
                name: name,
                logical: {
                    x: parseInt(match[7]),
                    y: parseInt(match[8]),
                    scale: parseFloat(match[6]),
                    transform: mangoToTransform(parseInt(match[5]))
                },
                modes: [
                    {
                        width: parseInt(match[9]),
                        height: parseInt(match[10]),
                        refresh_rate: parseInt(match[11]) * 1000
                    }
                ],
                current_mode: 0,
                vrr_enabled: false,
                vrr_supported: false
            };
        }
        return result;
    }

    function mangoToTransform(value) {
        switch (value) {
        case 0:
            return "Normal";
        case 1:
            return "90";
        case 2:
            return "180";
        case 3:
            return "270";
        case 4:
            return "Flipped";
        case 5:
            return "Flipped90";
        case 6:
            return "Flipped180";
        case 7:
            return "Flipped270";
        default:
            return "Normal";
        }
    }

    function getConfigPaths() {
        const configDir = Paths.strip(StandardPaths.writableLocation(StandardPaths.ConfigLocation));
        switch (CompositorService.compositor) {
        case "niri":
            return {
                configFile: configDir + "/niri/config.kdl",
                outputsFile: configDir + "/niri/dms/outputs.kdl",
                grepPattern: 'include.*"dms/outputs.kdl"',
                includeLine: 'include "dms/outputs.kdl"'
            };
        case "hyprland":
            return {
                configFile: configDir + "/hypr/hyprland.conf",
                outputsFile: configDir + "/hypr/dms/outputs.conf",
                grepPattern: 'source.*dms/outputs.conf',
                includeLine: "source = ./dms/outputs.conf"
            };
        case "dwl":
            return {
                configFile: configDir + "/mango/config.conf",
                outputsFile: configDir + "/mango/dms/outputs.conf",
                grepPattern: 'source.*dms/outputs.conf',
                includeLine: "source=./dms/outputs.conf"
            };
        default:
            return null;
        }
    }

    function checkIncludeStatus() {
        const paths = getConfigPaths();
        if (!paths) {
            includeStatus = {
                exists: false,
                included: false
            };
            return;
        }

        checkingInclude = true;
        Proc.runCommand("check-outputs-include", ["sh", "-c", `exists=false; included=false; ` + `[ -f "${paths.outputsFile}" ] && exists=true; ` + `[ -f "${paths.configFile}" ] && grep -v '^[[:space:]]*\\(//\\|#\\)' "${paths.configFile}" | grep -q '${paths.grepPattern}' && included=true; ` + `echo "$exists $included"`], (output, exitCode) => {
            checkingInclude = false;
            const parts = output.trim().split(" ");
            includeStatus = {
                exists: parts[0] === "true",
                included: parts[1] === "true"
            };
        });
    }

    function fixOutputsInclude() {
        const paths = getConfigPaths();
        if (!paths)
            return;
        fixingInclude = true;
        const outputsDir = paths.outputsFile.substring(0, paths.outputsFile.lastIndexOf("/"));
        const unixTime = Math.floor(Date.now() / 1000);
        const backupFile = paths.configFile + ".backup" + unixTime;

        Proc.runCommand("fix-outputs-include", ["sh", "-c", `cp "${paths.configFile}" "${backupFile}" 2>/dev/null; ` + `mkdir -p "${outputsDir}" && ` + `touch "${paths.outputsFile}" && ` + `if ! grep -v '^[[:space:]]*\\(//\\|#\\)' "${paths.configFile}" 2>/dev/null | grep -q '${paths.grepPattern}'; then ` + `echo '' >> "${paths.configFile}" && ` + `echo '${paths.includeLine}' >> "${paths.configFile}"; fi`], (output, exitCode) => {
            fixingInclude = false;
            if (exitCode !== 0)
                return;
            checkIncludeStatus();
            WlrOutputService.requestState();
        });
    }

    function buildOutputsMap() {
        const map = {};
        for (const output of wlrOutputs) {
            const normalizedModes = (output.modes || []).map(m => ({
                        "id": m.id,
                        "width": m.width,
                        "height": m.height,
                        "refresh_rate": m.refresh,
                        "preferred": m.preferred ?? false
                    }));
            map[output.name] = {
                "name": output.name,
                "make": output.make || "",
                "model": output.model || "",
                "serial": output.serialNumber || "",
                "modes": normalizedModes,
                "current_mode": normalizedModes.findIndex(m => m.id === output.currentMode?.id),
                "vrr_supported": output.adaptiveSync !== undefined,
                "vrr_enabled": output.adaptiveSync === 1,
                "logical": {
                    "x": output.x ?? 0,
                    "y": output.y ?? 0,
                    "width": output.currentMode?.width ?? 1920,
                    "height": output.currentMode?.height ?? 1080,
                    "scale": output.scale ?? 1.0,
                    "transform": mapWlrTransform(output.transform)
                }
            };
        }
        return map;
    }

    function mapWlrTransform(wlrTransform) {
        switch (wlrTransform) {
        case 0:
            return "Normal";
        case 1:
            return "90";
        case 2:
            return "180";
        case 3:
            return "270";
        case 4:
            return "Flipped";
        case 5:
            return "Flipped90";
        case 6:
            return "Flipped180";
        case 7:
            return "Flipped270";
        default:
            return "Normal";
        }
    }

    function mapTransformToWlr(transform) {
        switch (transform) {
        case "Normal":
            return 0;
        case "90":
            return 1;
        case "180":
            return 2;
        case "270":
            return 3;
        case "Flipped":
            return 4;
        case "Flipped90":
            return 5;
        case "Flipped180":
            return 6;
        case "Flipped270":
            return 7;
        default:
            return 0;
        }
    }

    function backendFetchOutputs() {
        WlrOutputService.requestState();
    }

    function backendWriteOutputsConfig(outputsData) {
        switch (CompositorService.compositor) {
        case "niri":
            NiriService.generateOutputsConfig(outputsData);
            break;
        case "hyprland":
            HyprlandService.generateOutputsConfig(outputsData);
            break;
        case "dwl":
            DwlService.generateOutputsConfig(outputsData);
            break;
        }
    }

    function normalizeOutputPositions(outputsData) {
        const names = Object.keys(outputsData);
        if (names.length === 0)
            return outputsData;

        let minX = Infinity;
        let minY = Infinity;

        for (const name of names) {
            const output = outputsData[name];
            if (!output.logical)
                continue;
            minX = Math.min(minX, output.logical.x);
            minY = Math.min(minY, output.logical.y);
        }

        if (minX === Infinity || (minX === 0 && minY === 0))
            return outputsData;

        const normalized = JSON.parse(JSON.stringify(outputsData));
        for (const name of names) {
            if (!normalized[name].logical)
                continue;
            normalized[name].logical.x -= minX;
            normalized[name].logical.y -= minY;
        }

        return normalized;
    }

    function buildOutputsWithPendingChanges() {
        const result = {};

        for (const outputName in savedOutputs) {
            if (!outputs[outputName])
                result[outputName] = JSON.parse(JSON.stringify(savedOutputs[outputName]));
        }

        for (const outputName in outputs) {
            result[outputName] = JSON.parse(JSON.stringify(outputs[outputName]));
        }

        for (const outputName in pendingChanges) {
            if (!result[outputName])
                continue;
            const changes = pendingChanges[outputName];
            if (changes.position && result[outputName].logical) {
                result[outputName].logical.x = changes.position.x;
                result[outputName].logical.y = changes.position.y;
            }
            if (changes.mode !== undefined && result[outputName].modes) {
                for (let i = 0; i < result[outputName].modes.length; i++) {
                    if (formatMode(result[outputName].modes[i]) === changes.mode) {
                        result[outputName].current_mode = i;
                        break;
                    }
                }
            }
            if (changes.scale !== undefined && result[outputName].logical)
                result[outputName].logical.scale = changes.scale;
            if (changes.transform !== undefined && result[outputName].logical)
                result[outputName].logical.transform = changes.transform;
            if (changes.vrr !== undefined)
                result[outputName].vrr_enabled = changes.vrr;
        }
        return normalizeOutputPositions(result);
    }

    function backendUpdateOutputPosition(outputName, x, y) {
        if (!outputs || !outputs[outputName])
            return;
        const updatedOutputs = {};
        for (const name in outputs) {
            const output = outputs[name];
            if (name === outputName && output.logical) {
                updatedOutputs[name] = JSON.parse(JSON.stringify(output));
                updatedOutputs[name].logical.x = x;
                updatedOutputs[name].logical.y = y;
            } else {
                updatedOutputs[name] = output;
            }
        }
        outputs = updatedOutputs;
    }

    function backendUpdateOutputScale(outputName, scale) {
        if (!outputs || !outputs[outputName])
            return;
        const updatedOutputs = {};
        for (const name in outputs) {
            const output = outputs[name];
            if (name === outputName && output.logical) {
                updatedOutputs[name] = JSON.parse(JSON.stringify(output));
                updatedOutputs[name].logical.scale = scale;
            } else {
                updatedOutputs[name] = output;
            }
        }
        outputs = updatedOutputs;
    }

    property var pendingChanges: ({})
    property var originalOutputs: null
    property string originalDisplayNameMode: ""
    property bool formatChanged: originalDisplayNameMode !== "" && originalDisplayNameMode !== SettingsData.displayNameMode
    property bool hasPendingChanges: Object.keys(pendingChanges).length > 0 || formatChanged

    function getOutputDisplayName(output, outputName) {
        if (SettingsData.displayNameMode === "model" && output?.make && output?.model) {
            if (CompositorService.isNiri) {
                const serial = output.serial || "Unknown";
                return output.make + " " + output.model + " " + serial;
            }
            return output.make + " " + output.model;
        }
        return outputName;
    }

    function initOriginalOutputs() {
        if (!originalOutputs)
            originalOutputs = JSON.parse(JSON.stringify(outputs));
    }

    function setPendingChange(outputName, key, value) {
        initOriginalOutputs();
        const newPending = JSON.parse(JSON.stringify(pendingChanges));
        if (!newPending[outputName])
            newPending[outputName] = {};
        newPending[outputName][key] = value;
        pendingChanges = newPending;

        if (key === "scale") {
            recalculateAdjacentPositions(outputName, value);
            backendUpdateOutputScale(outputName, value);
        }
    }

    function recalculateAdjacentPositions(changedOutput, newScale) {
        const output = outputs[changedOutput];
        if (!output?.logical)
            return;
        const oldPhys = getPhysicalSize(output);
        const oldLogicalW = Math.round(oldPhys.w / (output.logical.scale || 1.0));
        const newLogicalW = Math.round(oldPhys.w / newScale);

        const changedX = getPendingValue(changedOutput, "position")?.x ?? output.logical.x;
        const changedY = getPendingValue(changedOutput, "position")?.y ?? output.logical.y;

        for (const name in outputs) {
            if (name === changedOutput)
                continue;
            const other = outputs[name];
            if (!other?.logical)
                continue;
            const otherX = getPendingValue(name, "position")?.x ?? other.logical.x;
            const otherY = getPendingValue(name, "position")?.y ?? other.logical.y;
            const otherSize = getLogicalSize(other);
            const otherRight = otherX + otherSize.w;

            if (Math.abs(changedX - otherRight) < 5) {
                const newX = otherRight;
                const newPending = JSON.parse(JSON.stringify(pendingChanges));
                if (!newPending[changedOutput])
                    newPending[changedOutput] = {};
                newPending[changedOutput].position = {
                    x: newX,
                    y: changedY
                };
                pendingChanges = newPending;
                backendUpdateOutputPosition(changedOutput, newX, changedY);
                return;
            }

            const changedRight = changedX + oldLogicalW;
            if (Math.abs(otherX - changedRight) < 5) {
                const newOtherX = changedX + newLogicalW;
                const newPending = JSON.parse(JSON.stringify(pendingChanges));
                if (!newPending[name])
                    newPending[name] = {};
                newPending[name].position = {
                    x: newOtherX,
                    y: otherY
                };
                pendingChanges = newPending;
                backendUpdateOutputPosition(name, newOtherX, otherY);
            }
        }
    }

    function getPendingValue(outputName, key) {
        if (!pendingChanges[outputName])
            return undefined;
        return pendingChanges[outputName][key];
    }

    function getEffectiveValue(outputName, key, originalValue) {
        const pending = getPendingValue(outputName, key);
        return pending !== undefined ? pending : originalValue;
    }

    function clearPendingChanges() {
        pendingChanges = {};
        originalOutputs = null;
        originalDisplayNameMode = "";
    }

    function discardChanges() {
        if (originalDisplayNameMode !== "") {
            SettingsData.displayNameMode = originalDisplayNameMode;
            SettingsData.saveSettings();
        }
        backendFetchOutputs();
        clearPendingChanges();
    }

    function applyChanges() {
        if (!hasPendingChanges)
            return;
        const changeDescriptions = [];

        if (formatChanged) {
            const formatLabel = SettingsData.displayNameMode === "model" ? I18n.tr("Model") : I18n.tr("Name");
            changeDescriptions.push(I18n.tr("Config Format") + " → " + formatLabel);
        }

        for (const outputName in pendingChanges) {
            const changes = pendingChanges[outputName];
            if (changes.position)
                changeDescriptions.push(outputName + ": " + I18n.tr("Position") + " → " + changes.position.x + ", " + changes.position.y);
            if (changes.mode)
                changeDescriptions.push(outputName + ": " + I18n.tr("Mode") + " → " + changes.mode);
            if (changes.scale !== undefined)
                changeDescriptions.push(outputName + ": " + I18n.tr("Scale") + " → " + changes.scale);
            if (changes.transform)
                changeDescriptions.push(outputName + ": " + I18n.tr("Transform") + " → " + getTransformLabel(changes.transform));
            if (changes.vrr !== undefined)
                changeDescriptions.push(outputName + ": " + I18n.tr("VRR") + " → " + (changes.vrr ? I18n.tr("Enabled") : I18n.tr("Disabled")));
        }

        confirmationModal.changes = changeDescriptions;
        confirmationModal.open();

        if (formatChanged)
            SettingsData.saveSettings();

        const mergedOutputs = buildOutputsWithPendingChanges();
        backendWriteOutputsConfig(mergedOutputs);
    }

    function confirmChanges() {
        clearPendingChanges();
    }

    function revertChanges() {
        const hadFormatChange = originalDisplayNameMode !== "";
        if (hadFormatChange) {
            SettingsData.displayNameMode = originalDisplayNameMode;
            SettingsData.saveSettings();
        }

        if (originalOutputs) {
            const original = JSON.parse(JSON.stringify(originalOutputs));
            backendWriteOutputsConfig(original);
            pendingChanges = {};
            originalOutputs = null;
            originalDisplayNameMode = "";
            outputs = {};
            Qt.callLater(() => {
                root.outputs = original;
            });
        } else if (hadFormatChange) {
            const currentOutputs = buildOutputsWithPendingChanges();
            backendWriteOutputsConfig(currentOutputs);
            clearPendingChanges();
        } else {
            clearPendingChanges();
        }
    }

    function getOutputBounds() {
        if (!allOutputs || Object.keys(allOutputs).length === 0)
            return {
                "minX": 0,
                "minY": 0,
                "maxX": 1920,
                "maxY": 1080,
                "width": 1920,
                "height": 1080
            };

        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

        for (const name in allOutputs) {
            const output = allOutputs[name];
            if (!output.logical)
                continue;
            const x = output.logical.x;
            const y = output.logical.y;
            const size = getLogicalSize(output);
            minX = Math.min(minX, x);
            minY = Math.min(minY, y);
            maxX = Math.max(maxX, x + size.w);
            maxY = Math.max(maxY, y + size.h);
        }

        if (minX === Infinity)
            return {
                "minX": 0,
                "minY": 0,
                "maxX": 1920,
                "maxY": 1080,
                "width": 1920,
                "height": 1080
            };
        return {
            "minX": minX,
            "minY": minY,
            "maxX": maxX,
            "maxY": maxY,
            "width": maxX - minX,
            "height": maxY - minY
        };
    }

    function isRotated(transform) {
        switch (transform) {
        case "90":
        case "270":
        case "Flipped90":
        case "Flipped270":
            return true;
        default:
            return false;
        }
    }

    function getPhysicalSize(output) {
        if (!output)
            return {
                w: 1920,
                h: 1080
            };

        let w = 1920, h = 1080;
        if (output.modes && output.current_mode !== undefined) {
            const mode = output.modes[output.current_mode];
            if (mode) {
                w = mode.width || 1920;
                h = mode.height || 1080;
            }
        } else if (output.logical) {
            const scale = output.logical.scale || 1.0;
            w = Math.round((output.logical.width || 1920) * scale);
            h = Math.round((output.logical.height || 1080) * scale);
        }

        if (output.logical && isRotated(output.logical.transform))
            return {
                w: h,
                h: w
            };
        return {
            w: w,
            h: h
        };
    }

    function getLogicalSize(output) {
        if (!output)
            return {
                w: 1920,
                h: 1080
            };

        const phys = getPhysicalSize(output);
        const scale = output.logical?.scale || 1.0;

        return {
            w: Math.round(phys.w / scale),
            h: Math.round(phys.h / scale)
        };
    }

    function checkOverlap(testName, testX, testY, testW, testH) {
        for (const name in outputs) {
            if (name === testName)
                continue;
            const output = outputs[name];
            if (!output.logical)
                continue;
            const x = output.logical.x;
            const y = output.logical.y;
            const size = getLogicalSize(output);
            if (!(testX + testW <= x || testX >= x + size.w || testY + testH <= y || testY >= y + size.h))
                return true;
        }
        return false;
    }

    function snapToEdges(testName, posX, posY, testW, testH) {
        const snapThreshold = 200;
        let snappedX = posX;
        let snappedY = posY;
        let bestXDist = snapThreshold;
        let bestYDist = snapThreshold;

        for (const name in outputs) {
            if (name === testName)
                continue;
            const output = outputs[name];
            if (!output.logical)
                continue;
            const x = output.logical.x;
            const y = output.logical.y;
            const size = getLogicalSize(output);

            const rightEdge = x + size.w;
            const bottomEdge = y + size.h;
            const testRight = posX + testW;
            const testBottom = posY + testH;

            const xSnaps = [
                {
                    val: rightEdge,
                    dist: Math.abs(posX - rightEdge)
                },
                {
                    val: x - testW,
                    dist: Math.abs(testRight - x)
                },
                {
                    val: x,
                    dist: Math.abs(posX - x)
                },
                {
                    val: rightEdge - testW,
                    dist: Math.abs(testRight - rightEdge)
                }
            ];

            const ySnaps = [
                {
                    val: bottomEdge,
                    dist: Math.abs(posY - bottomEdge)
                },
                {
                    val: y - testH,
                    dist: Math.abs(testBottom - y)
                },
                {
                    val: y,
                    dist: Math.abs(posY - y)
                },
                {
                    val: bottomEdge - testH,
                    dist: Math.abs(testBottom - bottomEdge)
                }
            ];

            for (const snap of xSnaps) {
                if (snap.dist < bestXDist) {
                    bestXDist = snap.dist;
                    snappedX = snap.val;
                }
            }

            for (const snap of ySnaps) {
                if (snap.dist < bestYDist) {
                    bestYDist = snap.dist;
                    snappedY = snap.val;
                }
            }
        }

        if (checkOverlap(testName, snappedX, snappedY, testW, testH)) {
            if (!checkOverlap(testName, snappedX, posY, testW, testH))
                return Qt.point(snappedX, posY);
            if (!checkOverlap(testName, posX, snappedY, testW, testH))
                return Qt.point(posX, snappedY);
            return Qt.point(posX, posY);
        }
        return Qt.point(snappedX, snappedY);
    }

    function findBestSnapPosition(testName, posX, posY, testW, testH) {
        const outputNames = Object.keys(outputs).filter(n => n !== testName);

        if (outputNames.length === 0)
            return Qt.point(posX, posY);

        let bestPos = null;
        let bestDist = Infinity;

        for (const name of outputNames) {
            const output = outputs[name];
            if (!output.logical)
                continue;
            const x = output.logical.x;
            const y = output.logical.y;
            const size = getLogicalSize(output);

            const candidates = [
                {
                    px: x + size.w,
                    py: y
                },
                {
                    px: x - testW,
                    py: y
                },
                {
                    px: x,
                    py: y + size.h
                },
                {
                    px: x,
                    py: y - testH
                },
                {
                    px: x + size.w,
                    py: y + size.h - testH
                },
                {
                    px: x - testW,
                    py: y + size.h - testH
                },
                {
                    px: x + size.w - testW,
                    py: y + size.h
                },
                {
                    px: x + size.w - testW,
                    py: y - testH
                }
            ];

            for (const c of candidates) {
                if (checkOverlap(testName, c.px, c.py, testW, testH))
                    continue;
                const dist = Math.hypot(c.px - posX, c.py - posY);
                if (dist < bestDist) {
                    bestDist = dist;
                    bestPos = Qt.point(c.px, c.py);
                }
            }
        }

        return bestPos || Qt.point(posX, posY);
    }

    function formatMode(mode) {
        if (!mode)
            return "";
        return mode.width + "x" + mode.height + "@" + (mode.refresh_rate / 1000).toFixed(3);
    }

    function getTransformLabel(transform) {
        switch (transform) {
        case "Normal":
            return I18n.tr("Normal");
        case "90":
            return I18n.tr("90°");
        case "180":
            return I18n.tr("180°");
        case "270":
            return I18n.tr("270°");
        case "Flipped":
            return I18n.tr("Flipped");
        case "Flipped90":
            return I18n.tr("Flipped 90°");
        case "Flipped180":
            return I18n.tr("Flipped 180°");
        case "Flipped270":
            return I18n.tr("Flipped 270°");
        default:
            return I18n.tr("Normal");
        }
    }

    function getTransformValue(label) {
        if (label === I18n.tr("Normal"))
            return "Normal";
        if (label === I18n.tr("90°"))
            return "90";
        if (label === I18n.tr("180°"))
            return "180";
        if (label === I18n.tr("270°"))
            return "270";
        if (label === I18n.tr("Flipped"))
            return "Flipped";
        if (label === I18n.tr("Flipped 90°"))
            return "Flipped90";
        if (label === I18n.tr("Flipped 180°"))
            return "Flipped180";
        if (label === I18n.tr("Flipped 270°"))
            return "Flipped270";
        return "Normal";
    }

    DankFlickable {
        anchors.fill: parent
        clip: true
        contentHeight: mainColumn.height + Theme.spacingXL
        contentWidth: width

        Column {
            id: mainColumn

            width: Math.min(550, parent.width - Theme.spacingL * 2)
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: Theme.spacingXL

            StyledRect {
                id: includeWarningBox
                width: parent.width
                height: includeWarningSection.implicitHeight + Theme.spacingL * 2
                radius: Theme.cornerRadius

                readonly property bool showError: root.includeStatus.exists && !root.includeStatus.included
                readonly property bool showSetup: !root.includeStatus.exists && !root.includeStatus.included

                color: (showError || showSetup) ? Theme.withAlpha(Theme.primary, 0.15) : "transparent"
                border.color: (showError || showSetup) ? Theme.withAlpha(Theme.primary, 0.3) : "transparent"
                border.width: 1
                visible: (showError || showSetup) && hasOutputBackend && !root.checkingInclude

                Column {
                    id: includeWarningSection
                    anchors.fill: parent
                    anchors.margins: Theme.spacingL
                    spacing: Theme.spacingM

                    Row {
                        width: parent.width
                        spacing: Theme.spacingM

                        DankIcon {
                            name: "warning"
                            size: Theme.iconSize
                            color: Theme.primary
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        Column {
                            width: parent.width - Theme.iconSize - (includeFixButton.visible ? includeFixButton.width + Theme.spacingM : 0) - Theme.spacingM
                            spacing: Theme.spacingXS
                            anchors.verticalCenter: parent.verticalCenter

                            StyledText {
                                text: {
                                    if (includeWarningBox.showSetup)
                                        return I18n.tr("First Time Setup");
                                    if (includeWarningBox.showError)
                                        return I18n.tr("Outputs Include Missing");
                                    return "";
                                }
                                font.pixelSize: Theme.fontSizeMedium
                                font.weight: Font.Medium
                                color: Theme.primary
                            }

                            StyledText {
                                text: {
                                    if (includeWarningBox.showSetup)
                                        return I18n.tr("Click 'Setup' to create the outputs config and add include to your compositor config.");
                                    if (includeWarningBox.showError)
                                        return I18n.tr("dms/outputs config exists but is not included in your compositor config. Display changes won't persist.");
                                    return "";
                                }
                                font.pixelSize: Theme.fontSizeSmall
                                color: Theme.surfaceVariantText
                                wrapMode: Text.WordWrap
                                width: parent.width
                            }
                        }

                        DankButton {
                            id: includeFixButton
                            visible: includeWarningBox.showError || includeWarningBox.showSetup
                            text: {
                                if (root.fixingInclude)
                                    return I18n.tr("Fixing...");
                                if (includeWarningBox.showSetup)
                                    return I18n.tr("Setup");
                                return I18n.tr("Fix Now");
                            }
                            backgroundColor: Theme.primary
                            textColor: Theme.primaryText
                            enabled: !root.fixingInclude
                            anchors.verticalCenter: parent.verticalCenter
                            onClicked: root.fixOutputsInclude()
                        }
                    }
                }
            }

            StyledRect {
                width: parent.width
                height: monitorConfigSection.implicitHeight + Theme.spacingL * 2
                radius: Theme.cornerRadius
                color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                border.width: 0
                visible: hasOutputBackend

                Column {
                    id: monitorConfigSection
                    anchors.fill: parent
                    anchors.margins: Theme.spacingL
                    spacing: Theme.spacingM

                    Row {
                        width: parent.width
                        spacing: Theme.spacingM

                        DankIcon {
                            name: "monitor"
                            size: Theme.iconSize
                            color: Theme.primary
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        Column {
                            width: parent.width - Theme.iconSize - Theme.spacingM - (displayFormatColumn.visible ? displayFormatColumn.width + Theme.spacingM : 0)
                            spacing: Theme.spacingXS
                            anchors.verticalCenter: parent.verticalCenter

                            StyledText {
                                text: I18n.tr("Monitor Configuration")
                                font.pixelSize: Theme.fontSizeLarge
                                font.weight: Font.Medium
                                color: Theme.surfaceText
                            }

                            StyledText {
                                text: I18n.tr("Arrange displays and configure resolution, refresh rate, and VRR")
                                font.pixelSize: Theme.fontSizeSmall
                                color: Theme.surfaceVariantText
                                wrapMode: Text.WordWrap
                                width: parent.width
                            }
                        }

                        Column {
                            id: displayFormatColumn
                            visible: !CompositorService.isDwl
                            spacing: Theme.spacingXS
                            anchors.verticalCenter: parent.verticalCenter

                            StyledText {
                                text: I18n.tr("Config Format")
                                font.pixelSize: Theme.fontSizeSmall
                                color: Theme.surfaceVariantText
                                anchors.horizontalCenter: parent.horizontalCenter
                            }

                            DankButtonGroup {
                                id: displayFormatGroup
                                model: [I18n.tr("Name"), I18n.tr("Model")]
                                currentIndex: SettingsData.displayNameMode === "model" ? 1 : 0
                                onSelectionChanged: (index, selected) => {
                                    if (!selected)
                                        return;
                                    const newMode = index === 1 ? "model" : "system";
                                    if (root.originalDisplayNameMode === "")
                                        root.originalDisplayNameMode = SettingsData.displayNameMode;
                                    SettingsData.displayNameMode = newMode;
                                }

                                Connections {
                                    target: SettingsData
                                    function onDisplayNameModeChanged() {
                                        displayFormatGroup.currentIndex = SettingsData.displayNameMode === "model" ? 1 : 0;
                                    }
                                }
                            }
                        }
                    }

                    Rectangle {
                        width: parent.width
                        height: 280
                        radius: Theme.cornerRadius
                        color: Theme.surfaceContainerHighest
                        border.color: Theme.outline
                        border.width: 1

                        Item {
                            id: monitorCanvas
                            anchors.fill: parent
                            anchors.margins: 16

                            property var bounds: root.getOutputBounds()
                            property real scaleFactor: {
                                if (bounds.width === 0 || bounds.height === 0)
                                    return 0.1;
                                const scaleX = (width - 32) / bounds.width;
                                const scaleY = (height - 32) / bounds.height;
                                return Math.min(scaleX, scaleY);
                            }
                            property point offset: Qt.point((width - bounds.width * scaleFactor) / 2 - bounds.minX * scaleFactor, (height - bounds.height * scaleFactor) / 2 - bounds.minY * scaleFactor)

                            Connections {
                                target: root
                                function onAllOutputsChanged() {
                                    monitorCanvas.bounds = root.getOutputBounds();
                                }
                            }

                            Repeater {
                                model: allOutputs ? Object.keys(allOutputs) : []

                                delegate: Rectangle {
                                    id: monitorRect
                                    required property string modelData
                                    property var outputData: allOutputs[modelData]
                                    property bool isConnected: outputData?.connected ?? false
                                    property bool isDragging: false
                                    property point originalLogical: Qt.point(0, 0)
                                    property point snappedLogical: Qt.point(0, 0)
                                    property bool isValidPosition: true

                                    property var physSize: root.getPhysicalSize(outputData)
                                    property var logicalSize: root.getLogicalSize(outputData)

                                    x: isDragging ? x : (outputData?.logical?.x ?? 0) * monitorCanvas.scaleFactor + monitorCanvas.offset.x
                                    y: isDragging ? y : (outputData?.logical?.y ?? 0) * monitorCanvas.scaleFactor + monitorCanvas.offset.y
                                    width: logicalSize.w * monitorCanvas.scaleFactor
                                    height: logicalSize.h * monitorCanvas.scaleFactor
                                    radius: Theme.cornerRadius
                                    opacity: isConnected ? 1.0 : 0.5
                                    color: {
                                        if (!isConnected)
                                            return Theme.surfaceContainerHighest;
                                        if (!isValidPosition)
                                            return Theme.withAlpha(Theme.error, 0.3);
                                        if (isDragging)
                                            return Theme.withAlpha(Theme.primary, 0.4);
                                        if (dragArea.containsMouse)
                                            return Theme.withAlpha(Theme.primary, 0.2);
                                        return Theme.surfaceContainerHigh;
                                    }
                                    border.color: {
                                        if (!isConnected)
                                            return Theme.outline;
                                        if (!isValidPosition)
                                            return Theme.error;
                                        if (isDragging)
                                            return Theme.primary;
                                        if (CompositorService.getFocusedScreen()?.name === modelData)
                                            return Theme.primary;
                                        return Theme.outline;
                                    }
                                    border.width: isDragging ? 3 : 2
                                    z: isDragging ? 100 : (isConnected ? 1 : 0)

                                    Rectangle {
                                        id: snapPreview
                                        visible: monitorRect.isDragging && monitorRect.isValidPosition
                                        x: monitorRect.snappedLogical.x * monitorCanvas.scaleFactor + monitorCanvas.offset.x - monitorRect.x
                                        y: monitorRect.snappedLogical.y * monitorCanvas.scaleFactor + monitorCanvas.offset.y - monitorRect.y
                                        width: parent.width
                                        height: parent.height
                                        radius: Theme.cornerRadius
                                        color: "transparent"
                                        border.color: Theme.primary
                                        border.width: 2
                                        opacity: 0.6
                                    }

                                    Column {
                                        anchors.centerIn: parent
                                        spacing: 2

                                        DankIcon {
                                            name: monitorRect.isConnected ? "desktop_windows" : "desktop_access_disabled"
                                            size: Math.min(24, Math.min(monitorRect.width * 0.3, monitorRect.height * 0.25))
                                            color: monitorRect.isConnected ? (monitorRect.isValidPosition ? Theme.primary : Theme.error) : Theme.surfaceVariantText
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }

                                        StyledText {
                                            text: root.getOutputDisplayName(monitorRect.outputData, modelData)
                                            font.pixelSize: Math.max(10, Math.min(14, monitorRect.width * 0.12))
                                            font.weight: Font.Medium
                                            color: monitorRect.isConnected ? Theme.surfaceText : Theme.surfaceVariantText
                                            anchors.horizontalCenter: parent.horizontalCenter
                                            elide: Text.ElideMiddle
                                            width: Math.min(implicitWidth, monitorRect.width - 8)
                                        }

                                        StyledText {
                                            text: monitorRect.isConnected ? (monitorRect.physSize.w + "x" + monitorRect.physSize.h) : I18n.tr("Disconnected")
                                            font.pixelSize: Math.max(8, Math.min(11, monitorRect.width * 0.09))
                                            color: Theme.surfaceVariantText
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }
                                    }

                                    MouseArea {
                                        id: dragArea
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        enabled: monitorRect.isConnected
                                        cursorShape: !monitorRect.isConnected ? Qt.ArrowCursor : (monitorRect.isDragging ? Qt.ClosedHandCursor : Qt.OpenHandCursor)
                                        drag.target: monitorRect.isConnected ? monitorRect : null
                                        drag.axis: Drag.XAndYAxis
                                        drag.threshold: 0

                                        onPressed: mouse => {
                                            if (!monitorRect.isConnected)
                                                return;
                                            monitorRect.isDragging = true;
                                            monitorRect.originalLogical = Qt.point(outputData?.logical?.x ?? 0, outputData?.logical?.y ?? 0);
                                            monitorRect.snappedLogical = monitorRect.originalLogical;
                                            monitorRect.isValidPosition = true;
                                        }

                                        onPositionChanged: mouse => {
                                            if (!monitorRect.isDragging || !monitorRect.isConnected)
                                                return;
                                            let posX = Math.round((monitorRect.x - monitorCanvas.offset.x) / monitorCanvas.scaleFactor);
                                            let posY = Math.round((monitorRect.y - monitorCanvas.offset.y) / monitorCanvas.scaleFactor);

                                            const size = root.getLogicalSize(outputData);

                                            const snapped = root.snapToEdges(modelData, posX, posY, size.w, size.h);
                                            monitorRect.snappedLogical = snapped;
                                            monitorRect.isValidPosition = !root.checkOverlap(modelData, snapped.x, snapped.y, size.w, size.h);
                                        }

                                        onReleased: {
                                            if (!monitorRect.isDragging || !monitorRect.isConnected)
                                                return;
                                            monitorRect.isDragging = false;

                                            const size = root.getLogicalSize(outputData);
                                            const finalX = monitorRect.snappedLogical.x;
                                            const finalY = monitorRect.snappedLogical.y;

                                            if (root.checkOverlap(modelData, finalX, finalY, size.w, size.h)) {
                                                monitorRect.isValidPosition = true;
                                                return;
                                            }

                                            if (finalX === monitorRect.originalLogical.x && finalY === monitorRect.originalLogical.y)
                                                return;
                                            root.initOriginalOutputs();
                                            backendUpdateOutputPosition(modelData, finalX, finalY);
                                            root.setPendingChange(modelData, "position", {
                                                "x": finalX,
                                                "y": finalY
                                            });
                                        }
                                    }

                                    Drag.active: dragArea.drag.active && monitorRect.isConnected
                                }
                            }
                        }
                    }

                    Column {
                        width: parent.width
                        spacing: Theme.spacingS

                        Repeater {
                            model: allOutputs ? Object.keys(allOutputs) : []

                            delegate: StyledRect {
                                required property string modelData
                                property var outputData: allOutputs[modelData]
                                property bool isConnected: outputData?.connected ?? false

                                width: parent.width
                                height: outputSettingsCol.implicitHeight + Theme.spacingM * 2
                                radius: Theme.cornerRadius
                                color: Theme.withAlpha(Theme.surfaceContainerHigh, isConnected ? 0.5 : 0.3)
                                border.color: Theme.withAlpha(Theme.outline, 0.3)
                                border.width: 1
                                opacity: isConnected ? 1.0 : 0.7

                                Column {
                                    id: outputSettingsCol
                                    anchors.fill: parent
                                    anchors.margins: Theme.spacingM
                                    spacing: Theme.spacingS

                                    Row {
                                        width: parent.width
                                        spacing: Theme.spacingM

                                        DankIcon {
                                            name: isConnected ? "desktop_windows" : "desktop_access_disabled"
                                            size: Theme.iconSize - 4
                                            color: isConnected ? Theme.primary : Theme.surfaceVariantText
                                            anchors.verticalCenter: parent.verticalCenter
                                        }

                                        Column {
                                            width: parent.width - Theme.iconSize - Theme.spacingM - (disconnectedBadge.visible ? disconnectedBadge.width + Theme.spacingS : 0)
                                            spacing: 2

                                            StyledText {
                                                text: root.getOutputDisplayName(outputData, modelData)
                                                font.pixelSize: Theme.fontSizeMedium
                                                font.weight: Font.Medium
                                                color: isConnected ? Theme.surfaceText : Theme.surfaceVariantText
                                            }

                                            StyledText {
                                                text: (outputData?.model ?? "") + (outputData?.make ? " - " + outputData.make : "")
                                                font.pixelSize: Theme.fontSizeSmall
                                                color: Theme.surfaceVariantText
                                            }
                                        }

                                        Rectangle {
                                            id: disconnectedBadge
                                            visible: !isConnected
                                            width: disconnectedText.implicitWidth + Theme.spacingM
                                            height: disconnectedText.implicitHeight + Theme.spacingXS
                                            radius: height / 2
                                            color: Theme.withAlpha(Theme.outline, 0.3)
                                            anchors.verticalCenter: parent.verticalCenter

                                            StyledText {
                                                id: disconnectedText
                                                text: I18n.tr("Disconnected")
                                                font.pixelSize: Theme.fontSizeSmall
                                                color: Theme.surfaceVariantText
                                                anchors.centerIn: parent
                                            }
                                        }
                                    }

                                    DankDropdown {
                                        width: parent.width
                                        text: I18n.tr("Resolution & Refresh")
                                        visible: isConnected
                                        currentValue: {
                                            const pendingMode = root.getPendingValue(modelData, "mode");
                                            if (pendingMode)
                                                return pendingMode;
                                            const data = root.outputs[modelData];
                                            if (!data?.modes || data?.current_mode === undefined)
                                                return "Auto";
                                            const mode = data.modes[data.current_mode];
                                            return mode ? root.formatMode(mode) : "Auto";
                                        }
                                        options: {
                                            const data = root.outputs[modelData];
                                            if (!data?.modes)
                                                return ["Auto"];
                                            const opts = [];
                                            for (var i = 0; i < data.modes.length; i++) {
                                                opts.push(root.formatMode(data.modes[i]));
                                            }
                                            return opts;
                                        }
                                        onValueChanged: value => root.setPendingChange(modelData, "mode", value)
                                    }

                                    StyledText {
                                        visible: !isConnected
                                        text: I18n.tr("Configuration will be preserved when this display reconnects")
                                        font.pixelSize: Theme.fontSizeSmall
                                        color: Theme.surfaceVariantText
                                        wrapMode: Text.WordWrap
                                        width: parent.width
                                    }

                                    Row {
                                        width: parent.width
                                        spacing: Theme.spacingM
                                        visible: isConnected

                                        Column {
                                            width: (parent.width - Theme.spacingM) / 2
                                            spacing: Theme.spacingXS

                                            StyledText {
                                                text: I18n.tr("Scale")
                                                font.pixelSize: Theme.fontSizeSmall
                                                color: Theme.surfaceVariantText
                                            }

                                            Item {
                                                width: parent.width
                                                height: scaleDropdown.visible ? scaleDropdown.height : scaleInput.height

                                                property bool customMode: false
                                                property string currentScale: {
                                                    const pendingScale = root.getPendingValue(modelData, "scale");
                                                    if (pendingScale !== undefined)
                                                        return parseFloat(pendingScale.toFixed(2)).toString();
                                                    const scale = root.outputs[modelData]?.logical?.scale ?? 1.0;
                                                    return parseFloat(scale.toFixed(2)).toString();
                                                }

                                                DankDropdown {
                                                    id: scaleDropdown
                                                    width: parent.width
                                                    dropdownWidth: parent.width
                                                    visible: !parent.customMode
                                                    currentValue: parent.currentScale
                                                    options: {
                                                        const standard = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2", "2.5", "3", I18n.tr("Custom...")];
                                                        const current = parent.currentScale;
                                                        if (standard.slice(0, -1).includes(current))
                                                            return standard;
                                                        const opts = [...standard.slice(0, -1), current, standard[standard.length - 1]];
                                                        return opts.sort((a, b) => {
                                                            if (a === I18n.tr("Custom..."))
                                                                return 1;
                                                            if (b === I18n.tr("Custom..."))
                                                                return -1;
                                                            return parseFloat(a) - parseFloat(b);
                                                        });
                                                    }
                                                    onValueChanged: value => {
                                                        if (value === I18n.tr("Custom...")) {
                                                            parent.customMode = true;
                                                            scaleInput.text = parent.currentScale;
                                                            scaleInput.forceActiveFocus();
                                                            scaleInput.selectAll();
                                                            return;
                                                        }
                                                        root.setPendingChange(modelData, "scale", parseFloat(value));
                                                    }
                                                }

                                                DankTextField {
                                                    id: scaleInput
                                                    width: parent.width
                                                    height: 40
                                                    visible: parent.customMode
                                                    placeholderText: "0.5 - 4.0"

                                                    function applyValue() {
                                                        const val = parseFloat(text);
                                                        if (isNaN(val) || val < 0.25 || val > 4) {
                                                            text = parent.currentScale;
                                                            parent.customMode = false;
                                                            return;
                                                        }
                                                        root.setPendingChange(modelData, "scale", parseFloat(val.toFixed(2)));
                                                        parent.customMode = false;
                                                    }

                                                    onAccepted: applyValue()
                                                    onEditingFinished: applyValue()
                                                    Keys.onEscapePressed: {
                                                        text = parent.currentScale;
                                                        parent.customMode = false;
                                                    }
                                                }
                                            }
                                        }

                                        Column {
                                            width: (parent.width - Theme.spacingM) / 2
                                            spacing: Theme.spacingXS

                                            StyledText {
                                                text: I18n.tr("Transform")
                                                font.pixelSize: Theme.fontSizeSmall
                                                color: Theme.surfaceVariantText
                                            }

                                            DankDropdown {
                                                width: parent.width
                                                dropdownWidth: parent.width
                                                currentValue: {
                                                    const pendingTransform = root.getPendingValue(modelData, "transform");
                                                    if (pendingTransform)
                                                        return root.getTransformLabel(pendingTransform);
                                                    const data = root.outputs[modelData];
                                                    return root.getTransformLabel(data?.logical?.transform ?? "Normal");
                                                }
                                                options: [I18n.tr("Normal"), I18n.tr("90°"), I18n.tr("180°"), I18n.tr("270°"), I18n.tr("Flipped"), I18n.tr("Flipped 90°"), I18n.tr("Flipped 180°"), I18n.tr("Flipped 270°")]
                                                onValueChanged: value => root.setPendingChange(modelData, "transform", root.getTransformValue(value))
                                            }
                                        }
                                    }

                                    DankToggle {
                                        width: parent.width
                                        text: I18n.tr("Variable Refresh Rate")
                                        visible: isConnected && !CompositorService.isDwl && (root.outputs[modelData]?.vrr_supported ?? false)
                                        checked: {
                                            const pendingVrr = root.getPendingValue(modelData, "vrr");
                                            if (pendingVrr !== undefined)
                                                return pendingVrr;
                                            return root.outputs[modelData]?.vrr_enabled ?? false;
                                        }
                                        onToggled: checked => root.setPendingChange(modelData, "vrr", checked)
                                    }
                                }
                            }
                        }
                    }

                    Row {
                        width: parent.width
                        spacing: Theme.spacingS
                        visible: root.hasPendingChanges
                        layoutDirection: Qt.RightToLeft

                        DankButton {
                            text: I18n.tr("Apply Changes")
                            iconName: "check"
                            onClicked: root.applyChanges()
                        }

                        DankButton {
                            text: I18n.tr("Discard")
                            backgroundColor: "transparent"
                            textColor: Theme.surfaceText
                            onClicked: root.discardChanges()
                        }
                    }
                }
            }

            StyledRect {
                width: parent.width
                height: noBackendMessage.implicitHeight + Theme.spacingL * 2
                radius: Theme.cornerRadius
                color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                border.width: 0
                visible: !hasOutputBackend

                Column {
                    id: noBackendMessage
                    anchors.fill: parent
                    anchors.margins: Theme.spacingL
                    spacing: Theme.spacingM

                    Row {
                        width: parent.width
                        spacing: Theme.spacingM

                        DankIcon {
                            name: "monitor"
                            size: Theme.iconSize
                            color: Theme.surfaceVariantText
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        Column {
                            width: parent.width - Theme.iconSize - Theme.spacingM
                            spacing: Theme.spacingXS
                            anchors.verticalCenter: parent.verticalCenter

                            StyledText {
                                text: I18n.tr("Monitor Configuration")
                                font.pixelSize: Theme.fontSizeLarge
                                font.weight: Font.Medium
                                color: Theme.surfaceText
                            }

                            StyledText {
                                text: I18n.tr("Display configuration is not available. WLR output management protocol not supported.")
                                font.pixelSize: Theme.fontSizeSmall
                                color: Theme.surfaceVariantText
                                wrapMode: Text.WordWrap
                                width: parent.width
                            }
                        }
                    }
                }
            }
        }
    }

    DisplayConfirmationModal {
        id: confirmationModal
        onConfirmed: root.confirmChanges()
        onReverted: root.revertChanges()
    }
}