import QtQuick
import QtQuick.Layouts
import Nebula.Bigscreen

ColumnLayout {
    id: root

    signal goBack()

    readonly property var categories: [
        "Network",
        "Audio",
        "Display",
        "Controller",
        "System"
    ]

    property int categoryIndex: 0
    property int itemIndex: 0

    spacing: 20

    Text {
        text: "Settings"
        font: Theme.brandFont
        color: Theme.textPrimary
        Layout.leftMargin: 40
    }

    Row {
        Layout.leftMargin: 40
        spacing: 16

        Repeater {
            model: root.categories

            Rectangle {
                height: 40
                width: categoryLabel.implicitWidth + 24
                radius: 8
                color: index === root.categoryIndex ? "#22304A66" : "transparent"
                border.color: index === root.categoryIndex ? Theme.accentCyan : "transparent"
                border.width: index === root.categoryIndex ? 2 : 0

                Text {
                    id: categoryLabel
                    anchors.centerIn: parent
                    text: modelData
                    font: Theme.bodyFont
                    color: index === root.categoryIndex ? Theme.accentCyan : Theme.textMuted
                }
            }
        }
    }

    Rectangle {
        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.margins: 40
        radius: 16
        color: Theme.backgroundPanel
        border.color: Theme.accentLine

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 24
            spacing: 12

            Text {
                text: root.categories[root.categoryIndex]
                font: Theme.titleFont
                color: Theme.textPrimary
            }

            Repeater {
                model: 3

                Rectangle {
                    Layout.fillWidth: true
                    height: 52
                    radius: 10
                    color: index === root.itemIndex ? "#22304A66" : Theme.backgroundMid
                    border.color: index === root.itemIndex ? Theme.accentCyan : Theme.accentLine
                    border.width: index === root.itemIndex ? 2 : 1

                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 16
                        text: "Placeholder setting " + (index + 1)
                        font: Theme.bodyFont
                        color: Theme.textPrimary
                    }
                }
            }
        }
    }

    function handleInput(action) {
        switch (action) {
        case InputRouter.Left:
            categoryIndex = Math.max(0, categoryIndex - 1)
            break
        case InputRouter.Right:
            categoryIndex = Math.min(categories.length - 1, categoryIndex + 1)
            break
        case InputRouter.Up:
            itemIndex = Math.max(0, itemIndex - 1)
            break
        case InputRouter.Down:
            itemIndex = Math.min(2, itemIndex + 1)
            break
        case InputRouter.Back:
            root.goBack()
            break
        default:
            break
        }
    }
}