pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Shapes

// Renderable visual core for the desktop telemetry rail. Runtime services stay
// in DenseBar.qml so this Item can be exercised without Wayland or Hyprland.
Item {
    id: root

    implicitWidth: 1920
    implicitHeight: 164

    readonly property color voidColor: "#0a0a0a"
    readonly property color inkColor: "#dedede"
    readonly property color mutedColor: "#858585"
    readonly property color accentColor: "#e8722a"
    readonly property color hairColor: Qt.rgba(0.87, 0.87, 0.87, 0.28)
    readonly property bool compact: width <= 1400
    readonly property string displayFont: "DepartureMono Nerd Font"
    readonly property string microFont: "DejaVu Sans Mono"

    property bool autoClock: true
    property date now: new Date()
    property string hostName: "LOCAL"
    property bool telemetryReady: false
    property bool ratesReady: false
    property real cpuFraction: 0
    property int cpuThreads: 0
    property real memoryFraction: 0
    property string memoryUsedText: "--"
    property real temperatureCelsius: NaN
    property string networkInterface: "NET"
    property string networkRxText: "--"
    property string networkTxText: "--"
    property real storageFraction: 0
    property string storageFreeText: "-- FREE"
    property var workspaceIds: [1, 2, 3, 4]
    property int activeWorkspaceId: 1
    property int trayCount: 0
    property real audioFraction: 0
    property bool audioMuted: false

    signal workspaceActivated(int workspaceId)

    function pct(value, ready) {
        return ready ? Math.round(Math.max(0, Math.min(1, value)) * 100) : 0;
    }

    function two(value) {
        return value < 10 ? "0" + value : String(value);
    }

    function timeText(value) {
        return root.two(value.getHours()) + ":" + root.two(value.getMinutes());
    }

    function dateText(value) {
        const days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
        const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
        return days[value.getDay()] + " // " + root.two(value.getDate()) + " " + months[value.getMonth()];
    }

    Timer {
        interval: 30000
        running: root.autoClock
        repeat: true
        triggeredOnStart: true
        onTriggered: root.now = new Date()
    }

    Rectangle {
        anchors.fill: parent
        color: root.voidColor
    }

    // Faint drafting grid; no gradient and deliberately subordinate to data.
    Repeater {
        model: Math.ceil(root.width / 40)
        Rectangle {
            required property int index
            x: index * 40
            width: 1
            height: root.height
            color: root.inkColor
            opacity: 0.018
        }
    }

    Repeater {
        model: Math.ceil(root.height / 40)
        Rectangle {
            required property int index
            y: index * 40
            width: root.width
            height: 1
            color: root.inkColor
            opacity: 0.018
        }
    }

    Item {
        id: array
        x: 12
        y: 8
        width: root.width - 24
        height: 92

        readonly property real identityWidth: root.compact ? 250 : 320
        readonly property real radarWidth: root.compact ? 130 : 164
        readonly property real stateWidth: root.compact ? 210 : 250
        readonly property real flexWidth: Math.max(250, (width - identityWidth - radarWidth - stateWidth - 32) / 2)

        Row {
            anchors.fill: parent
            spacing: 8

            TelemetryPanel {
                width: array.identityWidth
                height: array.height
                panelId: "001"
                title: "COMMAND LAYER"

                Text {
                    x: 12
                    y: 34
                    text: root.hostName.toUpperCase()
                    color: root.inkColor
                    font.family: root.displayFont
                    font.pixelSize: root.compact ? 20 : 25
                    font.bold: true
                    font.letterSpacing: 2
                    elide: Text.ElideRight
                    width: parent.width - 92
                }

                Text {
                    x: 13
                    y: 63
                    text: "STATUS ARRAY // " + (root.telemetryReady ? "LIVE" : "STANDBY")
                    color: root.accentColor
                    font.family: root.microFont
                    font.pixelSize: 7
                    font.letterSpacing: 1.4
                }

                Rectangle {
                    x: parent.width - 75
                    y: 36
                    width: 1
                    height: 43
                    color: root.hairColor
                }

                Rectangle {
                    x: parent.width - 62
                    y: 42
                    width: 5
                    height: 5
                    color: root.accentColor
                    opacity: root.telemetryReady ? 1 : 0.35
                }

                Text {
                    x: parent.width - 50
                    y: 38
                    text: root.telemetryReady ? "ONLINE" : "LOCAL"
                    color: root.accentColor
                    font.family: root.microFont
                    font.pixelSize: 7
                }

                Text {
                    x: parent.width - 63
                    y: 57
                    text: "NODE // " + (root.hostName || "--").toUpperCase().slice(0, 7)
                    color: root.mutedColor
                    font.family: root.microFont
                    font.pixelSize: 6
                }

                Shape {
                    x: parent.width - 63
                    y: 71
                    width: 48
                    height: 10
                    ShapePath {
                        fillColor: "transparent"
                        strokeColor: root.accentColor
                        strokeWidth: 1
                        startX: 0; startY: 6
                        PathLine { x: 11; y: 6 }
                        PathLine { x: 16; y: 1 }
                        PathLine { x: 22; y: 9 }
                        PathLine { x: 27; y: 6 }
                        PathLine { x: 48; y: 6 }
                    }
                }
            }

            TelemetryPanel {
                width: array.flexWidth
                height: array.height
                panelId: "02"
                title: "RESOURCE LATTICE"
                meta: root.telemetryReady ? "REALTIME" : "FALLBACK"

                Row {
                    x: 11
                    y: 32
                    width: parent.width - 22
                    height: 51
                    spacing: root.compact ? 7 : 12

                    MetricBlock {
                        width: (parent.width - parent.spacing * (root.compact ? 1 : 2)) / (root.compact ? 2 : 3)
                        label: "CPU"
                        value: root.cpuFraction
                        ready: root.ratesReady
                        readout: root.ratesReady ? root.pct(root.cpuFraction, true) + "%" : "--"
                        detailLeft: "CORE:" + (root.cpuThreads || "--")
                        detailRight: root.ratesReady ? "BUSY" : "PRIME"
                    }

                    MetricBlock {
                        width: (parent.width - parent.spacing * (root.compact ? 1 : 2)) / (root.compact ? 2 : 3)
                        label: "MEM"
                        value: root.memoryFraction
                        ready: root.telemetryReady
                        readout: root.telemetryReady ? root.pct(root.memoryFraction, true) + "%" : "--"
                        detailLeft: "ALLOC"
                        detailRight: root.memoryUsedText
                    }

                    MetricBlock {
                        visible: !root.compact
                        width: (parent.width - parent.spacing * 2) / 3
                        label: "THERM"
                        value: isFinite(root.temperatureCelsius) ? root.temperatureCelsius / 100 : 0
                        ready: isFinite(root.temperatureCelsius)
                        readout: isFinite(root.temperatureCelsius) ? Math.round(root.temperatureCelsius) + "°C" : "--"
                        detailLeft: "ZONE:01"
                        detailRight: isFinite(root.temperatureCelsius) && root.temperatureCelsius >= 85 ? "HOT" : "NOMINAL"
                    }
                }
            }

            TelemetryPanel {
                width: array.radarWidth
                height: array.height
                panelId: "03"
                title: "SCAN"

                RadarGauge {
                    anchors.horizontalCenter: parent.horizontalCenter
                    y: 28
                    size: 57
                    level: root.cpuFraction
                }
            }

            TelemetryPanel {
                width: array.flexWidth
                height: array.height
                panelId: "04"
                title: "CARRIER UPLINK"
                meta: root.networkInterface.toUpperCase()

                NetworkTrace {
                    x: 12
                    y: 43
                    width: parent.width - (root.compact ? 117 : 145)
                    height: 33
                    level: root.ratesReady ? root.cpuFraction : 0.25
                }

                Column {
                    anchors.right: parent.right
                    anchors.rightMargin: 14
                    y: 34
                    width: root.compact ? 92 : 116
                    spacing: 1

                    Text {
                        width: parent.width
                        text: root.networkRxText
                        horizontalAlignment: Text.AlignRight
                        color: root.accentColor
                        font.family: root.displayFont
                        font.pixelSize: root.compact ? 11 : 13
                        font.bold: true
                        elide: Text.ElideLeft
                    }
                    MicroText { width: parent.width; text: "RX // DOWN"; horizontalAlignment: Text.AlignRight }
                    Text {
                        width: parent.width
                        text: root.networkTxText
                        horizontalAlignment: Text.AlignRight
                        color: root.inkColor
                        font.family: root.displayFont
                        font.pixelSize: root.compact ? 11 : 13
                        font.bold: true
                        elide: Text.ElideLeft
                    }
                    MicroText { width: parent.width; text: "TX // UP"; horizontalAlignment: Text.AlignRight }
                }
            }

            TelemetryPanel {
                width: array.stateWidth
                height: array.height
                panelId: "05"
                title: "SYSTEM STATE"

                Row {
                    x: 10
                    y: 35
                    spacing: 6

                    StateCell { code: "N"; active: root.ratesReady; label: "NET" }
                    StateCell { code: root.audioMuted ? "M" : "A"; active: !root.audioMuted; label: "AUD" }
                    StateCell { visible: !root.compact; code: String(root.trayCount); active: root.trayCount > 0; label: "TRAY" }
                }

                Rectangle {
                    x: root.compact ? 101 : 151
                    y: 33
                    width: 1
                    height: 46
                    color: root.hairColor
                }

                Column {
                    anchors.right: parent.right
                    anchors.rightMargin: 12
                    y: 34
                    width: root.compact ? 91 : 82
                    spacing: 2

                    Text {
                        width: parent.width
                        text: root.timeText(root.now)
                        horizontalAlignment: Text.AlignRight
                        color: root.inkColor
                        font.family: root.displayFont
                        font.pixelSize: root.compact ? 20 : 22
                        font.bold: true
                        font.letterSpacing: 1
                    }
                    Text {
                        width: parent.width
                        text: root.dateText(root.now)
                        horizontalAlignment: Text.AlignRight
                        color: root.accentColor
                        font.family: root.microFont
                        font.pixelSize: 6
                        elide: Text.ElideLeft
                    }
                    MicroText { width: parent.width; text: "LOCAL TIME"; horizontalAlignment: Text.AlignRight }
                }
            }
        }
    }

    TelemetryPanel {
        id: rail
        x: 12
        y: 108
        width: root.width - 24
        height: 34
        showHeader: false
        chamfer: 10

        Row {
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.rightMargin: 10

            RailSection {
                width: root.compact ? 252 : 310
                Text {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    text: "06 // DESKTOP"
                    color: root.accentColor
                    font.family: root.microFont
                    font.pixelSize: 7
                    font.letterSpacing: 1
                }
                Row {
                    anchors.right: parent.right
                    anchors.rightMargin: 8
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 3
                    Repeater {
                        model: root.workspaceIds.slice(0, root.compact ? 4 : 6)
                        Rectangle {
                            required property var modelData
                            width: 24
                            height: 17
                            color: Number(modelData) === root.activeWorkspaceId ? Qt.rgba(0.91, 0.45, 0.16, 0.18) : "transparent"
                            border.width: 1
                            border.color: Number(modelData) === root.activeWorkspaceId ? root.accentColor : root.hairColor
                            Text {
                                anchors.centerIn: parent
                                text: root.two(Number(parent.modelData))
                                color: Number(parent.modelData) === root.activeWorkspaceId ? root.accentColor : root.mutedColor
                                font.family: root.microFont
                                font.pixelSize: 7
                            }
                            MouseArea {
                                anchors.fill: parent
                                onClicked: root.workspaceActivated(Number(parent.modelData))
                            }
                        }
                    }
                }
            }

            RailSection {
                width: root.compact ? 260 : 410
                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: "PROCESS" }
                Text {
                    x: 76
                    anchors.verticalCenter: parent.verticalCenter
                    text: "COMPOSITOR // NODE_EXPORTER // SHELL"
                    color: root.telemetryReady ? root.inkColor : root.mutedColor
                    font.family: root.microFont
                    font.pixelSize: 7
                    elide: Text.ElideRight
                    width: parent.width - 84
                }
            }

            RailSection {
                width: root.compact ? 300 : 385
                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: "VOL // ROOT" }
                Text {
                    x: 93
                    anchors.verticalCenter: parent.verticalCenter
                    text: root.storageFreeText
                    color: root.inkColor
                    font.family: root.microFont
                    font.pixelSize: 8
                }
                SegmentMeter {
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    width: root.compact ? 95 : 170
                    height: 7
                    segments: root.compact ? 10 : 16
                    value: root.storageFraction
                    ready: root.telemetryReady
                }
            }

            RailSection {
                visible: !root.compact
                width: 350
                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: "AUDIO BUS" }
                Text {
                    x: 89
                    anchors.verticalCenter: parent.verticalCenter
                    text: root.audioMuted ? "MUTED" : Math.round(root.audioFraction * 100) + "%"
                    color: root.audioMuted ? root.mutedColor : root.accentColor
                    font.family: root.microFont
                    font.pixelSize: 8
                }
                SegmentMeter {
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    width: 155
                    height: 7
                    segments: 16
                    value: root.audioFraction
                    ready: true
                }
            }

            RailSection {
                width: Math.max(150, rail.width - (root.compact ? 812 : 1455) - 20)
                borderVisible: false
                MicroText { x: 9; anchors.verticalCenter: parent.verticalCenter; text: root.compact ? "SYS // " + root.timeText(root.now) : "EVENTS" }
                Text {
                    anchors.right: parent.right
                    anchors.rightMargin: 8
                    anchors.verticalCenter: parent.verticalCenter
                    text: root.telemetryReady ? "WARN:00 // ERR:00" : "TELEMETRY WAIT"
                    color: root.telemetryReady ? root.mutedColor : root.accentColor
                    font.family: root.microFont
                    font.pixelSize: 7
                    elide: Text.ElideLeft
                    width: parent.width - 64
                    horizontalAlignment: Text.AlignRight
                }
            }
        }
    }

    // Bottom routing trace and caution hatch.
    Shape {
        x: 12
        y: 150
        width: root.width - 24
        height: 12
        ShapePath {
            fillColor: "transparent"
            strokeColor: Qt.rgba(0.91, 0.45, 0.16, 0.55)
            strokeWidth: 1
            startX: 0; startY: 1
            PathLine { x: 220; y: 1 }
            PathLine { x: 232; y: 11 }
            PathLine { x: 330; y: 11 }
        }
    }

    Row {
        x: 360
        y: 151
        width: root.width - 372
        height: 3
        spacing: 5
        clip: true
        Repeater {
            model: Math.ceil(parent.width / 10)
            Rectangle {
                required property int index
                width: 5
                height: 3
                color: index % 2 === 0 ? root.accentColor : "transparent"
                opacity: 0.58
            }
        }
    }

    component MicroText: Text {
        color: root.mutedColor
        font.family: root.microFont
        font.pixelSize: 6
        font.letterSpacing: 0.7
    }

    component RailSection: Item {
        property bool borderVisible: true
        height: rail.height
        Rectangle {
            visible: parent.borderVisible
            anchors.right: parent.right
            width: 1
            height: parent.height
            color: root.hairColor
            opacity: 0.65
        }
    }

    component TelemetryPanel: Item {
        id: panel
        property string panelId: ""
        property string title: ""
        property string meta: ""
        property bool showHeader: true
        property int chamfer: 13

        Shape {
            id: panelShape
            anchors.fill: parent
            preferredRendererType: Shape.CurveRenderer
            ShapePath {
                fillColor: root.voidColor
                strokeColor: root.hairColor
                strokeWidth: 1
                startX: 1; startY: 1
                PathLine { x: panelShape.width - panel.chamfer; y: 1 }
                PathLine { x: panelShape.width - 1; y: panel.chamfer }
                PathLine { x: panelShape.width - 1; y: panelShape.height - 8 }
                PathLine { x: panelShape.width - 8; y: panelShape.height - 1 }
                PathLine { x: 16; y: panelShape.height - 1 }
                PathLine { x: 1; y: panelShape.height - 16 }
                PathLine { x: 1; y: 1 }
            }
            ShapePath {
                fillColor: root.accentColor
                strokeWidth: 0
                startX: 1; startY: 1
                PathLine { x: Math.min(49, panelShape.width / 3); y: 1 }
                PathLine { x: Math.min(49, panelShape.width / 3); y: 3 }
                PathLine { x: 1; y: 3 }
                PathLine { x: 1; y: 1 }
            }
        }

        Rectangle {
            visible: panel.showHeader
            x: 1; y: 20
            width: parent.width - 2
            height: 1
            color: root.inkColor
            opacity: 0.12
        }

        Rectangle {
            visible: panel.showHeader
            x: 9; y: 5
            width: panel.panelId.length > 2 ? 29 : 24
            height: 11
            color: root.accentColor
            Text {
                anchors.centerIn: parent
                text: panel.panelId
                color: root.voidColor
                font.family: root.microFont
                font.pixelSize: 7
                font.bold: true
            }
        }

        Text {
            visible: panel.showHeader
            x: 40; y: 5
            width: parent.width - 105
            text: panel.title
            color: root.inkColor
            font.family: root.displayFont
            font.pixelSize: 9
            font.bold: true
            font.letterSpacing: 1.1
            elide: Text.ElideRight
        }

        MicroText {
            visible: panel.showHeader && panel.meta.length > 0
            anchors.right: parent.right
            anchors.rightMargin: 12
            y: 6
            text: panel.meta
            width: Math.min(80, parent.width / 4)
            horizontalAlignment: Text.AlignRight
            elide: Text.ElideRight
        }

        Row {
            visible: panel.showHeader
            anchors.right: parent.right
            anchors.rightMargin: 10
            y: 14
            spacing: 2
            Repeater {
                model: 5
                Rectangle { required property int index; width: 3; height: 1; color: root.accentColor }
            }
        }
    }

    component MetricBlock: Item {
        id: metric
        property string label: ""
        property real value: 0
        property bool ready: false
        property string readout: "--"
        property string detailLeft: ""
        property string detailRight: ""
        height: 51

        MicroText { x: 0; y: 1; text: metric.label; font.pixelSize: 7 }
        Text {
            anchors.right: parent.right
            y: -3
            text: metric.readout
            color: root.inkColor
            font.family: root.displayFont
            font.pixelSize: root.compact ? 14 : 17
            font.bold: true
        }
        SegmentMeter {
            x: 0; y: 19
            width: parent.width
            height: 9
            segments: 10
            value: metric.value
            ready: metric.ready
        }
        MicroText { x: 0; y: 34; text: metric.detailLeft }
        MicroText { anchors.right: parent.right; y: 34; text: metric.detailRight; horizontalAlignment: Text.AlignRight }
    }

    component SegmentMeter: Row {
        id: meter
        property int segments: 10
        property real value: 0
        property bool ready: false
        spacing: 2
        Repeater {
            model: meter.segments
            Rectangle {
                required property int index
                width: Math.max(2, (meter.width - (meter.segments - 1) * meter.spacing) / meter.segments)
                height: meter.height
                readonly property bool on: meter.ready && index < Math.round(Math.max(0, Math.min(1, meter.value)) * meter.segments)
                color: on ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.06)
                border.width: 1
                border.color: on ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.18)
            }
        }
    }

    component StateCell: Item {
        id: state
        property string code: "--"
        property string label: ""
        property bool active: false
        width: root.compact ? 39 : 43
        height: 42

        Shape {
            anchors.fill: parent
            ShapePath {
                fillColor: state.active ? Qt.rgba(0.91, 0.45, 0.16, 0.18) : "transparent"
                strokeColor: state.active ? root.accentColor : root.hairColor
                strokeWidth: 1
                startX: 1; startY: 1
                PathLine { x: parent.width - 7; y: 1 }
                PathLine { x: parent.width - 1; y: 7 }
                PathLine { x: parent.width - 1; y: parent.height - 1 }
                PathLine { x: 7; y: parent.height - 1 }
                PathLine { x: 1; y: parent.height - 7 }
                PathLine { x: 1; y: 1 }
            }
        }
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            y: 7
            text: state.code
            color: state.active ? root.accentColor : root.inkColor
            font.family: root.displayFont
            font.pixelSize: 13
            font.bold: true
        }
        MicroText { anchors.horizontalCenter: parent.horizontalCenter; y: 27; text: state.label }
    }

    component RadarGauge: Item {
        id: radar
        property real size: 58
        property real level: 0
        width: size
        height: size

        Repeater {
            model: [1, 0.72, 0.36]
            Rectangle {
                required property int index
                required property var modelData
                anchors.centerIn: parent
                width: radar.size * Number(modelData)
                height: width
                radius: width / 2
                color: "transparent"
                border.width: 1
                border.color: index === 0 ? root.accentColor : root.hairColor
            }
        }
        Rectangle { x: 0; y: parent.height / 2; width: parent.width; height: 1; color: root.hairColor }
        Rectangle { x: parent.width / 2; y: 0; width: 1; height: parent.height; color: root.hairColor }
        Rectangle { x: 12; y: 18; width: 4; height: 4; color: root.accentColor }
        Rectangle { x: parent.width - 14; y: parent.height - 20; width: 4; height: 4; color: root.accentColor }
        Rectangle { x: parent.width / 2; y: parent.height - 11; width: 4; height: 4; color: root.accentColor }
        MicroText { anchors.right: parent.right; y: 3; text: "R:" + Math.round(radar.level * 99); color: root.accentColor }
    }

    component NetworkTrace: Item {
        id: trace
        property real level: 0
        Rectangle { x: 0; y: parent.height - 1; width: parent.width; height: 1; color: root.hairColor }
        Rectangle { x: 0; y: 0; width: 1; height: parent.height; color: root.hairColor }
        Shape {
            anchors.fill: parent
            ShapePath {
                fillColor: "transparent"
                strokeColor: root.accentColor
                strokeWidth: 1.2
                startX: 0; startY: trace.height * 0.65
                PathLine { x: trace.width * 0.10; y: trace.height * 0.65 }
                PathLine { x: trace.width * 0.15; y: trace.height * (0.25 + trace.level * 0.15) }
                PathLine { x: trace.width * 0.21; y: trace.height * 0.78 }
                PathLine { x: trace.width * 0.31; y: trace.height * 0.56 }
                PathLine { x: trace.width * 0.43; y: trace.height * 0.62 }
                PathLine { x: trace.width * 0.49; y: trace.height * 0.18 }
                PathLine { x: trace.width * 0.57; y: trace.height * 0.82 }
                PathLine { x: trace.width * 0.68; y: trace.height * 0.58 }
                PathLine { x: trace.width * 0.79; y: trace.height * 0.62 }
                PathLine { x: trace.width * 0.85; y: trace.height * 0.34 }
                PathLine { x: trace.width * 0.91; y: trace.height * 0.75 }
                PathLine { x: trace.width; y: trace.height * 0.60 }
            }
        }
    }
}