StatusBar.qml

import QtQuick
import QtQuick.Controls

Item {
    id: root

    // ── Public API ──
    property string currentTime: "14:32"
    property real outdoorTemp: 18
    property real rangeKm: 412
    property string driveMode: "ECO"
    property bool leftSignal: false
    property bool rightSignal: false
    property color borderAccent: "#262d3d"

    // ── NEW: integrated controls ──
    property bool useMph: false
    property string currentTheme: "Carbon"
    property var themeList: ["Carbon"]
    property bool showStimulator: true

    // ── NEW: signals out for Main to react to ──
    signal toggleUnitsRequested()
    signal themeSelected(string themeName)
    signal toggleStimulatorRequested()

    implicitWidth: 800
    implicitHeight: 44

    Rectangle {
        anchors.fill: parent
        radius: 8
        color: "#10141f"
        border.color: root.borderAccent
        border.width: 1.5
        Behavior on border.color { ColorAnimation { duration: 400 } }
    }

    readonly property color driveModeColor:
        driveMode === "SPORT" ? "#ff5252"
        : driveMode === "ECO" ? "#00c896"
        : "#00ADEF"

    // ── Left turn signal ──
    Text {
        id: leftArrow
        anchors.left: parent.left
        anchors.leftMargin: 14
        anchors.verticalCenter: parent.verticalCenter
        text: "◀"
        font.pixelSize: 18
        color: root.leftSignal ? "#00c896" : "#262d3d"
        opacity: root.leftSignal ? blinker.flash : 1
    }

    // ── Time + temp + range (left side) ──
    Row {
        anchors.left: leftArrow.right
        anchors.leftMargin: 22
        anchors.verticalCenter: parent.verticalCenter
        spacing: 22

        Text {
            text: root.currentTime
            color: "#e8eaed"
            font.family: "Bahnschrift"
            font.pixelSize: 14
            font.weight: Font.Medium
        }
        Text {
            text: root.outdoorTemp.toFixed(0) + "°C"
            color: "#8a92a8"
            font.family: "Bahnschrift"
            font.pixelSize: 12
            anchors.verticalCenter: parent.verticalCenter
        }
        Text {
            text: "Range " + root.rangeKm + " km"
            color: "#8a92a8"
            font.family: "Bahnschrift"
            font.pixelSize: 12
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    // ── Center: drive mode ──
    Text {
        anchors.centerIn: parent
        text: root.driveMode
        color: root.driveModeColor
        font.family: "Bahnschrift"
        font.pixelSize: 13
        font.weight: Font.Medium
        font.letterSpacing: 2
    }

    // ── Integrated controls (right side, before turn signal) ──
    Row {
        anchors.right: rightArrow.left
        anchors.rightMargin: 14
        anchors.verticalCenter: parent.verticalCenter
        spacing: 6

        // Unit toggle
        Text {
            anchors.verticalCenter: parent.verticalCenter
            text: root.useMph ? "mph" : "km/h"
            color: "#8a92a8"
            font.family: "Bahnschrift"
            font.pixelSize: 11
            font.weight: Font.Medium
            font.letterSpacing: 1.0

            MouseArea {
                anchors.fill: parent
                anchors.margins: -6        // larger click area
                cursorShape: Qt.PointingHandCursor
                onClicked: root.toggleUnitsRequested()
                hoverEnabled: true
                onEntered: parent.color = "#ffffff"
                onExited:  parent.color = "#8a92a8"
            }

            ToolTip.visible: false  // simple hover handled above
        }

        // Vertical separator
        Rectangle {
            width: 1
            height: 14
            color: "#3a4254"
            anchors.verticalCenter: parent.verticalCenter
        }

        // Theme picker (gear icon → opens menu)
        Item {
            width: 18
            height: 18
            anchors.verticalCenter: parent.verticalCenter

            Text {
                anchors.centerIn: parent
                text: "⚙"
                color: themeMouse.containsMouse ? "#ffffff" : "#8a92a8"
                font.pixelSize: 14

                Behavior on color { ColorAnimation { duration: 150 } }
            }

            MouseArea {
                id: themeMouse
                anchors.fill: parent
                anchors.margins: -4
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onClicked: themeMenu.open()
            }

            Menu {
                id: themeMenu
                y: parent.height + 4

                Repeater {
                    model: root.themeList
                    MenuItem {
                        text: modelData
                        onTriggered: root.themeSelected(modelData)

                        contentItem: Text {
                            text: modelData
                            color: modelData === root.currentTheme ? "#00ADEF" : "#e8eaed"
                            font.family: "Bahnschrift"
                            font.pixelSize: 11
                        }
                    }
                }
            }
        }

        // Vertical separator
        Rectangle {
            width: 1
            height: 14
            color: "#3a4254"
            anchors.verticalCenter: parent.verticalCenter
        }

        // Demo mode toggle (small minus / hamburger)
        Text {
            anchors.verticalCenter: parent.verticalCenter
            text: root.showStimulator ? "−" : "≡"
            color: demoMouse.containsMouse ? "#ffffff" : "#8a92a8"
            font.pixelSize: 14
            font.weight: Font.Bold

            Behavior on color { ColorAnimation { duration: 150 } }

            MouseArea {
                id: demoMouse
                anchors.fill: parent
                anchors.margins: -6
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onClicked: root.toggleStimulatorRequested()
            }
        }
    }

    // ── Right turn signal ──
    Text {
        id: rightArrow
        anchors.right: parent.right
        anchors.rightMargin: 14
        anchors.verticalCenter: parent.verticalCenter
        text: "▶"
        font.pixelSize: 18
        color: root.rightSignal ? "#00c896" : "#262d3d"
        opacity: root.rightSignal ? blinker.flash : 1
    }

    // Blinker
    Item {
        id: blinker
        property real flash: 1
        SequentialAnimation on flash {
            running: root.leftSignal || root.rightSignal
            loops: Animation.Infinite
            NumberAnimation { from: 1; to: 0.2; duration: 400 }
            NumberAnimation { from: 0.2; to: 1; duration: 400 }
        }
    }
}