pragma ComponentBehavior: Bound
import QtQuick

Item {
    id: overlay

    required property Theme theme
    required property Noko nokoService
    required property Niri niriService
    property int barHeight: 0
    property string orientation: "horizontal"
    readonly property string phase: nokoService ? nokoService.overlayState : ""
    property int tick: 0
    readonly property color accent: !theme ? "white" : (phase === "finished" ? theme.info : theme.ui.accent)
    readonly property bool verticalBar: orientation === "vertical"
    readonly property real usableX: verticalBar ? barHeight : 0
    readonly property real usableY: verticalBar ? 0 : barHeight
    readonly property real usableWidth: Math.max(1, width - usableX)
    readonly property real usableHeight: Math.max(1, height - usableY)
    readonly property real tabX: Math.round(usableX + usableWidth / 2 - statusTab.width / 2)
    readonly property real tabY: Math.round(usableY + 18)

    visible: phase.length > 0
    opacity: visible ? 1 : 0

    Timer {
        interval: 90
        repeat: true
        running: overlay.visible && overlay.phase !== "finished"
        onTriggered: overlay.tick++
    }

    Rectangle {
        id: statusTab

        x: overlay.tabX
        y: overlay.tabY
        width: Math.max(178, tabRow.implicitWidth + 28)
        height: 42
        radius: 14
        color: overlay.theme ? overlay.theme.withAlpha(overlay.theme.ui.backdrop, 0.92) : "#222"
        border.width: 1
        border.color: overlay.theme ? overlay.theme.withAlpha(overlay.accent, 0.48) : "white"

        Row {
            id: tabRow

            anchors.centerIn: parent
            spacing: 12

            NuguText {
                anchors.verticalCenter: parent.verticalCenter
                theme: overlay.theme
                variant: "title"
                font.pixelSize: 13
                text: overlay.phase
                color: overlay.accent
            }

            Row {
                visible: overlay.phase !== "finished"
                anchors.verticalCenter: parent.verticalCenter
                spacing: 3
                height: 24

                Repeater {
                    model: 7

                    Rectangle {
                        required property int index

                        anchors.verticalCenter: parent.verticalCenter
                        width: 3
                        height: 7 + Math.abs(Math.sin(overlay.tick / (overlay.phase === "transcribing" ? 2.8 : 1.8) + index)) * 17
                        radius: 2
                        color: overlay.accent
                        opacity: 0.82

                        Behavior on height {
                            NumberAnimation {
                                duration: overlay.theme && overlay.theme.lowPowerMode ? 0 : 90
                                easing.type: Easing.OutCubic
                            }
                        }
                    }
                }
            }

            Text {
                visible: overlay.phase === "finished"
                anchors.verticalCenter: parent.verticalCenter
                text: "✓"
                color: overlay.accent
                font.family: "IBM Plex Mono"
                font.pixelSize: 16
                font.bold: true
            }
        }
    }
}