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

// ===== Control Bar =====
// Review-mode transport footer (frame counter, play/pause/step, speed).
// Live-mode's Received/Errors/Stop moved to ReadoutPanel's "LIVE STREAM"
// card so this bar can collapse to zero height and free vertical space for
// the trend chart while streaming.
Item {
    id: bar
    Layout.fillWidth: true
    implicitHeight: hasContent ? 80 : 0
    Behavior on implicitHeight {
        NumberAnimation { duration: Theme.durationBase; easing.type: Theme.easeStandard }
    }
    clip: true

    // Only shown in review mode, and only once a file is loaded
    readonly property bool hasContent: streamController.mode !== "live" && streamController.loadedFile !== ""

    // ── REVIEW MODE ──────────────────────────────────────────────
    Item {
        id: reviewContent
        anchors.fill: parent

        // Single centered pill for frame counter + transport + speed
        Rectangle {
            anchors.centerIn: parent
            implicitWidth: reviewRow.implicitWidth + 48
            implicitHeight: 68
            radius: Theme.radiusMd
            color: Theme.sidePanelBackground
            border.color: Theme.sideBorder
            border.width: 1

            Row {
                id: reviewRow
                anchors.centerIn: parent
                spacing: 24

                // Frame counter
                Row {
                    spacing: 6
                    anchors.verticalCenter: parent.verticalCenter

                    Label {
                        text: "Frame"
                        color: Theme.sideMutedText
                        font.family: Theme.uiFontFamily
                        font.pixelSize: Theme.fontMd
                        font.weight: Font.Medium
                        anchors.verticalCenter: parent.verticalCenter
                    }

                    TextField {
                        id: frameInput
                        text: String(streamController.frameIndex + 1)
                        font.pixelSize: Theme.fontMd
                        font.weight: Font.Medium
                        font.family: Theme.codeFontFamily
                        color: Theme.headingColor
                        verticalAlignment: TextInput.AlignVCenter
                        horizontalAlignment: TextInput.AlignHCenter
                        selectByMouse: true
                        inputMethodHints: Qt.ImhDigitsOnly
                        padding: 0
                        width: Math.max(44, contentWidth + 16)
                        height: 28
                        anchors.verticalCenter: parent.verticalCenter

                        background: Rectangle {
                            color: Theme.fieldBackground
                            radius: Theme.radiusXs
                            border.color: frameInput.activeFocus ? Theme.fieldBorderFocus : (frameInput.hovered ? Theme.fieldBorderFocus : Theme.sideBorder)
                            border.width: 1
                        }

                        onEditingFinished: {
                            var val = parseInt(text)
                            if (!isNaN(val)) {
                                var targetFrame = Math.max(1, Math.min(val, streamController.frameTotal))
                                streamController.seek(targetFrame - 1)
                            }
                            text = String(streamController.frameIndex + 1)
                        }

                        Connections {
                            target: streamController
                            function onFrameUpdated() {
                                if (!frameInput.activeFocus) {
                                    frameInput.text = String(streamController.frameIndex + 1)
                                }
                            }
                        }
                    }

                    Label {
                        text: "/ " + streamController.frameTotal
                        color: Theme.sideMutedText
                        font.family: Theme.uiFontFamily
                        font.pixelSize: Theme.fontMd
                        font.weight: Font.Medium
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }

                // Separator 1
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: 1
                    height: 36
                    color: Theme.sideBorder
                }

                // Media Buttons Row
                Row {
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 12

                    // Skip-start
                    Button {
                        id: skipStartBtn
                        anchors.verticalCenter: parent.verticalCenter
                        implicitWidth: 56
                        implicitHeight: 56
                        hoverEnabled: true
                        background: Rectangle {
                            radius: 8
                            color: skipStartBtn.pressed ? Theme.transportButtonHover
                                 : skipStartBtn.hovered ? Theme.transportButtonBg
                                 : "transparent"
                            Behavior on color {
                                ColorAnimation { duration: Theme.durationFast }
                            }
                        }
                        contentItem: IconImage {
                            source: "../icons/prev.svg"
                            width: 22; height: 22
                            sourceSize.width: 22
                            sourceSize.height: 22
                            color: Theme.headingColor
                            anchors.centerIn: parent
                        }
                        onClicked: streamController.step(-1)
                    }

                    // Stop
                    Button {
                        id: reviewStopBtn
                        anchors.verticalCenter: parent.verticalCenter
                        implicitWidth: 56
                        implicitHeight: 56
                        hoverEnabled: true
                        background: Rectangle {
                            radius: 8
                            color: reviewStopBtn.pressed ? Theme.transportButtonHover
                                 : reviewStopBtn.hovered ? Theme.transportButtonBg
                                 : "transparent"
                            Behavior on color {
                                ColorAnimation { duration: Theme.durationFast }
                            }
                        }
                        contentItem: IconImage {
                            source: "../icons/stop.svg"
                            width: 20; height: 20
                            sourceSize.width: 20
                            sourceSize.height: 20
                            color: Theme.headingColor
                            anchors.centerIn: parent
                        }
                        onClicked: streamController.stop()
                    }

                    // Play / Pause toggle
                    Button {
                        id: playPauseBtn
                        anchors.verticalCenter: parent.verticalCenter
                        implicitWidth: 56
                        implicitHeight: 56
                        hoverEnabled: true
                        background: Rectangle {
                            radius: 8
                            color: playPauseBtn.pressed ? Theme.transportButtonHover
                                 : playPauseBtn.hovered ? Theme.transportButtonBg
                                 : "transparent"
                            Behavior on color {
                                ColorAnimation { duration: Theme.durationFast }
                            }
                        }
                        contentItem: IconImage {
                            source: streamController.playing ? "../icons/pause.svg" : "../icons/play.svg"
                            width: 22; height: 22
                            sourceSize.width: 22
                            sourceSize.height: 22
                            color: Theme.headingColor
                            anchors.centerIn: parent
                        }
                        onClicked: {
                            if (streamController.playing) {
                                streamController.pause();
                            } else {
                                streamController.play();
                            }
                        }
                    }

                    // Skip-end
                    Button {
                        id: skipEndBtn
                        anchors.verticalCenter: parent.verticalCenter
                        implicitWidth: 56
                        implicitHeight: 56
                        hoverEnabled: true
                        background: Rectangle {
                            radius: 8
                            color: skipEndBtn.pressed ? Theme.transportButtonHover
                                 : skipEndBtn.hovered ? Theme.transportButtonBg
                                 : "transparent"
                            Behavior on color {
                                ColorAnimation { duration: Theme.durationFast }
                            }
                        }
                        contentItem: IconImage {
                            source: "../icons/next.svg"
                            width: 22; height: 22
                            sourceSize.width: 22
                            sourceSize.height: 22
                            color: Theme.headingColor
                            anchors.centerIn: parent
                        }
                        onClicked: streamController.step(1)
                    }
                }

                // Separator 2
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: 1
                    height: 36
                    color: Theme.sideBorder
                }

                // Speed capsule button
                Button {
                    id: speedBtn
                    anchors.verticalCenter: parent.verticalCenter
                    property var speeds: [1, 2, 4]
                    property int idx: 0
                    implicitWidth: 72
                    implicitHeight: 48
                    hoverEnabled: true
                    text: speeds[idx] + "x"
                    font.family: Theme.uiFontFamily
                    font.pixelSize: Theme.fontSm
                    font.weight: Font.Medium
                    background: Rectangle {
                        radius: 8
                        color: speedBtn.pressed ? Theme.transportButtonHover
                             : Theme.transportButtonBg
                        border.color: Theme.sideBorder
                        border.width: 1
                        Behavior on color {
                            ColorAnimation { duration: Theme.durationFast }
                        }
                    }
                    contentItem: Text {
                        text: parent.text
                        color: Theme.headingColor
                        font: parent.font
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                    onClicked: {
                        idx = (idx + 1) % speeds.length;
                        streamController.setSpeed(speeds[idx]);
                    }
                }
            }
        }
    }
}
