import QtQuick
import QtQuick.Controls
import QtQuick.Effects

Slider {
    id: control

    Accessible.role: Accessible.Slider
    Accessible.name: control.value.toString()
    activeFocusOnTab: true

    background: Rectangle {
        x: control.leftPadding
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: 200
        implicitHeight: 6
        width: control.availableWidth
        height: implicitHeight
        radius: 3
        color: "#2d2d3d"

        Rectangle {
            width: control.visualPosition * parent.width
            height: parent.height
            color: SettingsStyle.accent
            radius: 3
        }
    }

    handle: Item {
        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
        y: control.topPadding + control.availableHeight / 2 - height / 2
        implicitWidth: SettingsStyle.minTargetSize
        implicitHeight: SettingsStyle.minTargetSize

        // Focus ring
        Rectangle {
            anchors.centerIn: parent
            width: parent.width + SettingsStyle.focusRingWidth * 2 + 2
            height: width
            radius: width / 2
            color: "transparent"
            border.width: SettingsStyle.focusRingWidth
            border.color: SettingsStyle.accent
            visible: control.activeFocus
        }

        Rectangle {
            anchors.fill: parent
            radius: width / 2
            color: "white"
            border.color: SettingsStyle.accent
            border.width: 2

            layer.enabled: control.pressed
            layer.effect: MultiEffect {
                blurEnabled: true
                blur: 0.5
                shadowEnabled: true
                shadowColor: SettingsStyle.accent
            }
        }
    }

    // Value Readout
    Text {
        anchors.right: parent.left
        anchors.rightMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        horizontalAlignment: Text.AlignRight

        text: {
            var val = control.value
            return (val % 1 === 0) ? val.toFixed(0) : val.toFixed(1)
        }

        color: SettingsStyle.textSecondary
        font.family: "JetBrains Mono"
        font.pixelSize: 12
        font.weight: Font.Medium
    }
}