import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import TactileIPC 1.0
import LiveTrend 1.0

Rectangle {
    id: root
    width: 260
    height: 180
    radius: 10
    color: Backend.lightMode ? "#FFFFFF" : "#2C2C2C"
    border.color: Backend.lightMode ? "#E6E6E6" : "#3A3A3A"
    border.width: 1

    property alias plot: plot
    property string title: "Live Trend"

    property bool follow: true
    property color accentColor: Backend.lightMode ? "#39D353" : "#5BE37A"
    property color textColor: Backend.lightMode ? "#2B2B2B" : "#E0E0E0"
    property color plotBackground: Backend.lightMode ? "#FFFFFF" : "#1F1F1F"
    property color gridColor: Backend.lightMode ? Qt.rgba(0, 0, 0, 0.08) : Qt.rgba(1, 1, 1, 0.08)
    property color plotTextColor: Backend.lightMode ? Qt.rgba(0, 0, 0, 0.65) : Qt.rgba(1, 1, 1, 0.65)

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 6

        RowLayout {
            Layout.fillWidth: true
            spacing: 8

            Rectangle {
                width: 8
                height: 8
                radius: 2
                color: root.accentColor
                Layout.alignment: Qt.AlignVCenter
            }

            Label {
                text: root.title
                font.pixelSize: 14
                color: root.textColor
                Layout.fillWidth: true
                elide: Text.ElideRight
            }

            ToolButton {
                text: root.follow ? "▲" : "↺"
                font.pixelSize: 14
                onClicked: {
                    root.follow = true
                    plot.follow = true
                }
            }
        }

        // Plot
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            radius: 8
            color: root.plotBackground

            SparklinePlot {
                id: plot
                anchors.fill: parent
                leftPadding: 40
                rightPadding: 6
                topPadding: 8
                bottomPadding: 18

                yTickCount: 5
                lineColor: root.accentColor
                gridColor: root.gridColor
                textColor: root.plotTextColor

                viewCount: 5
                follow: root.follow

                // 60fps
                Timer {
                    interval: 16
                    running: true
                    repeat: true
                    onTriggered: plot.update()
                }

                DragHandler {
                    onActiveChanged: if (active) {
                        root.follow = false
                        plot.follow = false
                    }
                    onTranslationChanged: (t) => {
                        let move = Math.round(-t.x / 12)
                        if (move !== 0) {
                            plot.viewStart = Math.max(0, plot.viewStart + move)
                        }
                    }
                }

                WheelHandler {
                    onWheel: (w) => {
                        root.follow = false
                        plot.follow = false
                        let factor = w.angleDelta.y > 0 ? 0.85 : 1.15
                        plot.viewCount = Math.max(10, Math.min(2000000, Math.floor(plot.viewCount * factor)))
                    }
                }

                TapHandler {
                    onDoubleTapped: {
                        root.follow = true
                        plot.follow = true
                    }
                }
            }
        }
    }
}