import QtQuick 2.15


// Lista orizzontale di utenti con avatar, in stile costruttivista.
// Usa il modello `userModel` esposto da SDDM (ruoli: name, realName, icon, isCurrent).
Row {

    FontLoader {
        id: themeFont
        source: "assets/fonts/RussoOne-Regular.ttf"
    }

    id: userList
    property int currentIndex: userModel.lastIndex >= 0 ? userModel.lastIndex : 0
    signal userSelected(string name)
    spacing: Math.max(8, parent.width * 0.02)

    Repeater {
        id: repeater
        model: userModel

        delegate: Rectangle {
            id: card
            required property int index
            required property string name
            required property string icon

            width: 80
            height: 100
            color: userList.currentIndex === index ? "#33d83a28" : "#cc101012"
            border.color: userList.currentIndex === index ? "#d83a28" : "#66f0dfba"
            border.width: userList.currentIndex === index ? 2 : 1

            // cornice circolare con avatar
            Rectangle {
                id: avatarFrame
                width: 54
                height: 54
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 7
                radius: width / 2
                color: "#181719"
                border.color: "#f0dfba"
                border.width: 2
                clip: true

                Image {
                    id: avatarImage
                    anchors.fill: parent
                    anchors.margins: 2
                    source: card.icon
                    fillMode: Image.PreserveAspectCrop
                    sourceSize: Qt.size(108, 108)
                    asynchronous: true
                }

                // fallback geometrico se l'avatar non è disponibile
                Text {
                    anchors.centerIn: parent
                    text: card.name.length > 0 ? card.name.charAt(0).toUpperCase() : "?"
                    color: "#f0dfba"
                    font.family: themeFont.name
                    font.pixelSize: 22
                    font.bold: true
                    visible: avatarImage.status !== Image.Ready
                }
            }

            // nome utente
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 6
                width: card.width - 6
                horizontalAlignment: Text.AlignHCenter
                elide: Text.ElideRight
                text: card.name.toUpperCase()
                color: userList.currentIndex === index ? "#f6f1e5" : "#f0dfba"
                font.family: themeFont.name
                font.pixelSize: 11
                font.bold: true
                font.letterSpacing: 1
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: userList.select(index)
            }
        }
    }

    // Seleziona l'utente all'indice i (click o tastiera).
    function select(i) {
        if (i < 0 || i >= userModel.count) return
        currentIndex = i
        var item = repeater.itemAt(i)
        if (item) {
            userSelected(item.name)
        }
    }

    Keys.onLeftPressed: select(currentIndex - 1)
    Keys.onRightPressed: select(currentIndex + 1)
}