import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import ISC

RowLayout {
    spacing: 2

    component TBtn: Button {
        implicitWidth: 44
        implicitHeight: 32
        hoverEnabled: true
        font.pixelSize: 13
        background: Rectangle {
            color: parent.pressed ? Theme.transportButtonHover
                 : parent.hovered ? Theme.transportButtonBg
                 : Theme.transportBackground
            radius: Theme.radiusSm
        }
        contentItem: Text {
            text: parent.text
            color: Theme.headingColor
            font: parent.font
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }

    // Left fill — centers the button cluster
    Item { Layout.fillWidth: true }

    TBtn { text: "⏮"; onClicked: streamController.step(-1) }
    TBtn { text: "⏹"; onClicked: streamController.stop() }
    TBtn { text: "⏸"; onClicked: streamController.pause() }
    // Play: slightly wider; leftPadding nudge compensates for ▶ optical offset
    TBtn {
        text: "▶"
        implicitWidth: 52
        contentItem: Text {
            text: parent.text
            color: Theme.headingColor
            font: parent.font
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            leftPadding: 2
        }
        onClicked: streamController.play()
    }
    TBtn { text: "⏭"; onClicked: streamController.step(1) }

    // Right fill — balances centering
    Item { Layout.fillWidth: true }

    // Speed cycle
    Button {
        id: speedBtn
        property var speeds: [1, 2, 5]
        property int idx: 0
        implicitWidth: 44
        implicitHeight: 32
        hoverEnabled: true
        text: speeds[idx] + "×"
        font.pixelSize: 11
        font.weight: Font.Medium
        background: Rectangle {
            color: parent.pressed ? Theme.transportButtonHover
                 : parent.hovered ? Theme.transportButtonBg
                 : Theme.transportBackground
            radius: Theme.radiusSm
        }
        contentItem: Text {
            text: parent.text
            color: Theme.bodyColor
            font: parent.font
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
        onClicked: {
            idx = (idx + 1) % speeds.length
            streamController.setSpeed(speeds[idx])
        }
    }

    Item { width: 8 }

    Label {
        text: "frame " + (streamController.frameIndex + 1) + " / " + streamController.frameTotal
        color: Theme.bodyColor
        font.pixelSize: 11
    }
}