import QtQuick
import qs.config
import qs.widgets

Rectangle {
    id: root

    required property var favorite
    required property string sourceName
    required property int index
    required property bool featured
    required property bool canMoveEarlier
    required property bool canMoveLater

    signal aliasCommitted(string id, string alias)
    signal removeRequested(string id)
    signal moveRequested(string id, int targetIndex)

    implicitHeight: 108
    radius: Theme.cardRadius
    color: Theme.alpha(Theme.bgDark, 0.7)
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.07)

    PrismEdge {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        inset: root.radius
        opacity: 0.2
    }

    Column {
        id: reorderControls
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.verticalCenter: parent.verticalCenter
        width: 30
        spacing: 4

        SettingsButton {
            width: 30
            height: 29
            text: "↑"
            enabled: root.canMoveEarlier
            activeFocusOnTab: enabled
            onClicked: root.moveRequested(root.favorite.id, root.index - 1)
            Keys.onReturnPressed: if (enabled) root.moveRequested(root.favorite.id, root.index - 1)
            Keys.onSpacePressed: if (enabled) root.moveRequested(root.favorite.id, root.index - 1)
        }

        SettingsButton {
            width: 30
            height: 29
            text: "↓"
            enabled: root.canMoveLater
            activeFocusOnTab: enabled
            onClicked: root.moveRequested(root.favorite.id, root.index + 1)
            Keys.onReturnPressed: if (enabled) root.moveRequested(root.favorite.id, root.index + 1)
            Keys.onSpacePressed: if (enabled) root.moveRequested(root.favorite.id, root.index + 1)
        }
    }

    Rectangle {
        id: aliasFrame
        anchors.left: reorderControls.right
        anchors.leftMargin: 10
        anchors.right: removeButton.left
        anchors.rightMargin: 12
        anchors.top: parent.top
        anchors.topMargin: 12
        height: 34
        radius: 8
        color: Theme.alpha(Theme.fg, aliasInput.activeFocus ? 0.075 : 0.045)
        border.width: aliasInput.activeFocus ? 2 : 1
        border.color: aliasInput.activeFocus
            ? Theme.alpha(Theme.accent, 0.78)
            : Theme.alpha(Theme.fg, 0.065)

        TextInput {
            id: aliasInput
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            activeFocusOnTab: true
            text: String(root.favorite.alias || "")
            color: Theme.fg
            selectionColor: Theme.accent
            selectedTextColor: Theme.bgDark
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.Medium
            verticalAlignment: TextInput.AlignVCenter
            selectByMouse: true
            clip: true
            onEditingFinished: root.aliasCommitted(root.favorite.id, text)

            Text {
                anchors.fill: parent
                visible: aliasInput.text === "" && !aliasInput.activeFocus
                text: root.sourceName
                color: Theme.fgDim
                font: aliasInput.font
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
        }
    }

    Text {
        anchors.left: aliasFrame.left
        anchors.right: removeButton.left
        anchors.rightMargin: 12
        anchors.top: aliasFrame.bottom
        anchors.topMargin: 7
        text: root.sourceName
        color: Theme.fgDim
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        elide: Text.ElideRight
    }

    Rectangle {
        anchors.left: aliasFrame.left
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        width: badgeCopy.implicitWidth + 14
        height: 21
        radius: Theme.pillRadius
        visible: root.featured
        color: Theme.alpha(Theme.accent, 0.1)
        border.width: 1
        border.color: Theme.alpha(Theme.accent, 0.2)

        Text {
            id: badgeCopy
            anchors.centerIn: parent
            text: "Control Center"
            color: Theme.accent
            font.family: Theme.fontFamily
            font.pixelSize: 9
            font.weight: Font.DemiBold
        }
    }

    SettingsButton {
        id: removeButton
        anchors.right: parent.right
        anchors.rightMargin: 11
        anchors.verticalCenter: parent.verticalCenter
        text: "Remove"
        activeFocusOnTab: true
        border.width: activeFocus ? 2 : 1
        border.color: activeFocus ? Theme.accent : Theme.alpha(Theme.fg, 0.08)
        onClicked: root.removeRequested(root.favorite.id)
        Keys.onReturnPressed: root.removeRequested(root.favorite.id)
        Keys.onSpacePressed: root.removeRequested(root.favorite.id)
    }
}
