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

// ── BOX 3: Hardware Status Footer ──────────────────────────
Rectangle {
    Layout.fillWidth: true
    Layout.preferredHeight: Theme.sideFooterConnection
    visible: root.selectedTabIndex !== 1
    radius: Theme.sidePanelRadius
    border.color: Theme.sideBorder
    border.width: 1
    color: Theme.sidePanelBackground
    clip: true

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 14
        spacing: 6

        // Row 1: Title
        Label {
            text: "CONNECTION FLOW"
            color: Theme.sideMutedText
            font.family: Theme.uiFontFamily
            font.pixelSize: Theme.fontSm
            font.letterSpacing: 1.5
            font.bold: true
            Layout.fillWidth: true
            elide: Text.ElideRight
        }

        // Row 2: Port / descriptive text
        Label {
            Layout.fillWidth: true
            text: {
                if (deviceController.connectionStatus === "Connected")
                    return deviceController.selectedPort || "Connected"
                if (deviceController.selectedPort)
                    return deviceController.selectedPort
                return "No port selected"
            }
            color: Theme.bodyColor
            font.family: Theme.uiFontFamily
            font.pixelSize: Theme.fontSm
            elide: Text.ElideRight
        }

        Item { Layout.fillHeight: true }

        // Row 3: Mode chip left, status badge bottom-right
        RowLayout {
            spacing: 6
            Layout.fillWidth: true

            Rectangle {
                width: modeChipLabel.implicitWidth + 12
                height: 18
                radius: 4
                color: Theme.fieldBackground
                border.color: Theme.sideBorder
                border.width: 1

                Label {
                    id: modeChipLabel
                    anchors.centerIn: parent
                    text: streamController.mode
                        ? streamController.mode.toUpperCase() : "REVIEW"
                    color: Theme.sideMutedText
                    font.family: Theme.uiFontFamily
                    font.pixelSize: Theme.fontXs
                    font.bold: true
                    font.letterSpacing: 0.8
                }
            }

            Item { Layout.fillWidth: true }

            Rectangle {
                height: 18
                width: badgeLabel.implicitWidth + 14
                radius: 9
                color: {
                    var s = deviceController.connectionStatus
                    if (s === "Connected") return Theme.statusSuccessColor
                    if (s === "Disconnected") return Theme.statusErrorColor
                    return Theme.statusWarningColor
                }

                Label {
                    id: badgeLabel
                    anchors.centerIn: parent
                    text: deviceController.connectionStatus || "Disconnected"
                    color: Theme.statusBadgeText
                    font.pixelSize: Theme.fontXs
                    font.bold: true
                }
            }
        }
    }
}