import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ComboBox {
    id: control
    
    // Custom properties
    property color accentColor: SettingsStyle.accent
    property color bgColor: "#1a1a20"
    property color popupColor: "#252530"

    Accessible.role: Accessible.ComboBox
    Accessible.name: control.displayText

    delegate: ItemDelegate {
        id: delegate
        width: control.width
        height: 40
        padding: 0
        
        contentItem: RowLayout {
            spacing: 8
            width: parent.width
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            
            Text {
                text: control.textRole ? (modelData[control.textRole] || modelData) : modelData
                color: highlighted ? control.accentColor : "#ffffff"
                font.family: "JetBrains Mono"
                font.pixelSize: 14
                elide: Text.ElideRight
                Layout.fillWidth: true
                verticalAlignment: Text.AlignVCenter
                scale: highlighted ? 1.05 : 1.0
                Behavior on scale { NumberAnimation { duration: 100 } }
            }

            // Indicator for "Downloaded" or "Active"
            Rectangle {
                width: 6; height: 6; radius: 3
                color: control.accentColor
                visible: ui.isModelDownloaded(modelData) 
                Layout.alignment: Qt.AlignVCenter
            }
        }

        background: Rectangle {
            color: highlighted ? Qt.rgba(control.accentColor.r, control.accentColor.g, control.accentColor.b, 0.1) : "transparent"
            radius: 4
            Behavior on color { ColorAnimation { duration: 100 } }
        }
    }

    indicator: Canvas {
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 8
        contextType: "2d"

        Connections {
            target: control
            function onPressedChanged() { control.indicator.requestPaint() }
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = control.pressed ? control.accentColor : "#ABABAB";
            context.fill();
        }
    }

    contentItem: Text {
        leftPadding: 10
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font.family: "JetBrains Mono"
        font.pixelSize: 14
        color: control.pressed ? control.accentColor : "#ffffff"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 140
        implicitHeight: 40
        color: control.bgColor
        border.color: control.pressed || control.activeFocus ? control.accentColor : SettingsStyle.borderSubtle
        border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
        radius: 6
        
        // Glow effect on focus (Simplified to just border for stability)
        Behavior on border.color { ColorAnimation { duration: 150 } }
    }

    popup: Popup {
        y: control.height - 1
        width: control.width
        implicitHeight: Math.min(contentItem.implicitHeight, 300)
        padding: 5

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            color: control.popupColor
            border.color: SettingsStyle.borderSubtle
            border.width: 1
            radius: 6
        }
        
        enter: Transition {
            NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 100 }
            NumberAnimation { property: "scale"; from: 0.95; to: 1.0; duration: 100 }
        }
    }
}