// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 2 as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.

import QtQuick
import "../.."

// Colour schemes from unified-desktop-theme, each with its swatches and a mock
// of a panel in its colours. Clicking one stages it; Apply in the header runs
// install.sh, as the wallpaper page does.
Column {
    id: tab
    spacing: 10

    Repeater {
        model: Udt.names

        Rectangle {
            required property string modelData
            // What a search hit scrolls to (ThemeModule's searchItems key).
            objectName: modelData
            readonly property var sw: Udt.swatches[modelData] ?? ({})
            readonly property bool isCurrent: Udt.current === modelData
            readonly property bool isPending: Udt.pending === modelData && !isCurrent

            width: tab.width
            implicitHeight: 96
            radius: 10
            color: hover.hovered ? Qt.alpha(Theme.surface, 0.75)
                                 : Qt.alpha(Theme.surface, 0.35)
            border.width: 1
            border.color: isPending ? Theme.yellow
                        : isCurrent ? Qt.alpha(Theme.accent, 0.6) : "transparent"

            HoverHandler { id: hover }
            MouseArea {
                anchors.fill: parent
                enabled: !Udt.applying
                cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
                onClicked: Udt.pending = isCurrent ? "" : modelData
            }

            Row {
                anchors.fill: parent
                anchors.margins: 14
                spacing: 16

                // A mock of the desktop in that scheme's colours:
                // swatches alone say what the colours are, this
                // says how they sit together.
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: 150; height: 68
                    radius: 6
                    color: sw.bg ?? Theme.base
                    border.width: 1
                    border.color: Qt.alpha(sw.text ?? Theme.text, 0.15)
                    clip: true

                    Column {
                        anchors.fill: parent
                        anchors.margins: 7
                        spacing: 5

                        Row {
                            spacing: 4
                            Rectangle {
                                width: 26; height: 8; radius: 2
                                color: sw.accent ?? Theme.accent
                            }
                            Rectangle {
                                width: 16; height: 8; radius: 2
                                color: sw.surface ?? Theme.surface
                            }
                            Rectangle {
                                width: 16; height: 8; radius: 2
                                color: sw.surface ?? Theme.surface
                            }
                        }

                        Rectangle {
                            width: parent.width; height: 20; radius: 3
                            color: sw.surface ?? Theme.surface

                            Rectangle {
                                anchors.verticalCenter: parent.verticalCenter
                                x: 5; width: 60; height: 5; radius: 2
                                color: Qt.alpha(sw.text ?? Theme.text, 0.75)
                            }
                            Rectangle {
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.right: parent.right
                                anchors.rightMargin: 5
                                width: 22; height: 9; radius: 3
                                color: sw.accent ?? Theme.accent
                            }
                        }

                        Row {
                            spacing: 4
                            Rectangle { width: 9; height: 9; radius: 5; color: sw.green ?? Theme.green }
                            Rectangle { width: 9; height: 9; radius: 5; color: sw.yellow ?? Theme.yellow }
                            Rectangle { width: 9; height: 9; radius: 5; color: sw.red ?? Theme.red }
                        }
                    }
                }

                Column {
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8

                    Row {
                        spacing: 8
                        Text {
                            text: modelData
                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize; bold: true }
                            color: Theme.text
                        }
                        Text {
                            anchors.verticalCenter: parent.verticalCenter
                            visible: isCurrent
                            text: "current"
                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
                            color: Theme.accent
                        }
                        Text {
                            anchors.verticalCenter: parent.verticalCenter
                            visible: isPending
                            text: Udt.applying ? "applying…" : "selected"
                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
                            color: Theme.yellow
                        }
                    }

                    Row {
                        spacing: 5
                        Repeater {
                            model: [sw.bg, sw.surface, sw.text, sw.accent,
                                    sw.green, sw.yellow, sw.red]
                            Rectangle {
                                required property var modelData
                                visible: modelData !== undefined && modelData !== ""
                                width: 22; height: 22; radius: 4
                                color: modelData ?? "transparent"
                                border.width: 1
                                border.color: Qt.alpha(Theme.text, 0.1)
                            }
                        }
                    }
                }
            }
        }
    }
}