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

ColumnLayout {
    spacing: 0
    property var s: streamController.stats
    property alias showLabels: labelsToggle.checked
    property alias heatmapBlend: heatmapSlider.value

    // ── READOUT ───────────────────────────────────────────────────────────
    Label {
        text: "READOUT"
        color: Theme.bodyColor
        font.pixelSize: 10
        font.letterSpacing: 1.8
        font.weight: Font.Medium
        topPadding: 6
        bottomPadding: 8
    }

    Rectangle {
        Layout.fillWidth: true
        implicitHeight: statsLayout.implicitHeight + 20
        color: Theme.subtleSectionBackground
        radius: Theme.radiusSm
        border.color: Theme.cardBorder
        border.width: 1

        ColumnLayout {
            id: statsLayout
            anchors { fill: parent; margins: 10 }
            spacing: 8

            // Min Temp Row
            RowLayout {
                Layout.fillWidth: true
                Label { text: "Min Temp"; color: Theme.bodyColor; font.pixelSize: 11 }
                Item { Layout.fillWidth: true }
                RowLayout {
                    spacing: 4
                    Label {
                        text: s.min !== undefined ? s.min : "—"
                        color: Theme.sensorLow
                        font.pixelSize: 13; font.weight: Font.Bold
                    }
                    Label {
                        text: s.minIndex !== undefined ? "#" + s.minIndex : ""
                        color: Theme.bodyColor
                        font.pixelSize: 10
                    }
                }
            }

            // Max Temp Row
            RowLayout {
                Layout.fillWidth: true
                Label { text: "Max Temp"; color: Theme.bodyColor; font.pixelSize: 11 }
                Item { Layout.fillWidth: true }
                RowLayout {
                    spacing: 4
                    Label {
                        text: s.max !== undefined ? s.max : "—"
                        color: Theme.sensorHigh
                        font.pixelSize: 13; font.weight: Font.Bold
                    }
                    Label {
                        text: s.maxIndex !== undefined ? "#" + s.maxIndex : ""
                        color: Theme.bodyColor
                        font.pixelSize: 10
                    }
                }
            }

            Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }

            // Differential Row
            RowLayout {
                Layout.fillWidth: true
                Label { text: "Differential"; color: Theme.bodyColor; font.pixelSize: 11 }
                Item { Layout.fillWidth: true }
                Label {
                    text: s.diff !== undefined ? s.diff : "—"
                    color: Theme.headingColor
                    font.pixelSize: 13; font.weight: Font.Bold
                }
            }

            // Average Row
            RowLayout {
                Layout.fillWidth: true
                Label { text: "Average"; color: Theme.bodyColor; font.pixelSize: 11 }
                Item { Layout.fillWidth: true }
                Label {
                    text: s.avg !== undefined ? s.avg : "—"
                    color: Theme.headingColor
                    font.pixelSize: 13; font.weight: Font.Bold
                }
            }

            Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }

            // Sigma Row
            RowLayout {
                Layout.fillWidth: true
                Label { text: "Sigma (σ)"; color: Theme.bodyColor; font.pixelSize: 11 }
                Item { Layout.fillWidth: true }
                Label {
                    text: s.sigma !== undefined ? s.sigma : "—"
                    color: Theme.headingColor
                    font.pixelSize: 13; font.weight: Font.Bold
                }
            }

            // 3-Sigma Row
            RowLayout {
                Layout.fillWidth: true
                Label { text: "3σ Value"; color: Theme.bodyColor; font.pixelSize: 11 }
                Item { Layout.fillWidth: true }
                Label {
                    text: s.threeSigma !== undefined ? s.threeSigma : "—"
                    color: Theme.bodyColor
                    font.pixelSize: 12; font.weight: Font.Medium
                }
            }
        }
    }

    Item { height: 12 }
    Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }
    Item { height: 12 }

    // ── DISPLAY ───────────────────────────────────────────────────────────
    Label {
        text: "DISPLAY"
        color: Theme.bodyColor
        font.pixelSize: 10
        font.letterSpacing: 1.8
        font.weight: Font.Medium
        topPadding: 6
        bottomPadding: 8
    }

    CheckBox {
        id: labelsToggle
        text: "Labels"
        checked: true
        font.pixelSize: 11
    }

    RowLayout {
        Layout.fillWidth: true
        spacing: 6
        Label {
            text: "Heatmap"
            color: Theme.bodyColor
            font.pixelSize: 11
            Layout.preferredWidth: 52
        }
        Slider {
            id: heatmapSlider
            from: 0; to: 1; value: 0
            Layout.fillWidth: true
            ToolTip.visible: hovered
            ToolTip.text: Math.round(value * 100) + "%"
        }
    }

    Item { height: 12 }
    Rectangle { Layout.fillWidth: true; height: 1; color: Theme.cardBorder }
    Item { height: 12 }

    // ── THRESHOLDS ────────────────────────────────────────────────────────
    Label {
        text: "THRESHOLDS"
        color: Theme.bodyColor
        font.pixelSize: 10
        font.letterSpacing: 1.8
        font.weight: Font.Medium
        topPadding: 6
        bottomPadding: 8
    }

    Label {
        text: "Set Point (°C)"
        color: Theme.bodyColor
        font.pixelSize: 11
        bottomPadding: 3
    }
    TextField {
        id: spField
        Layout.fillWidth: true
        text: "149.0"
        font.pixelSize: 12
        inputMethodHints: Qt.ImhFormattedNumbersOnly
        color: Theme.fieldText
        placeholderTextColor: Theme.fieldPlaceholder
        selectedTextColor: Theme.fieldBackground
        selectionColor: Theme.fieldText
        background: Rectangle {
            radius: Theme.radiusXs
            color: Theme.fieldBackground
            border.width: spField.activeFocus ? Theme.borderStrong : Theme.borderThin
            border.color: spField.activeFocus ? Theme.fieldBorderFocus : Theme.fieldBorder
        }
        onEditingFinished: pushThresholds()
    }

    Item { height: 10 }

    Label {
        text: "Margin (±°C)"
        color: Theme.bodyColor
        font.pixelSize: 11
        bottomPadding: 3
    }
    TextField {
        id: mgField
        Layout.fillWidth: true
        text: "1.0"
        font.pixelSize: 12
        inputMethodHints: Qt.ImhFormattedNumbersOnly
        color: Theme.fieldText
        placeholderTextColor: Theme.fieldPlaceholder
        selectedTextColor: Theme.fieldBackground
        selectionColor: Theme.fieldText
        background: Rectangle {
            radius: Theme.radiusXs
            color: Theme.fieldBackground
            border.width: mgField.activeFocus ? Theme.borderStrong : Theme.borderThin
            border.color: mgField.activeFocus ? Theme.fieldBorderFocus : Theme.fieldBorder
        }
        onEditingFinished: pushThresholds()
    }

    Item { height: 10 }

    CheckBox {
        id: autoCheck
        text: "Auto range  (mean ± 1σ)"
        checked: true
        font.pixelSize: 11
        onCheckedChanged: pushThresholds()
    }

    Item { Layout.fillHeight: true }

    function pushThresholds() {
        var sp = parseFloat(spField.text) || 149.0
        var mg = parseFloat(mgField.text) || 1.0
        streamController.setThresholds(sp, mg, autoCheck.checked)
    }
}