import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "." as DesktopSelectModule

Rectangle {
    id: root
    color: "#1a1b1d"

    // Function to update language - called from C++
    function updateLanguage() {
        DesktopSelectModule.Translations.setLanguage(systemLocale)
    }

    // Initialize translations on load
    Component.onCompleted: {
        DesktopSelectModule.Translations.setLanguage(systemLocale)
    }

    // Nagy külső keret - cím, banner, kártyák mind benne
    Rectangle {
        anchors.fill: parent
        anchors.margins: 20
        color: "#232427"
        border.color: "#34363a"
        border.width: 1

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

            // Cím
            Text {
                text: DesktopSelectModule.Translations.title
                font.pixelSize: 24
                font.bold: true
                color: "#e8e8e6"
            }

            // Figyelmeztető banner
            Rectangle {
                Layout.fillWidth: true
                height: 50
                color: "#2e2a20"
                border.color: "#d9a441"
                border.width: 1

                Text {
                    anchors.centerIn: parent
                    text: DesktopSelectModule.Translations.banner
                    color: "#f0dcb0"
                    font.pixelSize: 13
                }
            }

            // Kártyák
            ListView {
                id: desktopList
                Layout.fillWidth: true
                Layout.fillHeight: true
                spacing: 8
                clip: true
                model: backend.desktops

                delegate: Rectangle {
                    id: card
                    width: desktopList.width
                    height: 78

                    property bool selectable: modelData.available !== false

                    color: !selectable ? "#1f2022" : (backend.selectedIndex === index ? "#24301f" : "#1a1b1d")
                    border.color: !selectable ? "#34363a" : (backend.selectedIndex === index ? "#62a052" : "#44464b")
                    border.width: backend.selectedIndex === index ? 2 : 1

                    RowLayout {
                        anchors.fill: parent
                        anchors.leftMargin: 16
                        anchors.rightMargin: 16
                        spacing: 12

                        Column {
                            Layout.fillWidth: true
                            spacing: 5

                            Text {
                                text: modelData.name || ""
                                color: card.selectable ? "#e8e8e6" : "#9a9ca1"
                                font.pixelSize: 15
                                font.bold: true
                            }

                            Text {
                                text: modelData.description || ""
                                color: card.selectable ? "#b7b9bd" : "#7d7f84"
                                font.pixelSize: 12
                                width: parent.width
                                elide: Text.ElideRight
                            }
                        }

                        Rectangle {
                            width: badgeText.implicitWidth + 20
                            height: 28
                            color: modelData.badge_color || "#44464b"

                            Text {
                                id: badgeText
                                anchors.centerIn: parent
                                text: modelData.badge || ""
                                color: "#1a1b1d"
                                font.pixelSize: 11
                                font.bold: true
                            }
                        }
                    }

                    MouseArea {
                        anchors.fill: parent
                        cursorShape: card.selectable ? Qt.PointingHandCursor : Qt.ArrowCursor
                        enabled: card.selectable
                        onClicked: backend.selectDesktop(index)
                    }
                }
            }
        }
    }
}