import QtQuick
import Quickshell
import Quickshell.Widgets
import qs.Common
import qs.Modals.FileBrowser
import qs.Services
import qs.Widgets
import qs.Modules.Settings.Widgets

Item {
    id: root

    LayoutMirroring.enabled: I18n.isRtl
    LayoutMirroring.childrenInherit: true

    property var parentModal: null
    property string selectedMonitorName: {
        var screens = Quickshell.screens;
        return screens.length > 0 ? screens[0].name : "";
    }
    property string currentWallpaper: {
        if (!SessionData.perMonitorWallpaper)
            return SessionData.wallpaperPath;
        var map = SessionData.monitorWallpapers;
        var screens = Quickshell.screens;
        for (var i = 0; i < screens.length; i++) {
            if (screens[i].name !== selectedMonitorName)
                continue;
            var screen = screens[i];
            if (map[screen.name] !== undefined)
                return map[screen.name];
            if (screen.model && map[screen.model] !== undefined)
                return map[screen.model];
            var displayName = SettingsData.getScreenDisplayName(screen);
            if (displayName && map[displayName] !== undefined)
                return map[displayName];
            break;
        }
        return SessionData.wallpaperPath;
    }

    Component.onCompleted: {
        WallpaperCyclingService.cyclingActive;
    }

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

        Column {
            id: mainColumn
            topPadding: 4

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

            SettingsCard {
                tab: "wallpaper"
                tags: ["background", "image", "picture"]
                title: I18n.tr("Wallpaper")
                settingKey: "wallpaper"
                iconName: "wallpaper"

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

                    StyledRect {
                        id: wallpaperPreview
                        width: 160
                        height: 90
                        radius: Theme.cornerRadius
                        color: Theme.surfaceVariant

                        ClippingRectangle {
                            anchors.fill: parent
                            anchors.margins: 1
                            radius: Theme.cornerRadius - 1
                            color: "transparent"

                            Image {
                                anchors.fill: parent
                                source: {
                                    var wp = root.currentWallpaper;
                                    if (wp === "" || wp.startsWith("#"))
                                        return "";
                                    if (wp.startsWith("file://"))
                                        wp = wp.substring(7);
                                    return "file://" + wp.split('/').map(s => encodeURIComponent(s)).join('/');
                                }
                                fillMode: Image.PreserveAspectCrop
                                visible: root.currentWallpaper !== "" && !root.currentWallpaper.startsWith("#")
                                sourceSize.width: 160
                                sourceSize.height: 160
                                asynchronous: true
                            }
                        }

                        Rectangle {
                            anchors.fill: parent
                            anchors.margins: 1
                            radius: Theme.cornerRadius - 1
                            color: root.currentWallpaper.startsWith("#") ? root.currentWallpaper : "transparent"
                            visible: root.currentWallpaper !== "" && root.currentWallpaper.startsWith("#")
                        }

                        DankIcon {
                            anchors.centerIn: parent
                            name: "image"
                            size: Theme.iconSizeLarge + 8
                            color: Theme.surfaceVariantText
                            visible: root.currentWallpaper === ""
                        }

                        Rectangle {
                            anchors.fill: parent
                            anchors.margins: 1
                            radius: Theme.cornerRadius - 1
                            color: Qt.rgba(0, 0, 0, 0.7)
                            visible: wallpaperMouseArea.containsMouse

                            Row {
                                anchors.centerIn: parent
                                spacing: Theme.spacingXS

                                Rectangle {
                                    width: 32
                                    height: 32
                                    radius: 16
                                    color: Qt.rgba(255, 255, 255, 0.9)

                                    DankIcon {
                                        anchors.centerIn: parent
                                        name: "folder_open"
                                        size: 18
                                        color: "black"
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        cursorShape: Qt.PointingHandCursor
                                        onClicked: root.openMainWallpaperBrowser()
                                    }
                                }

                                Rectangle {
                                    width: 32
                                    height: 32
                                    radius: 16
                                    color: Qt.rgba(255, 255, 255, 0.9)

                                    DankIcon {
                                        anchors.centerIn: parent
                                        name: "palette"
                                        size: 18
                                        color: "black"
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        cursorShape: Qt.PointingHandCursor
                                        onClicked: {
                                            if (!PopoutService.colorPickerModal)
                                                return;
                                            PopoutService.colorPickerModal.selectedColor = root.currentWallpaper.startsWith("#") ? root.currentWallpaper : Theme.primary;
                                            PopoutService.colorPickerModal.pickerTitle = I18n.tr("Choose Wallpaper Color", "wallpaper color picker title");
                                            PopoutService.colorPickerModal.onColorSelectedCallback = function (selectedColor) {
                                                if (SessionData.perMonitorWallpaper) {
                                                    SessionData.setMonitorWallpaper(selectedMonitorName, selectedColor);
                                                } else {
                                                    SessionData.setWallpaperColor(selectedColor);
                                                }
                                            };
                                            PopoutService.colorPickerModal.show();
                                        }
                                    }
                                }

                                Rectangle {
                                    width: 32
                                    height: 32
                                    radius: 16
                                    color: Qt.rgba(255, 255, 255, 0.9)
                                    visible: root.currentWallpaper !== ""

                                    DankIcon {
                                        anchors.centerIn: parent
                                        name: "clear"
                                        size: 18
                                        color: "black"
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        cursorShape: Qt.PointingHandCursor
                                        onClicked: {
                                            if (SessionData.perMonitorWallpaper) {
                                                SessionData.setMonitorWallpaper(selectedMonitorName, "");
                                            } else {
                                                if (Theme.currentTheme === Theme.dynamic)
                                                    Theme.switchTheme("blue");
                                                SessionData.clearWallpaper();
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        MouseArea {
                            id: wallpaperMouseArea
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            propagateComposedEvents: true
                            acceptedButtons: Qt.NoButton
                        }
                    }

                    Column {
                        width: parent.width - 160 - Theme.spacingL
                        spacing: Theme.spacingS
                        anchors.verticalCenter: parent.verticalCenter

                        StyledText {
                            text: root.currentWallpaper ? root.currentWallpaper.split('/').pop() : I18n.tr("No wallpaper selected")
                            font.pixelSize: Theme.fontSizeLarge
                            color: Theme.surfaceText
                            elide: Text.ElideMiddle
                            maximumLineCount: 1
                            width: parent.width
                            horizontalAlignment: Text.AlignLeft
                        }

                        StyledText {
                            text: root.currentWallpaper
                            font.pixelSize: Theme.fontSizeSmall
                            color: Theme.surfaceVariantText
                            elide: Text.ElideMiddle
                            maximumLineCount: 1
                            width: parent.width
                            horizontalAlignment: Text.AlignLeft
                            visible: root.currentWallpaper !== ""
                        }

                        Row {
                            anchors.left: parent.left
                            spacing: Theme.spacingS
                            layoutDirection: I18n.isRtl ? Qt.RightToLeft : Qt.LeftToRight
                            visible: root.currentWallpaper !== ""

                            DankActionButton {
                                buttonSize: 32
                                iconName: "skip_previous"
                                iconSize: Theme.iconSizeSmall
                                enabled: root.currentWallpaper && !root.currentWallpaper.startsWith("#") && !root.currentWallpaper.startsWith("we")
                                opacity: enabled ? 1 : 0.5
                                backgroundColor: Theme.surfaceContainerHigh
                                iconColor: Theme.surfaceText
                                onClicked: {
                                    if (SessionData.perMonitorWallpaper) {
                                        WallpaperCyclingService.cyclePrevForMonitor(selectedMonitorName);
                                    } else {
                                        WallpaperCyclingService.cyclePrevManually();
                                    }
                                }
                            }

                            DankActionButton {
                                buttonSize: 32
                                iconName: "skip_next"
                                iconSize: Theme.iconSizeSmall
                                enabled: root.currentWallpaper && !root.currentWallpaper.startsWith("#") && !root.currentWallpaper.startsWith("we")
                                opacity: enabled ? 1 : 0.5
                                backgroundColor: Theme.surfaceContainerHigh
                                iconColor: Theme.surfaceText
                                onClicked: {
                                    if (SessionData.perMonitorWallpaper) {
                                        WallpaperCyclingService.cycleNextForMonitor(selectedMonitorName);
                                    } else {
                                        WallpaperCyclingService.cycleNextManually();
                                    }
                                }
                            }
                        }
                    }
                }

                SettingsDropdownRow {
                    id: fillModeRow

                    readonly property var fillModes: ["Stretch", "Fit", "Fill", "Scrolling", "Tile", "TileVertically", "TileHorizontally", "Pad"]
                    readonly property var fillModeLabels: [I18n.tr("Stretch", "wallpaper fill mode"), I18n.tr("Fit", "wallpaper fill mode"), I18n.tr("Fill", "wallpaper fill mode"), I18n.tr("Scroll", "wallpaper fill mode"), I18n.tr("Tile", "wallpaper fill mode"), I18n.tr("Tile Vertically", "wallpaper fill mode"), I18n.tr("Tile Horizontally", "wallpaper fill mode"), I18n.tr("Pad", "wallpaper fill mode")]

                    tab: "wallpaper"
                    tags: ["background", "fill", "fit", "stretch", "tile", "scale"]
                    settingKey: "wallpaperFillMode"
                    text: I18n.tr("Fill Mode", "wallpaper fill mode setting")
                    description: I18n.tr("How the wallpaper is scaled to fit the screen")
                    visible: root.currentWallpaper !== "" && !root.currentWallpaper.startsWith("#")
                    dropdownWidth: 190
                    options: fillModeLabels
                    optionIcons: ["aspect_ratio", "fit_screen", "zoom_out_map", "swipe", "grid_view", "view_agenda", "view_column", "padding"]
                    onValueChanged: value => {
                        const idx = fillModeLabels.indexOf(value);
                        if (idx < 0)
                            return;
                        if (SessionData.perMonitorWallpaper) {
                            SessionData.setMonitorWallpaperFillMode(root.selectedMonitorName, fillModes[idx]);
                        } else {
                            SettingsData.set("wallpaperFillMode", fillModes[idx]);
                        }
                    }

                    Binding {
                        target: fillModeRow
                        property: "currentValue"
                        value: {
                            const mode = SessionData.perMonitorWallpaper ? SessionData.getMonitorWallpaperFillMode(root.selectedMonitorName) : SettingsData.wallpaperFillMode;
                            const idx = fillModeRow.fillModes.indexOf(mode);
                            return idx >= 0 ? fillModeRow.fillModeLabels[idx] : "";
                        }
                    }
                }

                ColorDropdownRow {
                    tab: "wallpaper"
                    tags: ["background", "color", "fill", "fit", "custom"]
                    settingKey: "wallpaperBackgroundColorMode"
                    text: I18n.tr("Background Color")
                    description: I18n.tr("Color shown for areas not covered by wallpaper")
                    visible: root.currentWallpaper !== "" && !root.currentWallpaper.startsWith("#")
                    dropdownWidth: 220
                    options: [
                        {
                            "value": "black",
                            "label": I18n.tr("Black")
                        },
                        {
                            "value": "white",
                            "label": I18n.tr("White")
                        },
                        {
                            "value": "primary",
                            "label": I18n.tr("Primary")
                        },
                        {
                            "value": "surface",
                            "label": I18n.tr("Surface Container")
                        },
                        {
                            "value": "custom",
                            "label": I18n.tr("Custom")
                        }
                    ]
                    currentMode: SettingsData.wallpaperBackgroundColorMode
                    customColor: SettingsData.wallpaperBackgroundCustomColor || "#000000"
                    pickerTitle: I18n.tr("Background Color")
                    onModeSelected: mode => SettingsData.set("wallpaperBackgroundColorMode", mode)
                    onCustomColorSelected: selectedColor => SettingsData.set("wallpaperBackgroundCustomColor", selectedColor.toString())
                }

                Rectangle {
                    width: parent.width
                    height: 1
                    color: Theme.outline
                    opacity: 0.2
                    visible: SessionData.wallpaperPath !== ""
                }

                SettingsToggleRow {
                    tab: "wallpaper"
                    tags: ["per-mode", "light", "dark", "theme"]
                    settingKey: "perModeWallpaper"
                    visible: SessionData.wallpaperPath !== ""
                    text: I18n.tr("Per-Mode Wallpapers")
                    description: I18n.tr("Set different wallpapers for light and dark mode")
                    checked: SessionData.perModeWallpaper
                    onToggled: toggled => SessionData.setPerModeWallpaper(toggled)
                }

                Column {
                    width: parent.width
                    spacing: Theme.spacingM
                    visible: SessionData.perModeWallpaper
                    leftPadding: Theme.spacingM
                    rightPadding: Theme.spacingM

                    Row {
                        width: parent.width - Theme.spacingM * 2
                        spacing: Theme.spacingL

                        Column {
                            width: (parent.width - Theme.spacingL) / 2
                            spacing: Theme.spacingS

                            StyledText {
                                text: I18n.tr("Light Mode")
                                font.pixelSize: Theme.fontSizeMedium
                                color: Theme.surfaceText
                                font.weight: Font.Medium
                            }

                            StyledRect {
                                width: parent.width
                                height: width * 9 / 16
                                radius: Theme.cornerRadius
                                color: Theme.surfaceVariant

                                ClippingRectangle {
                                    anchors.fill: parent
                                    anchors.margins: 1
                                    radius: Theme.cornerRadius - 1
                                    color: "transparent"

                                    Image {
                                        anchors.fill: parent
                                        source: {
                                            var wp = SessionData.wallpaperPathLight;
                                            if (wp === "" || wp.startsWith("#"))
                                                return "";
                                            if (wp.startsWith("file://"))
                                                wp = wp.substring(7);
                                            return "file://" + wp.split('/').map(s => encodeURIComponent(s)).join('/');
                                        }
                                        fillMode: Image.PreserveAspectCrop
                                        visible: {
                                            var lightWallpaper = SessionData.wallpaperPathLight;
                                            return lightWallpaper !== "" && !lightWallpaper.startsWith("#");
                                        }
                                        sourceSize.width: 160
                                        sourceSize.height: 160
                                        asynchronous: true
                                    }
                                }

                                Rectangle {
                                    anchors.fill: parent
                                    anchors.margins: 1
                                    radius: Theme.cornerRadius - 1
                                    color: {
                                        var lightWallpaper = SessionData.wallpaperPathLight;
                                        return lightWallpaper.startsWith("#") ? lightWallpaper : "transparent";
                                    }
                                    visible: {
                                        var lightWallpaper = SessionData.wallpaperPathLight;
                                        return lightWallpaper !== "" && lightWallpaper.startsWith("#");
                                    }
                                }

                                DankIcon {
                                    anchors.centerIn: parent
                                    name: "light_mode"
                                    size: Theme.iconSizeLarge
                                    color: Theme.surfaceVariantText
                                    visible: SessionData.wallpaperPathLight === ""
                                }

                                Rectangle {
                                    anchors.fill: parent
                                    anchors.margins: 1
                                    radius: Theme.cornerRadius - 1
                                    color: Qt.rgba(0, 0, 0, 0.7)
                                    visible: lightModeMouseArea.containsMouse

                                    Row {
                                        anchors.centerIn: parent
                                        spacing: Theme.spacingXS

                                        Rectangle {
                                            width: 28
                                            height: 28
                                            radius: 14
                                            color: Qt.rgba(255, 255, 255, 0.9)

                                            DankIcon {
                                                anchors.centerIn: parent
                                                name: "folder_open"
                                                size: 16
                                                color: "black"
                                            }

                                            MouseArea {
                                                anchors.fill: parent
                                                cursorShape: Qt.PointingHandCursor
                                                onClicked: root.openLightWallpaperBrowser()
                                            }
                                        }

                                        Rectangle {
                                            width: 28
                                            height: 28
                                            radius: 14
                                            color: Qt.rgba(255, 255, 255, 0.9)

                                            DankIcon {
                                                anchors.centerIn: parent
                                                name: "palette"
                                                size: 16
                                                color: "black"
                                            }

                                            MouseArea {
                                                anchors.fill: parent
                                                cursorShape: Qt.PointingHandCursor
                                                onClicked: {
                                                    if (!PopoutService.colorPickerModal)
                                                        return;
                                                    var lightWallpaper = SessionData.wallpaperPathLight;
                                                    PopoutService.colorPickerModal.selectedColor = lightWallpaper.startsWith("#") ? lightWallpaper : Theme.primary;
                                                    PopoutService.colorPickerModal.pickerTitle = I18n.tr("Choose Light Mode Color", "light mode wallpaper color picker title");
                                                    PopoutService.colorPickerModal.onColorSelectedCallback = function (selectedColor) {
                                                        SessionData.wallpaperPathLight = selectedColor;
                                                        SessionData.syncWallpaperForCurrentMode();
                                                        SessionData.saveSettings();
                                                    };
                                                    PopoutService.colorPickerModal.show();
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: 28
                                            height: 28
                                            radius: 14
                                            color: Qt.rgba(255, 255, 255, 0.9)
                                            visible: SessionData.wallpaperPathLight !== ""

                                            DankIcon {
                                                anchors.centerIn: parent
                                                name: "clear"
                                                size: 16
                                                color: "black"
                                            }

                                            MouseArea {
                                                anchors.fill: parent
                                                cursorShape: Qt.PointingHandCursor
                                                onClicked: {
                                                    SessionData.wallpaperPathLight = "";
                                                    SessionData.syncWallpaperForCurrentMode();
                                                    SessionData.saveSettings();
                                                }
                                            }
                                        }
                                    }
                                }

                                MouseArea {
                                    id: lightModeMouseArea
                                    anchors.fill: parent
                                    hoverEnabled: true
                                    cursorShape: Qt.PointingHandCursor
                                    propagateComposedEvents: true
                                    acceptedButtons: Qt.NoButton
                                }
                            }

                            StyledText {
                                text: {
                                    var lightWallpaper = SessionData.wallpaperPathLight;
                                    return lightWallpaper ? lightWallpaper.split('/').pop() : I18n.tr("Not set", "wallpaper not set label");
                                }
                                font.pixelSize: Theme.fontSizeSmall
                                color: Theme.surfaceVariantText
                                elide: Text.ElideMiddle
                                maximumLineCount: 1
                                width: parent.width
                            }
                        }

                        Column {
                            width: (parent.width - Theme.spacingL) / 2
                            spacing: Theme.spacingS

                            StyledText {
                                text: I18n.tr("Dark Mode")
                                font.pixelSize: Theme.fontSizeMedium
                                color: Theme.surfaceText
                                font.weight: Font.Medium
                            }

                            StyledRect {
                                width: parent.width
                                height: width * 9 / 16
                                radius: Theme.cornerRadius
                                color: Theme.surfaceVariant

                                ClippingRectangle {
                                    anchors.fill: parent
                                    anchors.margins: 1
                                    radius: Theme.cornerRadius - 1
                                    color: "transparent"

                                    Image {
                                        anchors.fill: parent
                                        source: {
                                            var wp = SessionData.wallpaperPathDark;
                                            if (wp === "" || wp.startsWith("#"))
                                                return "";
                                            if (wp.startsWith("file://"))
                                                wp = wp.substring(7);
                                            return "file://" + wp.split('/').map(s => encodeURIComponent(s)).join('/');
                                        }
                                        fillMode: Image.PreserveAspectCrop
                                        visible: {
                                            var darkWallpaper = SessionData.wallpaperPathDark;
                                            return darkWallpaper !== "" && !darkWallpaper.startsWith("#");
                                        }
                                        sourceSize.width: 160
                                        sourceSize.height: 160
                                        asynchronous: true
                                    }
                                }

                                Rectangle {
                                    anchors.fill: parent
                                    anchors.margins: 1
                                    radius: Theme.cornerRadius - 1
                                    color: {
                                        var darkWallpaper = SessionData.wallpaperPathDark;
                                        return darkWallpaper.startsWith("#") ? darkWallpaper : "transparent";
                                    }
                                    visible: {
                                        var darkWallpaper = SessionData.wallpaperPathDark;
                                        return darkWallpaper !== "" && darkWallpaper.startsWith("#");
                                    }
                                }

                                DankIcon {
                                    anchors.centerIn: parent
                                    name: "dark_mode"
                                    size: Theme.iconSizeLarge
                                    color: Theme.surfaceVariantText
                                    visible: SessionData.wallpaperPathDark === ""
                                }

                                Rectangle {
                                    anchors.fill: parent
                                    anchors.margins: 1
                                    radius: Theme.cornerRadius - 1
                                    color: Qt.rgba(0, 0, 0, 0.7)
                                    visible: darkModeMouseArea.containsMouse

                                    Row {
                                        anchors.centerIn: parent
                                        spacing: Theme.spacingXS

                                        Rectangle {
                                            width: 28
                                            height: 28
                                            radius: 14
                                            color: Qt.rgba(255, 255, 255, 0.9)

                                            DankIcon {
                                                anchors.centerIn: parent
                                                name: "folder_open"
                                                size: 16
                                                color: "black"
                                            }

                                            MouseArea {
                                                anchors.fill: parent
                                                cursorShape: Qt.PointingHandCursor
                                                onClicked: root.openDarkWallpaperBrowser()
                                            }
                                        }

                                        Rectangle {
                                            width: 28
                                            height: 28
                                            radius: 14
                                            color: Qt.rgba(255, 255, 255, 0.9)

                                            DankIcon {
                                                anchors.centerIn: parent
                                                name: "palette"
                                                size: 16
                                                color: "black"
                                            }

                                            MouseArea {
                                                anchors.fill: parent
                                                cursorShape: Qt.PointingHandCursor
                                                onClicked: {
                                                    if (!PopoutService.colorPickerModal)
                                                        return;
                                                    var darkWallpaper = SessionData.wallpaperPathDark;
                                                    PopoutService.colorPickerModal.selectedColor = darkWallpaper.startsWith("#") ? darkWallpaper : Theme.primary;
                                                    PopoutService.colorPickerModal.pickerTitle = I18n.tr("Choose Dark Mode Color", "dark mode wallpaper color picker title");
                                                    PopoutService.colorPickerModal.onColorSelectedCallback = function (selectedColor) {
                                                        SessionData.wallpaperPathDark = selectedColor;
                                                        SessionData.syncWallpaperForCurrentMode();
                                                        SessionData.saveSettings();
                                                    };
                                                    PopoutService.colorPickerModal.show();
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: 28
                                            height: 28
                                            radius: 14
                                            color: Qt.rgba(255, 255, 255, 0.9)
                                            visible: SessionData.wallpaperPathDark !== ""

                                            DankIcon {
                                                anchors.centerIn: parent
                                                name: "clear"
                                                size: 16
                                                color: "black"
                                            }

                                            MouseArea {
                                                anchors.fill: parent
                                                cursorShape: Qt.PointingHandCursor
                                                onClicked: {
                                                    SessionData.wallpaperPathDark = "";
                                                    SessionData.syncWallpaperForCurrentMode();
                                                    SessionData.saveSettings();
                                                }
                                            }
                                        }
                                    }
                                }

                                MouseArea {
                                    id: darkModeMouseArea
                                    anchors.fill: parent
                                    hoverEnabled: true
                                    cursorShape: Qt.PointingHandCursor
                                    propagateComposedEvents: true
                                    acceptedButtons: Qt.NoButton
                                }
                            }

                            StyledText {
                                text: {
                                    var darkWallpaper = SessionData.wallpaperPathDark;
                                    return darkWallpaper ? darkWallpaper.split('/').pop() : I18n.tr("Not set", "wallpaper not set label");
                                }
                                font.pixelSize: Theme.fontSizeSmall
                                color: Theme.surfaceVariantText
                                elide: Text.ElideMiddle
                                maximumLineCount: 1
                                width: parent.width
                            }
                        }
                    }
                }

                Rectangle {
                    width: parent.width
                    height: 1
                    color: Theme.outline
                    opacity: 0.2
                    visible: CompositorService.isNiri
                }

                SettingsToggleRow {
                    tab: "wallpaper"
                    tags: ["blur", "overview", "niri"]
                    settingKey: "blurWallpaperOnOverview"
                    visible: CompositorService.isNiri
                    text: I18n.tr("Blur on Overview")
                    description: I18n.tr("Blur wallpaper when niri overview is open")
                    checked: SettingsData.blurWallpaperOnOverview
                    onToggled: checked => SettingsData.set("blurWallpaperOnOverview", checked)
                }

                Rectangle {
                    width: parent.width
                    height: 1
                    color: Theme.outline
                    opacity: 0.2
                    visible: SessionData.wallpaperPath !== ""
                }

                SettingsToggleRow {
                    tab: "wallpaper"
                    tags: ["per-monitor", "multi-monitor", "display"]
                    settingKey: "perMonitorWallpaper"
                    visible: SessionData.wallpaperPath !== ""
                    text: I18n.tr("Per-Monitor Wallpapers")
                    description: I18n.tr("Set different wallpapers for each connected monitor")
                    checked: SessionData.perMonitorWallpaper
                    onToggled: toggled => SessionData.setPerMonitorWallpaper(toggled)
                }

                Column {
                    width: parent.width
                    spacing: Theme.spacingM
                    visible: SessionData.perMonitorWallpaper
                    leftPadding: Theme.spacingM
                    rightPadding: Theme.spacingM

                    SettingsDropdownRow {
                        tab: "wallpaper"
                        tags: ["monitor", "display", "screen"]
                        settingKey: "selectedMonitor"
                        width: parent.width - Theme.spacingM * 2
                        text: I18n.tr("Wallpaper Monitor")
                        currentValue: {
                            var screens = Quickshell.screens;
                            for (var i = 0; i < screens.length; i++) {
                                if (screens[i].name === selectedMonitorName) {
                                    return SettingsData.getScreenDisplayName(screens[i]);
                                }
                            }
                            return I18n.tr("No monitors", "no monitors available label");
                        }
                        options: {
                            var screenNames = [];
                            var screens = Quickshell.screens;
                            for (var i = 0; i < screens.length; i++) {
                                screenNames.push(SettingsData.getScreenDisplayName(screens[i]));
                            }
                            return screenNames;
                        }
                        onValueChanged: value => {
                            var screens = Quickshell.screens;
                            for (var i = 0; i < screens.length; i++) {
                                if (SettingsData.getScreenDisplayName(screens[i]) === value) {
                                    selectedMonitorName = screens[i].name;
                                    return;
                                }
                            }
                        }
                    }

                    SettingsDropdownRow {
                        tab: "wallpaper"
                        tags: ["matugen", "target", "monitor", "theming"]
                        settingKey: "matugenTargetMonitor"
                        width: parent.width - Theme.spacingM * 2
                        text: I18n.tr("Matugen Target Monitor")
                        description: I18n.tr("Monitor whose wallpaper drives dynamic theming colors")
                        currentValue: {
                            var screens = Quickshell.screens;
                            if (!SettingsData.matugenTargetMonitor || SettingsData.matugenTargetMonitor === "") {
                                return screens.length > 0 ? SettingsData.getScreenDisplayName(screens[0]) + " " + "(" + I18n.tr("Default") + ")" : I18n.tr("No monitors", "no monitors available label");
                            }
                            for (var i = 0; i < screens.length; i++) {
                                if (screens[i].name === SettingsData.matugenTargetMonitor) {
                                    return SettingsData.getScreenDisplayName(screens[i]);
                                }
                            }
                            return SettingsData.matugenTargetMonitor;
                        }
                        options: {
                            var screenNames = [];
                            var screens = Quickshell.screens;
                            for (var i = 0; i < screens.length; i++) {
                                var label = SettingsData.getScreenDisplayName(screens[i]);
                                if (i === 0 && (!SettingsData.matugenTargetMonitor || SettingsData.matugenTargetMonitor === "")) {
                                    label += " " + "(" + I18n.tr("Default") + ")";
                                }
                                screenNames.push(label);
                            }
                            return screenNames;
                        }
                        onValueChanged: value => {
                            var cleanValue = value.replace(" " + "(" + I18n.tr("Default") + ")", "");
                            var screens = Quickshell.screens;
                            for (var i = 0; i < screens.length; i++) {
                                if (SettingsData.getScreenDisplayName(screens[i]) === cleanValue) {
                                    SettingsData.setMatugenTargetMonitor(screens[i].name);
                                    return;
                                }
                            }
                        }
                    }
                }

                Rectangle {
                    width: parent.width
                    height: 1
                    color: Theme.outline
                    opacity: 0.2
                    visible: (SessionData.wallpaperPath !== "" || SessionData.perMonitorWallpaper) && !SessionData.perModeWallpaper
                }

                SettingsToggleRow {
                    id: cyclingToggle
                    tab: "wallpaper"
                    tags: ["cycling", "automatic", "rotate", "slideshow"]
                    settingKey: "wallpaperCyclingEnabled"
                    visible: (SessionData.wallpaperPath !== "" || SessionData.perMonitorWallpaper) && !SessionData.perModeWallpaper
                    text: I18n.tr("Automatic Cycling")
                    description: I18n.tr("Automatically cycle through wallpapers in the same folder")
                    checked: SessionData.perMonitorWallpaper ? SessionData.getMonitorCyclingSettings(selectedMonitorName).enabled : SessionData.wallpaperCyclingEnabled
                    onToggled: toggled => {
                        if (SessionData.perMonitorWallpaper) {
                            SessionData.setMonitorCyclingEnabled(selectedMonitorName, toggled);
                        } else {
                            SessionData.setWallpaperCyclingEnabled(toggled);
                        }
                    }

                    Connections {
                        target: root
                        function onSelectedMonitorNameChanged() {
                            cyclingToggle.checked = Qt.binding(() => {
                                return SessionData.perMonitorWallpaper ? SessionData.getMonitorCyclingSettings(selectedMonitorName).enabled : SessionData.wallpaperCyclingEnabled;
                            });
                        }
                    }
                }

                Column {
                    width: parent.width
                    spacing: Theme.spacingM
                    visible: SessionData.perMonitorWallpaper ? SessionData.getMonitorCyclingSettings(selectedMonitorName).enabled : SessionData.wallpaperCyclingEnabled
                    leftPadding: Theme.spacingM
                    rightPadding: Theme.spacingM

                    Row {
                        spacing: Theme.spacingL
                        width: parent.width - Theme.spacingM * 2

                        StyledText {
                            text: I18n.tr("Mode") + ":"
                            font.pixelSize: Theme.fontSizeMedium
                            color: Theme.surfaceText
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        Item {
                            width: 200
                            height: 45 + Theme.spacingM

                            DankTabBar {
                                id: modeTabBar
                                width: 200
                                height: 45
                                model: [
                                    {
                                        "text": I18n.tr("Interval", "wallpaper cycling mode tab"),
                                        "icon": "schedule"
                                    },
                                    {
                                        "text": I18n.tr("Time", "wallpaper cycling mode tab"),
                                        "icon": "access_time"
                                    }
                                ]
                                currentIndex: {
                                    if (SessionData.perMonitorWallpaper) {
                                        return SessionData.getMonitorCyclingSettings(selectedMonitorName).mode === "time" ? 1 : 0;
                                    }
                                    return SessionData.wallpaperCyclingMode === "time" ? 1 : 0;
                                }
                                onTabClicked: index => {
                                    if (SessionData.perMonitorWallpaper) {
                                        SessionData.setMonitorCyclingMode(selectedMonitorName, index === 1 ? "time" : "interval");
                                    } else {
                                        SessionData.setWallpaperCyclingMode(index === 1 ? "time" : "interval");
                                    }
                                }

                                Connections {
                                    target: root
                                    function onSelectedMonitorNameChanged() {
                                        modeTabBar.currentIndex = Qt.binding(() => {
                                            if (SessionData.perMonitorWallpaper) {
                                                return SessionData.getMonitorCyclingSettings(selectedMonitorName).mode === "time" ? 1 : 0;
                                            }
                                            return SessionData.wallpaperCyclingMode === "time" ? 1 : 0;
                                        });
                                        Qt.callLater(modeTabBar.updateIndicator);
                                    }
                                }
                            }
                        }
                    }

                    SettingsDropdownRow {
                        id: intervalDropdown
                        property var intervalOptions: [I18n.tr("5 seconds", "wallpaper interval"), I18n.tr("10 seconds", "wallpaper interval"), I18n.tr("15 seconds", "wallpaper interval"), I18n.tr("20 seconds", "wallpaper interval"), I18n.tr("25 seconds", "wallpaper interval"), I18n.tr("30 seconds", "wallpaper interval"), I18n.tr("35 seconds", "wallpaper interval"), I18n.tr("40 seconds", "wallpaper interval"), I18n.tr("45 seconds", "wallpaper interval"), I18n.tr("50 seconds", "wallpaper interval"), I18n.tr("55 seconds", "wallpaper interval"), I18n.tr("1 minute", "wallpaper interval"), I18n.tr("5 minutes", "wallpaper interval"), I18n.tr("15 minutes", "wallpaper interval"), I18n.tr("30 minutes", "wallpaper interval"), I18n.tr("1 hour", "wallpaper interval"), I18n.tr("1 hour 30 minutes", "wallpaper interval"), I18n.tr("2 hours", "wallpaper interval"), I18n.tr("3 hours", "wallpaper interval"), I18n.tr("4 hours", "wallpaper interval"), I18n.tr("6 hours", "wallpaper interval"), I18n.tr("8 hours", "wallpaper interval"), I18n.tr("12 hours", "wallpaper interval")]

                        property var intervalValues: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 300, 900, 1800, 3600, 5400, 7200, 10800, 14400, 21600, 28800, 43200]
                        tab: "wallpaper"
                        tags: ["interval", "cycling", "time", "frequency"]
                        settingKey: "wallpaperCyclingInterval"
                        width: parent.width - Theme.spacingM * 2
                        visible: {
                            if (SessionData.perMonitorWallpaper) {
                                return SessionData.getMonitorCyclingSettings(selectedMonitorName).mode === "interval";
                            }
                            return SessionData.wallpaperCyclingMode === "interval";
                        }
                        text: I18n.tr("Interval")
                        description: I18n.tr("How often to change wallpaper")
                        options: intervalOptions
                        currentValue: {
                            var currentSeconds;
                            if (SessionData.perMonitorWallpaper) {
                                currentSeconds = SessionData.getMonitorCyclingSettings(selectedMonitorName).interval;
                            } else {
                                currentSeconds = SessionData.wallpaperCyclingInterval;
                            }
                            const index = intervalValues.indexOf(currentSeconds);
                            return index >= 0 ? intervalOptions[index] : I18n.tr("5 minutes", "wallpaper interval");
                        }
                        onValueChanged: value => {
                            const index = intervalOptions.indexOf(value);
                            if (index < 0)
                                return;
                            if (SessionData.perMonitorWallpaper) {
                                SessionData.setMonitorCyclingInterval(selectedMonitorName, intervalValues[index]);
                            } else {
                                SessionData.setWallpaperCyclingInterval(intervalValues[index]);
                            }
                        }

                        Connections {
                            target: root
                            function onSelectedMonitorNameChanged() {
                                Qt.callLater(() => {
                                    var currentSeconds;
                                    if (SessionData.perMonitorWallpaper) {
                                        currentSeconds = SessionData.getMonitorCyclingSettings(selectedMonitorName).interval;
                                    } else {
                                        currentSeconds = SessionData.wallpaperCyclingInterval;
                                    }
                                    const index = intervalDropdown.intervalValues.indexOf(currentSeconds);
                                    intervalDropdown.currentValue = index >= 0 ? intervalDropdown.intervalOptions[index] : I18n.tr("5 minutes", "wallpaper interval");
                                });
                            }
                        }
                    }

                    Row {
                        spacing: Theme.spacingM
                        visible: {
                            if (SessionData.perMonitorWallpaper) {
                                return SessionData.getMonitorCyclingSettings(selectedMonitorName).mode === "time";
                            }
                            return SessionData.wallpaperCyclingMode === "time";
                        }
                        width: parent.width - Theme.spacingM * 2

                        StyledText {
                            text: I18n.tr("Daily at:")
                            font.pixelSize: Theme.fontSizeMedium
                            color: Theme.surfaceText
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        DankTextField {
                            id: timeTextField
                            width: 100
                            height: 40
                            text: {
                                if (SessionData.perMonitorWallpaper) {
                                    return SessionData.getMonitorCyclingSettings(selectedMonitorName).time;
                                }
                                return SessionData.wallpaperCyclingTime;
                            }
                            placeholderText: "00:00"
                            maximumLength: 5
                            topPadding: Theme.spacingS
                            bottomPadding: Theme.spacingS
                            onAccepted: {
                                var isValid = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/.test(text);
                                if (isValid) {
                                    if (SessionData.perMonitorWallpaper) {
                                        SessionData.setMonitorCyclingTime(selectedMonitorName, text);
                                    } else {
                                        SessionData.setWallpaperCyclingTime(text);
                                    }
                                } else {
                                    if (SessionData.perMonitorWallpaper) {
                                        text = SessionData.getMonitorCyclingSettings(selectedMonitorName).time;
                                    } else {
                                        text = SessionData.wallpaperCyclingTime;
                                    }
                                }
                            }
                            onEditingFinished: {
                                var isValid = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/.test(text);
                                if (isValid) {
                                    if (SessionData.perMonitorWallpaper) {
                                        SessionData.setMonitorCyclingTime(selectedMonitorName, text);
                                    } else {
                                        SessionData.setWallpaperCyclingTime(text);
                                    }
                                } else {
                                    if (SessionData.perMonitorWallpaper) {
                                        text = SessionData.getMonitorCyclingSettings(selectedMonitorName).time;
                                    } else {
                                        text = SessionData.wallpaperCyclingTime;
                                    }
                                }
                            }
                            anchors.verticalCenter: parent.verticalCenter

                            validator: RegularExpressionValidator {
                                regularExpression: /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/
                            }

                            Connections {
                                target: root
                                function onSelectedMonitorNameChanged() {
                                    Qt.callLater(() => {
                                        if (SessionData.perMonitorWallpaper) {
                                            timeTextField.text = SessionData.getMonitorCyclingSettings(selectedMonitorName).time;
                                        } else {
                                            timeTextField.text = SessionData.wallpaperCyclingTime;
                                        }
                                    });
                                }
                            }
                        }

                        StyledText {
                            text: I18n.tr("24-Hour Format")
                            font.pixelSize: Theme.fontSizeSmall
                            color: Theme.surfaceVariantText
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
                }

                Rectangle {
                    width: parent.width
                    height: 1
                    color: Theme.outline
                    opacity: 0.2
                }

                SettingsDropdownRow {
                    tab: "wallpaper"
                    tags: ["transition", "effect", "animation", "change"]
                    settingKey: "wallpaperTransition"
                    text: I18n.tr("Transition Effect")
                    description: I18n.tr("Visual effect used when wallpaper changes")

                    function getTransitionLabel(t) {
                        switch (t) {
                        case "random":
                            return I18n.tr("Random", "wallpaper transition option");
                        case "none":
                            return I18n.tr("None", "wallpaper transition option");
                        case "fade":
                            return I18n.tr("Fade", "wallpaper transition option");
                        case "wipe":
                            return I18n.tr("Wipe", "wallpaper transition option");
                        case "disc":
                            return I18n.tr("Disc", "wallpaper transition option");
                        case "stripes":
                            return I18n.tr("Stripes", "wallpaper transition option");
                        case "iris bloom":
                            return I18n.tr("Iris Bloom", "wallpaper transition option");
                        case "pixelate":
                            return I18n.tr("Pixelate", "wallpaper transition option");
                        case "portal":
                            return I18n.tr("Portal", "wallpaper transition option");
                        default:
                            return t.charAt(0).toUpperCase() + t.slice(1);
                        }
                    }

                    currentValue: getTransitionLabel(SessionData.wallpaperTransition)
                    options: [I18n.tr("Random", "wallpaper transition option")].concat(SessionData.availableWallpaperTransitions.map(t => getTransitionLabel(t)))
                    onValueChanged: value => {
                        const transitionMap = {};
                        transitionMap[I18n.tr("Random", "wallpaper transition option")] = "random";
                        SessionData.availableWallpaperTransitions.forEach(t => {
                            transitionMap[getTransitionLabel(t)] = t;
                        });
                        SessionData.setWallpaperTransition(transitionMap[value] || value.toLowerCase());
                    }
                }

                Column {
                    width: parent.width
                    spacing: Theme.spacingS
                    visible: SessionData.wallpaperTransition === "random"
                    leftPadding: Theme.spacingM
                    rightPadding: Theme.spacingM

                    StyledText {
                        text: I18n.tr("Include Transitions")
                        font.pixelSize: Theme.fontSizeMedium
                        color: Theme.surfaceText
                        font.weight: Font.Medium
                    }

                    StyledText {
                        text: I18n.tr("Select which transitions to include in randomization")
                        font.pixelSize: Theme.fontSizeSmall
                        color: Theme.surfaceVariantText
                        wrapMode: Text.WordWrap
                        width: parent.width - Theme.spacingM * 2
                    }

                    DankFilterChips {
                        id: transitionGroup
                        width: parent.width - Theme.spacingM * 2
                        multiSelect: true
                        model: SessionData.availableWallpaperTransitions.filter(t => t !== "none").map(t => ({
                                    "value": t,
                                    "label": t.replace(/\b\w/g, c => c.toUpperCase())
                                }))
                        selectedValues: SessionData.includedTransitions

                        onSelectionToggled: (index, selected) => {
                            const transition = model[index].value;
                            let newIncluded = SessionData.includedTransitions.slice();

                            if (selected && !newIncluded.includes(transition)) {
                                newIncluded.push(transition);
                            } else if (!selected && newIncluded.includes(transition)) {
                                newIncluded = newIncluded.filter(t => t !== transition);
                            }

                            SessionData.includedTransitions = newIncluded;
                        }
                    }
                }
            }

            SettingsCard {
                tab: "wallpaper"
                tags: ["external", "disable", "swww", "hyprpaper", "swaybg"]
                title: I18n.tr("External Wallpaper Management", "wallpaper settings external management")
                settingKey: "disableWallpaper"
                iconName: "wallpaper"

                SettingsToggleRow {
                    tab: "wallpaper"
                    tags: ["disable", "external", "management"]
                    settingKey: "disableWallpapers"
                    text: I18n.tr("Disable Built-in Wallpapers", "wallpaper settings disable toggle")
                    description: I18n.tr("Use an external wallpaper manager like swww, hyprpaper, or swaybg.", "wallpaper settings disable description")
                    checked: {
                        var prefs = SettingsData.screenPreferences?.wallpaper;
                        if (!prefs)
                            return false;
                        if (Array.isArray(prefs) && prefs.length === 0)
                            return true;
                        return false;
                    }
                    onToggled: checked => {
                        var prefs = SettingsData.screenPreferences || {};
                        var newPrefs = Object.assign({}, prefs);
                        newPrefs.wallpaper = checked ? [] : ["all"];
                        SettingsData.set("screenPreferences", newPrefs);
                    }
                }
            }

            SettingsCard {
                tab: "wallpaper"
                tags: ["blur", "layer", "niri", "compositor"]
                title: I18n.tr("Blur Wallpaper Layer")
                settingKey: "blurWallpaper"
                iconName: "blur_on"
                visible: CompositorService.isNiri

                SettingsToggleRow {
                    tab: "wallpaper"
                    tags: ["blur", "duplicate", "layer", "compositor"]
                    settingKey: "blurredWallpaperLayer"
                    text: I18n.tr("Duplicate Wallpaper with Blur")
                    description: I18n.tr("Enable compositor-targetable blur layer (namespace: dms:blurwallpaper). Requires manual niri configuration.")
                    checked: SettingsData.blurredWallpaperLayer
                    onToggled: checked => SettingsData.set("blurredWallpaperLayer", checked)
                }
            }
        }
    }

    function openMainWallpaperBrowser() {
        mainWallpaperBrowserLoader.active = true;
        if (mainWallpaperBrowserLoader.item)
            mainWallpaperBrowserLoader.item.open();
    }

    function openLightWallpaperBrowser() {
        lightWallpaperBrowserLoader.active = true;
        if (lightWallpaperBrowserLoader.item)
            lightWallpaperBrowserLoader.item.open();
    }

    function openDarkWallpaperBrowser() {
        darkWallpaperBrowserLoader.active = true;
        if (darkWallpaperBrowserLoader.item)
            darkWallpaperBrowserLoader.item.open();
    }

    LazyLoader {
        id: mainWallpaperBrowserLoader
        active: false

        FileBrowserModal {
            parentModal: root.parentModal
            browserTitle: I18n.tr("Select Wallpaper", "wallpaper file browser title")
            browserIcon: "wallpaper"
            browserType: "wallpaper"
            showHiddenFiles: true
            fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp", "*.jxl", "*.avif", "*.heif", "*.exr"]
            onFileSelected: path => {
                if (SessionData.perMonitorWallpaper) {
                    SessionData.setMonitorWallpaper(selectedMonitorName, path);
                } else {
                    SessionData.setWallpaper(path);
                }
                close();
            }
        }
    }

    LazyLoader {
        id: lightWallpaperBrowserLoader
        active: false

        FileBrowserModal {
            parentModal: root.parentModal
            browserTitle: I18n.tr("Select Wallpaper", "light mode wallpaper file browser title")
            browserIcon: "light_mode"
            browserType: "wallpaper"
            showHiddenFiles: true
            fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp", "*.jxl", "*.avif", "*.heif", "*.exr"]
            onFileSelected: path => {
                SessionData.wallpaperPathLight = path;
                SessionData.syncWallpaperForCurrentMode();
                SessionData.saveSettings();
                close();
            }
        }
    }

    LazyLoader {
        id: darkWallpaperBrowserLoader
        active: false

        FileBrowserModal {
            parentModal: root.parentModal
            browserTitle: I18n.tr("Select Wallpaper", "dark mode wallpaper file browser title")
            browserIcon: "dark_mode"
            browserType: "wallpaper"
            showHiddenFiles: true
            fileExtensions: ["*.jpg", "*.jpeg", "*.png", "*.bmp", "*.gif", "*.webp", "*.jxl", "*.avif", "*.heif", "*.exr"]
            onFileSelected: path => {
                SessionData.wallpaperPathDark = path;
                SessionData.syncWallpaperForCurrentMode();
                SessionData.saveSettings();
                close();
            }
        }
    }
}
