// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
// SPDX-License-Identifier: GPL-3.0-or-later

import { VerticalBox, Button } from "std-widgets.slint";
import { Palette } from "palette.slint";
import { DataWindow } from "components/data-window.slint";
import { MapWindow } from "components/map-window.slint";

component StatusBadge {
    in property <string> label;
    in property <brush> color;

    horizontal-stretch: 0;
    HorizontalLayout {
        spacing: 6px;
        Rectangle {
            width: 10px;
            height: 10px;
            background: color;
            border-radius: self.width / 2;
            y: (parent.height - self.height) / 2;
        }

        Text {
            text: label;
            color: Palette.text-primary;
            vertical-alignment: center;
            font-size: 14px;
        }
    }
}

component MenuButton {
    in property <string> text;
    callback clicked;

    height: 28px;

    Rectangle {
        border-width: 2px;
        border-color: area.has-hover ? Palette.brand : Palette.border;
        border-radius: 8px;

        background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;

        HorizontalLayout {
            padding-left: 12px;
            padding-right: 12px;

            Text {
                text: root.text;
                font-size: 14px;
                color: Palette.text-primary;
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }

        area := TouchArea {
            mouse-cursor: pointer;

            clicked => {
                root.clicked();
            }
        }
    }
}

export component AppWindow inherits Window {
    title: "My App";

    // Allow WM to resize normally
    min-width: 400px;
    min-height: 300px;

    preferred-width: 900px;
    preferred-height: 600px;

    VerticalBox {
        width: 100%;
        height: 100%;

        spacing: 0;
        padding: 0;

        // Top bar
        Rectangle {
            height: 40px;
            width: 100%;
            background: Palette.bg-main;

            HorizontalLayout {
                padding: 6px;
                spacing: 6px;

                MenuButton {
                    text: "Connect";
                }

                MenuButton {
                    text: "Window";
                }

                Rectangle {
                    horizontal-stretch: 1;
                }

                MenuButton {
                    text: "Setting";
                }
            }
        }

        Rectangle {
            width: 100%;
            height: 2px;
            background: Palette.brand;
        }

        // Main content
        Rectangle {
            background: Palette.bg-secondary;
            horizontal-stretch: 1;
            vertical-stretch: 1;
            DataWindow {
                x: 0;
                y: 0;
                data1: [
                    { label: "Engine Temp", value: 97, unit: " °C" },
                    { label: "Engine RPM", value: 2573, unit: " RPM" },
                    { label: "Engine Map", value: 7, unit: "" },
                    { label: "Fuel Rate", value: 0.62, unit: " L/h" },
                    { label: "Injector PW", value: 2.7, unit: " ms" },
                    { label: "Ignition Adv", value: 21, unit: " °" },
                ];
                data2: [
                    { label: "GPS Speed", value: 38.9, unit: " km/h" },
                    { label: "GPS Satellites", value: 14, unit: "" },
                    { label: "Tank Pressure", value: 101.7, unit: " kPa" },
                    { label: "Air Temp", value: 24, unit: " °C" },
                    { label: "Humidity", value: 42, unit: " %" },
                    { label: "Barometric", value: 1012, unit: " hPa" }
                ];
            }

            MapWindow {
                x: 512px;
                y: 0;
                data-min: 2200;
                data-max: 9400;
                name: "Config 1 - Injection Period";
                map-axis: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
                rpm-axis: [
                    250,
                    500,
                    750,
                    1000,
                    1250,
                    1500,
                    1750,
                    2000,
                    2250,
                    2500,
                    2750,
                    3000,
                    3250,
                    3500,
                    3750,
                    4000
                ];
                data: [
                    2200,
                    2300,
                    2400,
                    2500,
                    2600,
                    2700,
                    2800,
                    2900,
                    3000,
                    3100,
                    3200,
                    3300,
                    3400,
                    3500,
                    3600,
                    3700,
                    2400,
                    2500,
                    2600,
                    2700,
                    2800,
                    3000,
                    3200,
                    3400,
                    3600,
                    3800,
                    4000,
                    4200,
                    4400,
                    4600,
                    4800,
                    5000,
                    2600,
                    2800,
                    3000,
                    3200,
                    3400,
                    3600,
                    3800,
                    4000,
                    4200,
                    4400,
                    4600,
                    4800,
                    5000,
                    5200,
                    5400,
                    5600,
                    2800,
                    3000,
                    3200,
                    3400,
                    3600,
                    3800,
                    4000,
                    4300,
                    4600,
                    4900,
                    5200,
                    5500,
                    5800,
                    6100,
                    6400,
                    6700,
                    3000,
                    3200,
                    3400,
                    3600,
                    3800,
                    4100,
                    4400,
                    4700,
                    5000,
                    5300,
                    5600,
                    5900,
                    6200,
                    6500,
                    6800,
                    7100,
                    3300,
                    3500,
                    3700,
                    3900,
                    4200,
                    4500,
                    4800,
                    5100,
                    5400,
                    5700,
                    6000,
                    6300,
                    6600,
                    6900,
                    7200,
                    7500,
                    3600,
                    3800,
                    4000,
                    4200,
                    4500,
                    4800,
                    5100,
                    5400,
                    5700,
                    6000,
                    6300,
                    6600,
                    6900,
                    7200,
                    7500,
                    7800,
                    3900,
                    4100,
                    4300,
                    4600,
                    4900,
                    5200,
                    5500,
                    5800,
                    6100,
                    6400,
                    6700,
                    7000,
                    7300,
                    7600,
                    7900,
                    8200,
                    4200,
                    4400,
                    4700,
                    5000,
                    5300,
                    5600,
                    5900,
                    6200,
                    6500,
                    6800,
                    7100,
                    7400,
                    7700,
                    8000,
                    8300,
                    8600,
                    4600,
                    4800,
                    5100,
                    5400,
                    5700,
                    6000,
                    6300,
                    6600,
                    6900,
                    7200,
                    7500,
                    7800,
                    8100,
                    8400,
                    8700,
                    9000,
                    5000,
                    5200,
                    5500,
                    5800,
                    6100,
                    6400,
                    6700,
                    7000,
                    7300,
                    7600,
                    7900,
                    8200,
                    8500,
                    8800,
                    9100,
                    9400,
                ];
            }
        }

        Rectangle {
            width: 100%;
            height: 2px;
            background: Palette.brand;
        }

        Rectangle {
            height: 32px;
            background: Palette.bg-main;
            width: 100%;

            HorizontalLayout {
                height: 100%;
                width: 100%;
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 10px;
                padding-right: 10px;
                spacing: 20px;

                StatusBadge {
                    label: "LoRa";
                    color: Palette.success;
                }

                StatusBadge {
                    label: "V-Link";
                    color: Palette.error;
                }

                Rectangle {
                    horizontal-stretch: 0;
                    height: parent.height - (2 * parent.padding-top);
                    width: 2px;
                    background: Palette.bg-secondary;
                }

                Rectangle {
                    horizontal-stretch: 1;
                    Text {
                        text: "ENGINE [WARNING] - High Engine Temperature";
                        font-size: 14px;
                        color: Palette.text-primary;
                    }
                }

                Rectangle {
                    horizontal-stretch: 0;
                    height: parent.height - (2 * parent.padding-top);
                    width: 2px;
                    background: Palette.bg-secondary;
                }

                StatusBadge {
                    label: "Engine";
                    color: Palette.warning;
                }

                StatusBadge {
                    label: "ECU";
                    color: Palette.success;
                }

                StatusBadge {
                    label: "Telemetry";
                    color: Palette.success;
                }
            }
        }
    }
}