#pragma once

#include <Arduino.h>
#include <datastruct.h>
#include <string>

void clearScreen();
void setCursor(const uint8_t x, const uint8_t y);
void printField(const char name[], const uint32_t val);
void printField(const char name[], const int32_t val);
void printField(const char name[], const int64_t val);
void printField(const char name[], const float val);
void printField(const char name[], const char *val);

void printInfo(const ignitionBoxStatus &info);

static const std::string htmlTest = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ESP32 Dashboard</title>
    <style>
        body {
            font-family: Arial;
            text-align: center;
            margin-top: 40px;
        }

        table {
            margin: auto;
            border-collapse: collapse;
            width: 100%;
            max-width: 900px;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            font-size: 16px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }

        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <h2>RotaxMonitor realtime data</h2>

    <button onclick="start()">Start</button>
    <button onclick="stop()">Stop</button>

    <div style="max-width: 900px; margin: 0 auto; text-align: left;">
        <p><strong>Timestamp:</strong> <span id="timestamp">-</span></p>
        <p><strong>Data Valid:</strong> <span id="datavalid">-</span></p>
        <p><strong>Generator voltage:</strong> <span id="volts_gen">-</span></p>
        <p><strong>Engine RPM:</strong> <span id="eng_rpm">-</span></p>
        <p><strong>ADC read time:</strong> <span id="adc_read_time">-</span></p>
        <p><strong>Queue errors:</strong> <span id="n_queue_errors">-</span></p>

        <table>
            <thead>
                <tr>
                    <th>Property</th>
                    <th>Coils 12</th>
                    <th>Coils 34</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Spark delay</td>
                    <td id="coils12_spark_delay">-</td>
                    <td id="coils34_spark_delay">-</td>
                </tr>
                <tr>
                    <td>Spark status</td>
                    <td id="coils12_spark_status">-</td>
                    <td id="coils34_spark_status">-</td>
                </tr>
                <tr>
                    <td>Soft start status</td>
                    <td id="coils12_sstart_status">-</td>
                    <td id="coils34_sstart_status">-</td>
                </tr>
                <tr>
                    <td>Peak P in</td>
                    <td id="coils12_peak_p_in">-</td>
                    <td id="coils34_peak_p_in">-</td>
                </tr>
                <tr>
                    <td>Peak N in</td>
                    <td id="coils12_peak_n_in">-</td>
                    <td id="coils34_peak_n_in">-</td>
                </tr>
                <tr>
                    <td>Peak P out</td>
                    <td id="coils12_peak_p_out">-</td>
                    <td id="coils34_peak_p_out">-</td>
                </tr>
                <tr>
                    <td>Peak N out</td>
                    <td id="coils12_peak_n_out">-</td>
                    <td id="coils34_peak_n_out">-</td>
                </tr>
                <tr>
                    <td>Level spark</td>
                    <td id="coils12_level_spark">-</td>
                    <td id="coils34_level_spark">-</td>
                </tr>
                <tr>
                    <td>Events</td>
                    <td id="coils12_n_events">-</td>
                    <td id="coils34_n_events">-</td>
                </tr>
                <tr>
                    <td>Missed firings</td>
                    <td id="coils12_n_missed_firing">-</td>
                    <td id="coils34_n_missed_firing">-</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        let ws;

        function connectWS() {
            ws = new WebSocket("ws://" + location.host + "/ws");

            ws.onopen = () => {
                console.log("WebSocket connesso");
            };

            ws.onclose = () => {
                console.log("WebSocket disconnesso, retry...");
                setTimeout(connectWS, 5000);
            };

            ws.onmessage = (event) => {
                let data;

                try {
                    data = JSON.parse(event.data);
                } catch (e) {
                    console.error("Invalid JSON received", e);
                    return;
                }

                document.getElementById("datavalid").textContent = data.datavalid ?? "-";
                document.getElementById("timestamp").textContent = data.timestamp ?? "-";
                document.getElementById("volts_gen").textContent = data.volts_gen ?? "-";
                document.getElementById("eng_rpm").textContent = data.eng_rpm ?? "-";
                document.getElementById("adc_read_time").textContent = data.adc_read_time ?? "-";
                document.getElementById("n_queue_errors").textContent = data.n_queue_errors ?? "-";

                const coils12 = data.coils12 || {};
                const coils34 = data.coils34 || {};

                document.getElementById("coils12_spark_delay").textContent = coils12.spark_delay ?? "-";
                document.getElementById("coils34_spark_delay").textContent = coils34.spark_delay ?? "-";
                document.getElementById("coils12_spark_status").textContent = coils12.spark_status ?? "-";
                document.getElementById("coils34_spark_status").textContent = coils34.spark_status ?? "-";
                document.getElementById("coils12_sstart_status").textContent = coils12.sstart_status ?? "-";
                document.getElementById("coils34_sstart_status").textContent = coils34.sstart_status ?? "-";
                document.getElementById("coils12_peak_p_in").textContent = coils12.peak_p_in ?? "-";
                document.getElementById("coils34_peak_p_in").textContent = coils34.peak_p_in ?? "-";
                document.getElementById("coils12_peak_n_in").textContent = coils12.peak_n_in ?? "-";
                document.getElementById("coils34_peak_n_in").textContent = coils34.peak_n_in ?? "-";
                document.getElementById("coils12_peak_p_out").textContent = coils12.peak_p_out ?? "-";
                document.getElementById("coils34_peak_p_out").textContent = coils34.peak_p_out ?? "-";
                document.getElementById("coils12_peak_n_out").textContent = coils12.peak_n_out ?? "-";
                document.getElementById("coils34_peak_n_out").textContent = coils34.peak_n_out ?? "-";
                document.getElementById("coils12_level_spark").textContent = coils12.level_spark ?? "-";
                document.getElementById("coils34_level_spark").textContent = coils34.level_spark ?? "-";
                document.getElementById("coils12_n_events").textContent = coils12.n_events ?? "-";
                document.getElementById("coils34_n_events").textContent = coils34.n_events ?? "-";
                document.getElementById("coils12_n_missed_firing").textContent = coils12.n_missed_firing ?? "-";
                document.getElementById("coils34_n_missed_firing").textContent = coils34.n_missed_firing ?? "-";
            };
        }

        function start() {
            fetch("/start");
        }

        function stop() {
            fetch("/stop");
        }

        connectWS();
    </script>

</body>
</html>
)rawliteral";