import QtQuick
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Layouts
import ISC
import ISC.Wafer

// ===== Data Tab (Compare Content Only) =====
// Per docs/design/navigation-mock.html: the Data tab shows only the Compare
// Runs content — the raw CSV table ("Inspect Table" mode in earlier drafts)
// is intentionally not displayed in the application.
// Layout: left column = aligned-curves chart with alignment scrubber + wafer
// overlap map; right side panel = run selection dropdowns, overlap settings,
// and DTW readout cards.
Item {
    id: root
    anchors.fill: parent

    // Properties for DTW Comparison
    property int activeBox: 1 // 1 for Reference (Run A), 2 for Session (Run B), 0 for inactive
    property string compareFileA: ""
    property string compareFileB: ""
    property real warpingDistance: -1
    property int frameOffset: 0
    property real maxSensorDeviation: -1
    property bool comparing: false
    property var trendDataA: []
    property var trendDataB: []
    property string errorMessage: ""

    // Wafer overlap properties
    property var compareSensorLayout: []
    property var compareSensorDiff: []
    property string compareWaferShape: "round"
    property real compareWaferSize: 300.0

    readonly property bool hasSeries: trendDataA.length > 1 && trendDataB.length > 1
    readonly property int seriesLen: Math.max(trendDataA.length, trendDataB.length)

    function diffBands(diffs) {
        return diffs.map(d => d > 1.0 ? "high" : d < -1.0 ? "low" : "in_range")
    }

    function shortName(path) {
        return path ? path.split("/").pop() : ""
    }

    function clearResults() {
        root.warpingDistance = -1
        root.frameOffset = 0
        root.maxSensorDeviation = -1
        root.trendDataA = []
        root.trendDataB = []
        root.compareSensorLayout = []
        root.compareSensorDiff = []
        root.errorMessage = ""
    }

    function resetComparison() {
        root.compareFileA = ""
        root.compareFileB = ""
        root.comparing = false
        root.activeBox = 1
        clearResults()
    }

    Component.onCompleted: file_browser.refreshFiles()

    // Clicking a file in the left rail's browser populates the armed run slot
    Connections {
        target: streamController
        function onLoadedFileChanged() {
            if (streamController.loadedFile && root.activeBox > 0) {
                if (root.activeBox === 1) {
                    root.compareFileA = streamController.loadedFile
                    root.activeBox = 2 // Auto-advance to box 2
                } else if (root.activeBox === 2) {
                    root.compareFileB = streamController.loadedFile
                    root.activeBox = 0 // Finished selecting
                }
            }
        }
        function onComparisonResult(result) {
            root.comparing = false
            if (result && result.success) {
                root.warpingDistance = result.distance
                root.frameOffset = result.frame_offset !== undefined ? result.frame_offset : 0
                root.maxSensorDeviation = result.max_sensor_deviation !== undefined ? result.max_sensor_deviation : -1
                root.trendDataA = result.series_a || []
                root.trendDataB = result.series_b || []
                root.compareSensorLayout = result.sensor_layout || []
                root.compareSensorDiff = result.sensor_diff || []
                root.compareWaferShape = result.wafer_shape || "round"
                root.compareWaferSize = result.wafer_size || 300.0
                root.errorMessage = ""
                scrubber.value = Math.floor(root.seriesLen / 2)
            } else {
                root.clearResults()
                root.errorMessage = (result && result.error) ? result.error : "Comparison failed"
            }
        }
    }

    // ── Reusable pieces ────────────────────────────────────────────
    component SectionTitle: Label {
        font.pixelSize: Theme.fontXs
        font.bold: true
        font.letterSpacing: 1.2
        color: Theme.sideMutedText
    }

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

    // Mini stat box under the alignment scrubber (mockup's subtle-box trio)
    component ScrubStat: Rectangle {
        id: scrubStat
        property string label
        property string value
        property color valueColor: Theme.headingColor
        Layout.fillWidth: true
        implicitHeight: 38
        radius: 4
        color: Theme.cardWash
        border.color: Theme.cardBorder
        border.width: 1

        ColumnLayout {
            anchors.fill: parent
            anchors.leftMargin: 6
            anchors.rightMargin: 6
            anchors.topMargin: 4
            anchors.bottomMargin: 4
            spacing: 0
            Label {
                text: scrubStat.label
                font.pixelSize: 9
                color: Theme.sideMutedText
            }
            Label {
                text: scrubStat.value
                font.pixelSize: Theme.fontSm
                font.bold: true
                font.family: Theme.codeFontFamily
                color: scrubStat.valueColor
            }
        }
    }

    // Large labeled value card for the DTW readout panel
    component ReadoutCard: Rectangle {
        id: readoutCard
        property string label
        property string value
        property color valueColor: Theme.headingColor
        Layout.fillWidth: true
        implicitHeight: 52
        radius: Theme.radiusSm
        color: Theme.subtleSectionBackground
        border.color: Theme.cardBorder
        border.width: 1

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 8
            spacing: 2
            Label {
                text: readoutCard.label
                font.pixelSize: 9
                font.bold: true
                font.letterSpacing: 0.2
                color: Theme.sideMutedText
            }
            Label {
                text: readoutCard.value
                font.pixelSize: Theme.fontLg
                font.bold: true
                font.family: Theme.codeFontFamily
                color: readoutCard.valueColor
            }
        }
    }

    // Run slot card: click to arm, then pick a file in the left rail's browser
    component RunSlot: Rectangle {
        id: slotBox
        property int boxIndex: 1
        property string title
        property string filePath: ""
        property color accent: Theme.primaryAccent
        signal cleared()

        Layout.fillWidth: true
        implicitHeight: 58
        radius: Theme.radiusSm
        color: Theme.fieldBackground
        border.width: root.activeBox === boxIndex ? 2 : 1
        border.color: root.activeBox === boxIndex ? accent : Theme.cardBorder

        Behavior on border.color { ColorAnimation { duration: Theme.durationFast } }

        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: root.activeBox = slotBox.boxIndex
        }

        RowLayout {
            anchors.fill: parent
            anchors.margins: 10
            spacing: 8

            Rectangle {
                width: 8; height: 8; radius: 4
                color: slotBox.accent
                Layout.alignment: Qt.AlignVCenter
            }

            ColumnLayout {
                Layout.fillWidth: true
                spacing: 2
                Label {
                    text: slotBox.title
                    font.pixelSize: 9
                    font.bold: true
                    font.letterSpacing: 1.0
                    color: root.activeBox === slotBox.boxIndex ? slotBox.accent : Theme.sideMutedText
                }
                Label {
                    text: slotBox.filePath !== ""
                        ? root.shortName(slotBox.filePath)
                        : (root.activeBox === slotBox.boxIndex ? "<- Select file from left panel..." : "Click to select")
                    font.pixelSize: Theme.fontXs
                    color: slotBox.filePath !== "" ? Theme.headingColor : Theme.bodyColor
                    opacity: slotBox.filePath !== "" ? 1.0 : 0.6
                    elide: Text.ElideMiddle
                    Layout.fillWidth: true
                }
            }

            Button {
                visible: slotBox.filePath !== ""
                flat: true
                implicitWidth: 24; implicitHeight: 24
                onClicked: slotBox.cleared()
                background: Rectangle {
                    radius: Theme.radiusSm
                    color: parent.hovered ? Theme.flatButtonHover : "transparent"
                }
                contentItem: IconImage {
                    source: "icons/x.svg"
                    width: 14; height: 14
                    sourceSize.width: 14
                    sourceSize.height: 14
                    color: Theme.bodyColor
                    anchors.centerIn: parent
                }
            }
        }
    }

    // ── Main Layout ───────────────────────────────────────────────
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: Theme.panelPadding
        spacing: Theme.rightPaneGap

        // ── Title / Header ─────────────────────────────────────────
        RowLayout {
            Layout.fillWidth: true
            spacing: 8

            Label {
                text: "Run Comparison (DTW)"
                font.pixelSize: Theme.fontXl
                font.bold: true
                color: Theme.headingColor
                Layout.fillWidth: true
                elide: Text.ElideRight
            }

            Button {
                id: resetBtn
                flat: true
                implicitWidth: 32
                implicitHeight: 32
                visible: root.compareFileA !== "" || root.compareFileB !== ""
                onClicked: root.resetComparison()

                background: Rectangle {
                    radius: Theme.radiusSm
                    color: resetBtn.hovered ? Theme.flatButtonHover : "transparent"
                }
                contentItem: IconImage {
                    source: "icons/rotate-ccw.svg"
                    width: 18; height: 18
                    sourceSize.width: 18
                    sourceSize.height: 18
                    color: Theme.bodyColor
                    anchors.centerIn: parent
                }
                ToolTip.visible: resetBtn.hovered
                ToolTip.text: "Reset comparison"
            }
        }

        // ── Error Banner ───────────────────────────────────────────
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: errorRow.implicitHeight + 16
            visible: root.errorMessage !== ""
            color: Theme.errorSurface
            border.color: Theme.statusErrorColor
            border.width: 1
            radius: Theme.radiusSm

            RowLayout {
                id: errorRow
                anchors.fill: parent
                anchors.margins: 8
                spacing: 8

                IconImage {
                    source: "icons/triangle-alert.svg"
                    width: 16; height: 16
                    sourceSize.width: 16
                    sourceSize.height: 16
                    color: Theme.errorTextSoft
                    Layout.alignment: Qt.AlignTop
                }

                Label {
                    id: errorLabel
                    text: root.errorMessage
                    color: Theme.errorTextSoft
                    font.pixelSize: Theme.fontSm
                    wrapMode: Text.WordWrap
                    Layout.fillWidth: true
                }
            }
        }

        // ── Body: main column | side panel ─────────────────────────
        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 16

            // --- Left Column: chart + scrubber, wafer overlap map ---
            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.minimumWidth: 350
                spacing: 12

                // Chart card with alignment scrubber
                PanelBox {
                    Layout.fillWidth: true
                    Layout.preferredHeight: chartCol.implicitHeight + 24

                    ColumnLayout {
                        id: chartCol
                        anchors.fill: parent
                        anchors.margins: 12
                        spacing: 8

                        RowLayout {
                            Layout.fillWidth: true
                            SectionTitle {
                                text: "ALIGNED TEMP CURVE OVERLAY (DTW)"
                                Layout.fillWidth: true
                            }
                            Row {
                                spacing: 16
                                visible: root.hasSeries
                                Row {
                                    spacing: 4
                                    Rectangle { width: 12; height: 3; radius: 1.5; color: Theme.primaryAccent; anchors.verticalCenter: parent.verticalCenter }
                                    Label { text: "Run A"; font.pixelSize: Theme.fontXs; color: Theme.bodyColor }
                                }
                                Row {
                                    spacing: 4
                                    Rectangle { width: 12; height: 3; radius: 1.5; color: Theme.themeSkill; anchors.verticalCenter: parent.verticalCenter }
                                    Label { text: "Run B"; font.pixelSize: Theme.fontXs; color: Theme.bodyColor }
                                }
                            }
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 200
                            color: Theme.fieldBackground
                            border.color: Theme.cardBorder
                            border.width: 1
                            radius: Theme.radiusSm
                            clip: true

                            Canvas {
                                id: overlayCanvas
                                anchors.fill: parent
                                visible: root.hasSeries

                                readonly property real padLeft: 50
                                readonly property real padRight: 16
                                readonly property real padTop: 16
                                readonly property real padBottom: 28

                                function drawGrid(ctx, minV, maxV, dataLen) {
                                    var plotW = width - padLeft - padRight
                                    var plotH = height - padTop - padBottom
                                    var range = (maxV - minV) || 1

                                    ctx.strokeStyle = Theme.chartGridLine
                                    ctx.lineWidth = 1
                                    ctx.fillStyle = Theme.chartAxisText
                                    ctx.font = "10px sans-serif"
                                    ctx.textAlign = "right"

                                    var ySteps = 5
                                    for (var yi = 0; yi <= ySteps; yi++) {
                                        var yFrac = yi / ySteps
                                        var yPx = padTop + plotH * yFrac
                                        var yVal = maxV - yFrac * range

                                        ctx.beginPath()
                                        ctx.moveTo(padLeft, yPx)
                                        ctx.lineTo(padLeft + plotW, yPx)
                                        ctx.stroke()

                                        ctx.fillText(yVal.toFixed(1), padLeft - 6, yPx + 3)
                                    }

                                    ctx.textAlign = "center"
                                    var xSteps = Math.min(5, dataLen - 1)
                                    for (var xi = 0; xi <= xSteps; xi++) {
                                        var xFrac = xi / xSteps
                                        var xPx = padLeft + plotW * xFrac
                                        var xIdx = Math.round(xFrac * (dataLen - 1))
                                        ctx.fillText(xIdx.toString(), xPx, height - 6)
                                    }

                                    ctx.save()
                                    ctx.translate(12, padTop + plotH / 2)
                                    ctx.rotate(-Math.PI / 2)
                                    ctx.textAlign = "center"
                                    ctx.fillText("°C", 0, 0)
                                    ctx.restore()

                                    ctx.textAlign = "center"
                                    ctx.fillText("Frame", padLeft + plotW / 2, height - 2)
                                }

                                function drawSeries(ctx, series, minV, range, color) {
                                    var plotW = width - padLeft - padRight
                                    var plotH = height - padTop - padBottom

                                    ctx.strokeStyle = color
                                    ctx.lineWidth = 2
                                    ctx.beginPath()
                                    for (var i = 0; i < series.length; i++) {
                                        var x = padLeft + (i / (series.length - 1)) * plotW
                                        var y = padTop + plotH - ((series[i] - minV) / range) * plotH
                                        if (i === 0) ctx.moveTo(x, y)
                                        else ctx.lineTo(x, y)
                                    }
                                    ctx.stroke()
                                }

                                function drawScrubMarker(ctx) {
                                    if (root.seriesLen < 2) return
                                    var plotW = width - padLeft - padRight
                                    var x = padLeft + (scrubber.value / (root.seriesLen - 1)) * plotW
                                    ctx.strokeStyle = Theme.primaryAccent
                                    ctx.lineWidth = 1.5
                                    ctx.setLineDash([3, 3])
                                    ctx.beginPath()
                                    ctx.moveTo(x, padTop)
                                    ctx.lineTo(x, height - padBottom)
                                    ctx.stroke()
                                    ctx.setLineDash([])
                                }

                                onPaint: {
                                    var ctx = getContext("2d")
                                    ctx.reset()
                                    if (!root.hasSeries) return
                                    var all = root.trendDataA.concat(root.trendDataB)
                                    var minV = Math.min.apply(null, all)
                                    var maxV = Math.max.apply(null, all)
                                    var padding = (maxV - minV) * 0.05
                                    minV -= padding
                                    maxV += padding
                                    var range = (maxV - minV) || 1

                                    drawGrid(ctx, minV, maxV, root.seriesLen)
                                    drawSeries(ctx, root.trendDataA, minV, range, Theme.primaryAccent)
                                    drawSeries(ctx, root.trendDataB, minV, range, Theme.themeSkill)
                                    drawScrubMarker(ctx)
                                }

                                Connections {
                                    target: root
                                    function onTrendDataAChanged() { overlayCanvas.requestPaint() }
                                    function onTrendDataBChanged() { overlayCanvas.requestPaint() }
                                }
                                Connections {
                                    target: scrubber
                                    function onValueChanged() { overlayCanvas.requestPaint() }
                                }
                            }

                            // Empty state
                            ColumnLayout {
                                anchors.centerIn: parent
                                visible: !root.hasSeries
                                spacing: 8

                                IconImage {
                                    Layout.alignment: Qt.AlignHCenter
                                    visible: !root.comparing
                                    source: "icons/bar-chart.svg"
                                    width: 32; height: 32
                                    sourceSize.width: 32
                                    sourceSize.height: 32
                                    color: Theme.sideMutedText
                                }
                                Label {
                                    Layout.alignment: Qt.AlignHCenter
                                    text: root.comparing ? "Running DTW comparison…" : "Select two runs and run comparison"
                                    color: Theme.bodyColor
                                    font.pixelSize: Theme.fontSm
                                }
                                Label {
                                    Layout.alignment: Qt.AlignHCenter
                                    visible: !root.comparing
                                    text: "Click a run box on the right, then select a file from the left panel."
                                    color: Theme.sideMutedText
                                    font.pixelSize: Theme.fontXs
                                }
                            }
                        }

                        // ── Alignment Timeline Scrubber ────────────
                        ColumnLayout {
                            Layout.fillWidth: true
                            spacing: 4
                            visible: root.hasSeries

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

                            RowLayout {
                                Layout.fillWidth: true
                                SectionTitle {
                                    text: "ALIGNMENT TIMELINE SCRUBBER"
                                    Layout.fillWidth: true
                                }
                                Label {
                                    text: "Frame " + Math.round(scrubber.value) + " / " + Math.max(0, root.seriesLen - 1)
                                    font.pixelSize: Theme.fontXs
                                    font.bold: true
                                    font.family: Theme.codeFontFamily
                                    color: Theme.headingColor
                                }
                            }

                            Slider {
                                id: scrubber
                                Layout.fillWidth: true
                                from: 0
                                to: Math.max(1, root.seriesLen - 1)
                                stepSize: 1
                                value: 0
                            }

                            RowLayout {
                                id: scrubReadout
                                Layout.fillWidth: true
                                spacing: 8

                                readonly property int scrubIdx: Math.round(scrubber.value)
                                readonly property real tempA: root.trendDataA.length > 0
                                    ? root.trendDataA[Math.min(scrubIdx, root.trendDataA.length - 1)] : 0
                                readonly property real tempB: root.trendDataB.length > 0
                                    ? root.trendDataB[Math.min(scrubIdx, root.trendDataB.length - 1)] : 0

                                ScrubStat {
                                    label: "Temp (Run A)"
                                    value: scrubReadout.tempA.toFixed(1) + "°C"
                                    valueColor: Theme.primaryAccent
                                }
                                ScrubStat {
                                    label: "Temp (Run B)"
                                    value: scrubReadout.tempB.toFixed(1) + "°C"
                                    valueColor: Theme.themeSkill
                                }
                                ScrubStat {
                                    label: "Difference"
                                    value: Math.abs(scrubReadout.tempA - scrubReadout.tempB).toFixed(1) + "°C"
                                }
                            }
                        }
                    }
                }

                // Wafer Map Overlap View card
                PanelBox {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.minimumHeight: 220

                    ColumnLayout {
                        anchors.fill: parent
                        anchors.margins: 12
                        spacing: 8

                        RowLayout {
                            Layout.fillWidth: true
                            SectionTitle {
                                text: "WAFER MAP OVERLAP VIEW"
                                Layout.fillWidth: true
                            }
                            Label {
                                visible: root.compareFileA !== "" && root.compareFileB !== ""
                                text: (root.shortName(root.compareFileA).replace(".csv", "") + " vs "
                                       + root.shortName(root.compareFileB).replace(".csv", "")).toUpperCase()
                                font.pixelSize: Theme.fontXs
                                color: Theme.sideMutedText
                                elide: Text.ElideMiddle
                            }
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            color: Theme.fieldBackground
                            border.color: Theme.cardBorder
                            border.width: 1
                            radius: Theme.radiusSm
                            clip: true

                            WaferMapItem {
                                id: overlapMapItem
                                anchors.fill: parent
                                visible: root.compareSensorLayout.length > 0 && enableOverlapCheck.checked
                                sensors: root.compareSensorLayout
                                values: root.compareSensorDiff
                                bands: root.diffBands(root.compareSensorDiff)
                                shape: root.compareWaferShape
                                size: root.compareWaferSize
                                target: 0
                                margin: 1.0
                                blend: blendSlider.value / 100
                                showLabels: true
                                ringColor: Theme.waferRingColor
                                axisColor: Theme.waferAxisColor
                                lowColor: Theme.sensorLow
                                inRangeColor: Theme.sensorInRange
                                highColor: Theme.sensorHigh
                                textColor: Theme.headingColor
                            }

                            ColumnLayout {
                                anchors.centerIn: parent
                                visible: root.compareSensorLayout.length === 0 || !enableOverlapCheck.checked
                                spacing: 4
                                IconImage {
                                    Layout.alignment: Qt.AlignHCenter
                                    source: "icons/map.svg"
                                    width: 24; height: 24
                                    sourceSize.width: 24
                                    sourceSize.height: 24
                                    color: Theme.sideMutedText
                                }
                                Label {
                                    Layout.alignment: Qt.AlignHCenter
                                    text: !enableOverlapCheck.checked ? "Overlap map disabled"
                                        : "No sensor map available"
                                    color: Theme.bodyColor
                                    font.pixelSize: Theme.fontXs
                                }
                            }
                        }
                    }
                }
            }

            // --- Right Column: run selection, overlap settings, readout ---
            ColumnLayout {
                Layout.fillWidth: false
                Layout.preferredWidth: 280
                Layout.minimumWidth: 280
                Layout.maximumWidth: 280
                Layout.fillHeight: true
                spacing: 12

                // Bento 1: Run Selection
                PanelBox {
                    Layout.fillWidth: true
                    Layout.preferredHeight: runSelCol.implicitHeight + 24

                    ColumnLayout {
                        id: runSelCol
                        anchors.fill: parent
                        anchors.margins: 12
                        spacing: 10

                        SectionTitle { text: "RUN SELECTION" }

                        RunSlot {
                            title: "REFERENCE (RUN A)"
                            boxIndex: 1
                            accent: Theme.primaryAccent
                            filePath: root.compareFileA
                            onCleared: {
                                root.compareFileA = ""
                                root.activeBox = 1
                                root.clearResults()
                            }
                        }

                        RunSlot {
                            title: "SESSION (RUN B)"
                            boxIndex: 2
                            accent: Theme.themeSkill
                            filePath: root.compareFileB
                            onCleared: {
                                root.compareFileB = ""
                                root.activeBox = 2
                                root.clearResults()
                            }
                        }

                        Button {
                            id: compareBtn
                            Layout.fillWidth: true
                            Layout.preferredHeight: 32
                            enabled: root.compareFileA !== "" && root.compareFileB !== "" && !root.comparing
                            onClicked: {
                                root.comparing = true
                                root.clearResults()
                                streamController.compareFiles(root.compareFileA, root.compareFileB)
                            }

                            background: Rectangle {
                                radius: Theme.radiusSm
                                color: compareBtn.enabled
                                    ? (compareBtn.hovered ? Qt.lighter(Theme.primaryAccent, 1.1) : Theme.primaryAccent)
                                    : Theme.buttonNeutralBackground
                                Behavior on color { ColorAnimation { duration: Theme.durationFast } }
                            }
                            contentItem: Row {
                                spacing: 8
                                anchors.centerIn: parent
                                Label {
                                    anchors.verticalCenter: parent.verticalCenter
                                    text: compareBtn.enabled
                                        ? (root.comparing ? "Comparing…" : "Run DTW Comparison")
                                        : (root.comparing ? "Comparing…" : "Select both runs")
                                    color: compareBtn.enabled ? Theme.tone100 : Theme.sideMutedText
                                    font.pixelSize: Theme.fontXs
                                    font.bold: true
                                }
                                BusyIndicator {
                                    running: root.comparing
                                    visible: root.comparing
                                    width: 14; height: 14
                                    anchors.verticalCenter: parent.verticalCenter
                                }
                            }
                        }
                    }
                }

                // Bento 2: Overlap Map Settings
                PanelBox {
                    Layout.fillWidth: true
                    Layout.preferredHeight: overlapCol.implicitHeight + 24

                    ColumnLayout {
                        id: overlapCol
                        anchors.fill: parent
                        anchors.margins: 12
                        spacing: 8

                        SectionTitle { text: "OVERLAP MAP SETTINGS" }

                        CheckBox {
                            id: enableOverlapCheck
                            Layout.fillWidth: true
                            checked: true
                            text: "Enable Overlap Map"
                            font.pixelSize: Theme.fontXs

                            contentItem: Label {
                                leftPadding: enableOverlapCheck.indicator.width + 6
                                text: enableOverlapCheck.text
                                font.pixelSize: Theme.fontXs
                                color: Theme.headingColor
                                verticalAlignment: Text.AlignVCenter
                            }
                        }

                        ColumnLayout {
                            Layout.fillWidth: true
                            spacing: 6
                            visible: enableOverlapCheck.checked

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

                            RowLayout {
                                Layout.fillWidth: true
                                spacing: 6
                                Label {
                                    text: "Blend"
                                    font.pixelSize: Theme.fontXs
                                    color: Theme.bodyColor
                                    Layout.preferredWidth: 40
                                }
                                Slider {
                                    id: blendSlider
                                    Layout.fillWidth: true
                                    from: 0; to: 100; value: 50
                                    stepSize: 1
                                }
                                Label {
                                    text: Math.round(blendSlider.value) + "%"
                                    font.pixelSize: Theme.fontXs
                                    color: Theme.sideMutedText
                                    Layout.preferredWidth: 30
                                }
                            }

                            // Diff color legend
                            Row {
                                Layout.fillWidth: true
                                spacing: 10
                                Row {
                                    spacing: 3
                                    Rectangle { width: 8; height: 8; radius: 4; color: Theme.sensorLow; anchors.verticalCenter: parent.verticalCenter }
                                    Label { text: "B cooler"; font.pixelSize: 9; color: Theme.sideMutedText }
                                }
                                Row {
                                    spacing: 3
                                    Rectangle { width: 8; height: 8; radius: 4; color: Theme.sensorInRange; anchors.verticalCenter: parent.verticalCenter }
                                    Label { text: "Match"; font.pixelSize: 9; color: Theme.sideMutedText }
                                }
                                Row {
                                    spacing: 3
                                    Rectangle { width: 8; height: 8; radius: 4; color: Theme.sensorHigh; anchors.verticalCenter: parent.verticalCenter }
                                    Label { text: "B hotter"; font.pixelSize: 9; color: Theme.sideMutedText }
                                }
                            }
                        }
                    }
                }

                // Bento 3: DTW Comparison Readout
                PanelBox {
                    Layout.fillWidth: true
                    Layout.preferredHeight: readoutCol.implicitHeight + 24

                    ColumnLayout {
                        id: readoutCol
                        anchors.fill: parent
                        anchors.margins: 12
                        spacing: 8

                        SectionTitle { text: "DTW COMPARISON READOUT" }

                        ReadoutCard {
                            label: "DTW ALIGNMENT DISTANCE"
                            value: root.warpingDistance >= 0 ? root.warpingDistance.toFixed(2) : "--"
                            valueColor: root.warpingDistance >= 0
                                ? (root.warpingDistance < 50 ? Theme.metricGood : root.warpingDistance < 100 ? Theme.metricWarn : Theme.metricBad)
                                : Theme.sideMutedText
                        }
                        ReadoutCard {
                            label: "TEMPORAL FRAME OFFSET"
                            value: root.warpingDistance >= 0
                                ? ((root.frameOffset >= 0 ? "+" : "") + root.frameOffset + " frames")
                                : "--"
                            valueColor: root.warpingDistance >= 0 ? Theme.headingColor : Theme.sideMutedText
                        }
                        ReadoutCard {
                            label: "MAX SENSOR DEVIATION"
                            value: root.maxSensorDeviation >= 0 ? root.maxSensorDeviation.toFixed(2) + "°C" : "--"
                            valueColor: root.maxSensorDeviation >= 0
                                ? (root.maxSensorDeviation < 1.0 ? Theme.metricGood : root.maxSensorDeviation < 3.0 ? Theme.metricWarn : Theme.metricBad)
                                : Theme.sideMutedText
                        }
                    }
                }

                Item { Layout.fillHeight: true }
            }
        }
    }
}