import { Theme } from "../theme.slint";

export component NeonBarChart {
    in property <[float]> values;
    in property <[string]> labels;
    in property <length> chart-height: 160px;
    in property <color> bar-color: Theme.neon-cyan;
    in property <int> grid-lines: 5;

    property <float> max-val: 100.0;
    property <int> num-bars: Math.max(root.values.length, 1);

    VerticalLayout {
        spacing: 2px;
        Rectangle {
            height: root.chart-height;
            // Grid lines
            for gl[i] in [1, 2, 3, 4, 5] : Rectangle {
                y: (parent.height / 4.0) * (gl - 1);
                height: 1px;
                width: 100%;
                background: Theme.border;
            }
            // Bars
            for val[idx] in root.values : Rectangle {
                property <length> bar-h: Math.max((val / root.max-val) * parent.height, 1px);
                x: (parent.width / root.num-bars) * idx + 2px;
                width: (parent.width / root.num-bars) - 4px;
                height: bar-h;
                y: parent.height - self.height;
                border-radius: Theme.radius-sm;
                background: root.bar-color;
            }
        }
        // Labels
        HorizontalLayout {
            for lbl[idx2] in root.labels : Text {
                text: lbl;
                font-size: Theme.font-xs;
                color: Theme.text-dim;
                horizontal-alignment: center;
                overflow: elide;
            }
        }
    }
}

export component NeonLineChart {
    in property <[float]> values;
    in property <[string]> labels;
    in property <length> chart-height: 160px;
    in property <color> line-color: Theme.neon-magenta;
    in property <color> fill-color: #ff2d9544;

    property <int> num-vals: Math.max(root.values.length, 1);
    property <float> max-val: 100.0;

    VerticalLayout {
        spacing: 2px;
        Rectangle {
            height: root.chart-height;
            // Grid lines
            for gl[i] in [1, 2, 3, 4, 5] : Rectangle {
                y: (parent.height / 4.0) * (gl - 1);
                height: 1px;
                width: 100%;
                background: Theme.border;
            }
            // Fill area — trapezoid per segment between consecutive points
            for seg[idx] in root.values : Rectangle {
                visible: idx < root.num-vals - 1;
                property <float> v0: root.values[idx] / root.max-val;
                property <float> v1: root.values[idx + 1] / root.max-val;
                property <float> top-v: Math.max(v0, v1);
                property <length> seg-w: parent.width / (root.num-vals - 1);
                x: seg-w * idx;
                width: seg-w;
                y: (1.0 - top-v) * parent.height;
                height: top-v * parent.height;
                background: root.fill-color;
            }
            // Point dots
            for pt[idx] in root.values : Rectangle {
                x: (parent.width / (root.num-vals - 1)) * idx - 3px;
                y: (1.0 - root.values[idx] / root.max-val) * parent.height - 3px;
                width: 6px;
                height: 6px;
                border-radius: 3px;
                background: root.line-color;
            }
        }
        // Labels
        HorizontalLayout {
            for lbl[idx5] in root.labels : Text {
                text: lbl;
                font-size: Theme.font-xs;
                color: Theme.text-dim;
                horizontal-alignment: center;
                overflow: elide;
            }
        }
    }
}
