<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="theme-color" content="#000" />
        <title>SensorX</title>

        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
                    "Helvetica Neue", sans-serif;
            }

            body {
                background: black;
            }

            .h-bar {
                width: 100%;
                padding: 1rem;
                max-width: 300px;
                background: rgba(255, 255, 255, 0.06);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 1rem;
                /* border: 2px solid rgba(255, 255, 255, 0.081); */
                box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.064), inset 0 0 0 100px var(--bg-color);
            }

            .h-bar p {
                font-size: 2rem;
                font-weight: 700;
                color: rgba(225, 225, 225, 0.907);
                mix-blend-mode: color-dodge;
            }

            .h-bar p span {
                font-size: 1.5rem;
                font-weight: 400;
                color: rgba(225, 225, 225, 0.907);
            }

            .container {
                display: flex;
                flex-direction: column;
                padding: 1rem;
                align-items: center;
                gap: 1rem;
            }

            header {
                max-width: 600px;
                margin: auto;
                padding: 2rem 1rem;
                margin-bottom: 1rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.096);
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .device-status {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }

            .device-status .online,
            .offline {
                display: flex;
                align-items: center;
                font-size: 0.8rem;
                text-transform: uppercase;
                font-weight: 100;
                align-items: center;
                justify-content: center;
            }

            .device-status .online {
                display: none;
                color: rgb(110, 242, 80);
            }

            .device-status .offline {
                color: rgb(255, 73, 73);
            }

            .device-status.online .online {
                display: flex;
            }
            .device-status.online .offline {
                display: none;
            }
            #last-updated {
                padding: 1rem 0;
                color: rgba(255, 255, 255, 0.384);
            }

            #last-updated span {
                color: rgba(255, 255, 255, 0.877);
                text-transform: uppercase;
            }

            #fetch-status {
                width: 10px;
                height: 10px;
                border-radius: 50px;
                background: rgb(48, 246, 48);
                opacity: 0;
                transition: 2000ms linear;
            }
            
            #fetch-status.active {
                opacity: 1;
                transition: none;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="logo">
                <h2>SensorX</h2>
            </div>

            <div class="device-status <% if(deviceStatus){ %>
                online
              <% } else{ %>  
                
             <% } %>" id="device-status-display">
                <div id="fetch-status"></div>
                <div class="online">
                    <p>Device online</p>
                </div>
                <div class="offline">
                    <p>Device offline</p>
                </div>
            </div>
        </header>

        <div class="container">
            <p style="color: aliceblue; width: 100%; max-width: 300px; opacity: 0.5;">Temperature</p>
            <div class="h-bar" --data-value="89" style="--bg-color: rgb(41, 10, 10)">
                <p><strong id="temp-display"><%= temp %></strong> <span>&deg;C</span></p>
            </div>
            <p style="color: aliceblue; width: 100%; max-width: 300px; opacity: 0.5;">Humidity</p>
            <div class="h-bar" --data-value="89" style="--bg-color: rgb(0, 41, 14)">
                <p>
                    <strong id="humidity-display"><%= humidity %></strong>
                    <span>&percnt;</span>
                </p>
            </div>
            <p style="color: aliceblue; width: 100%; max-width: 300px; opacity: 0.5;">Rainfall</p>
            <div class="h-bar" --data-value="89" style="--bg-color: rgb(11, 25, 41)">
                <p><strong id="rain-display"><%= rain %></strong> <span>mm </span></p>
            </div>
            <p style="color: aliceblue; width: 100%; max-width: 300px; opacity: 0.5;">Light</p>
            <div class="h-bar" --data-value="89" style="--bg-color: rgb(0, 55, 51)">
                <p><strong id="light-display"><%= light %></strong> <span></span></p>
            </div>

            <p id="last-updated">
                Last updated: &nbsp;
                <span id="last-updated-display"><%= lastUpdated %></span>
            </p>
        </div>

        <script>
            const $ = (name) => document.querySelector(name);

            setInterval(fetchSensorData, 3000);

            async function fetchSensorData() {

                const data = await fetch(`/getSensorData`, {
                    mode: "no-cors",
                })
                    .then((response) => response.json())
                    .then((data) => data)
                    .catch((err) => {
                        console.error(err);
                    });

                if (data.rain && data.temp && data.humidity) updateUI(data);
            }



            function updateUI(data) {

                if (data.rain && data.temp && data.humidity && data.light) {
                    $("#rain-display").innerHTML = data.rain.toString();
                    $("#temp-display").innerHTML = data.temp.toString();
                    $("#humidity-display").innerHTML = data.humidity.toString();
                    $("#light-display").innerHTML = data.light.toString();

                    $("#last-updated-display").innerHTML = data.lastUpdated;

                    if (data.deviceStatus) $("#device-status-display").classList.add("online");
                    else $("#device-status-display").classList.remove("online");

                    updateFetchingIndicator();
                }
            }


            function updateFetchingIndicator() {
                $('#fetch-status').classList.add('active');
                    setTimeout(() => {
                        $('#fetch-status').classList.remove('active');
                    }, 100);
            }
            

        </script>
    </body>
</html>
