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

// ===== Stream Stats Dialog =====
// Popup showing live stream statistics: received frames, errors,
// resync count, and elapsed time. Opened from the Live toolbar.

Popup {
    id: root
    modal: true
    dim: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
    width: 320
    implicitHeight: content.implicitHeight + 40
    anchors.centerIn: Overlay.overlay

    // Elapsed seconds supplied by the Live timer in WaferMapTab.
    property int elapsedSecs: 0

    function fmtTime(s) {
        var m = Math.floor(s / 60);
        var ss = s % 60;
        return (m < 10 ? "0" : "") + m + ":" + (ss < 10 ? "0" : "") + ss;
    }

    background: Rectangle {
        radius: Theme.radiusMd
        color: Theme.cardBackground
        border.color: Theme.cardBorder
        border.width: 1
    }

    component StatRow: RowLayout {
        property string label
        property string value
        Layout.fillWidth: true
        spacing: 8

        Label {
            text: label
            color: Theme.bodyColor
            font.pixelSize: Theme.fontXs
            Layout.fillWidth: true
        }
        Label {
            text: value
            color: Theme.headingColor
            font.pixelSize: Theme.fontSm
            font.weight: Font.Medium
        }
    }

    ColumnLayout {
        id: content
        anchors.fill: parent
        anchors.margins: 20
        spacing: 16

        // ── Header ────────────────────────────────────────────────
        RowLayout {
            Layout.fillWidth: true
            spacing: 10

            Label {
                text: "STREAM DATA"
                font.pixelSize: Theme.fontLg
                font.bold: true
                color: Theme.headingColor
                Layout.fillWidth: true
            }

            Button {
                text: "✕"
                flat: true
                Layout.preferredWidth: 32
                Layout.preferredHeight: 32
                onClicked: root.close()

                background: Rectangle {
                    radius: Theme.radiusXs
                    color: parent.hovered ? Theme.buttonNeutralHover : "transparent"
                }
                contentItem: Label {
                    text: parent.text
                    color: Theme.bodyColor
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }

        // ── Stats box ─────────────────────────────────────────────
        Rectangle {
            Layout.fillWidth: true
            implicitHeight: statRows.implicitHeight + 20
            radius: Theme.radiusSm
            color: Theme.subtleSectionBackground
            border.color: Theme.cardBorder
            border.width: 1

            ColumnLayout {
                id: statRows
                anchors.fill: parent
                anchors.margins: 10
                spacing: 8

                StatRow {
                    label: "Received frames"
                    value: streamController.receivedCount
                }
                StatRow {
                    label: "Errors"
                    value: streamController.errorCount
                }
                StatRow {
                    label: "Resyncs"
                    value: streamController.resyncCount
                }
                StatRow {
                    label: "Elapsed"
                    value: root.fmtTime(root.elapsedSecs)
                }
            }
        }
    }
}