<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Integer - DSTAT</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: {
              100: '#E6F6FF',
              200: '#BAE3FF',
              300: '#7CC7FF',
              400: '#47A3F3',
              500: '#2186EB',
              600: '#0967D2',
              700: '#0552B5',
              800: '#03449E',
              900: '#01337D',
            }
          }
        }
      }
    }
  </script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  </style>
</head>

<body class="min-h-screen bg-gradient-to-br from-gray-900 to-black font-['Inter']">
  <div class="container mx-auto px-4 py-8">
    <div class="mb-8">
      <h1 class="text-4xl font-bold text-white text-center mb-2">Layer 7 DSTAT</h1>
      <p class="text-primary-300 text-center opacity-75">Real-time Network Statistics</p>
    </div>
    
    <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl border border-primary-600/20 shadow-lg shadow-primary-500/10">
      <div id="chart" class="p-6"></div>
    </div>
  </div>

  <script src="highcharts.js"></script>
  <script src="exporting.js"></script>
  <script>
    window.onload = () => {
      let previous = null;

      const charts = Highcharts.chart("chart", {
        exporting: {
          enabled: false,
        },
        plotOptions: {
          series: {
            events: {
              legendItemClick: function (event) {
                event.preventDefault();
              },
            },
          },
        },
        chart: {
          type: "area",
          style: {
            fontFamily: "Inter, sans-serif",
          },
          backgroundColor: "transparent",
          height: '400px'
        },
        title: {
          text: null
        },
        xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            day: "%a",
          },
          labels: {
            style: {
              color: '#94A3B8'
            }
          },
          lineColor: 'rgba(148, 163, 184, 0.1)',
          tickColor: 'rgba(148, 163, 184, 0.1)',
        },
        yAxis: {
          labels: {
            style: {
              color: "#94A3B8"
            },
          },
          title: {
            text: "Requests / Sec",
            style: {
              color: "#94A3B8",
              fontWeight: '500'
            },
          },
          gridLineColor: 'rgba(148, 163, 184, 0.1)',
        },
        credits: {
          enabled: false,
        },
        legend: {
          enabled: false
        },
        series: [{
          name: "Total Requests",
          color: "#2186EB",
          fillColor: {
            linearGradient: { 
              x1: 0, 
              x2: 0, 
              y1: 0, 
              y2: 1 
            },
            stops: [
              [0, 'rgba(33, 134, 235, 0.3)'],
              [1, 'rgba(33, 134, 235, 0.0)']
            ]
          },
          data: [],
          marker: {
            enabled: false
          }
        }],
        tooltip: {
          backgroundColor: 'rgba(17, 24, 39, 0.8)',
          style: {
            color: '#fff'
          },
          borderWidth: 0,
          borderRadius: 8,
          shadow: true,
          padding: 12
        }
      });

      async function getData() {
        try {
          const response = await fetch("/nginx_status", {
            method: "GET",
            cache: "no-cache",
          });
          if (response.ok) {
            const text = await response.text();

            let current = 0;
            let lastValid = 0;

            const part = text.split(' ')[9];
            const series = charts.series[0];
            current = parseInt(part);
            
            console.log("(:");

            if (
              (current > 0 && (current - previous) > 0 && (current - previous) < 990000000) ||
              (current > 0 && (current - previous) > 0 && previous === null)
            ) {
              const shift = series.data.length > 40;

              if (previous !== null) {
                series.addPoint([Math.floor(Date.now()), current - previous], true, shift);
              }

              lastValid = current - previous;
              previous = current;
            } else {
              previous = null;
              console.log("Bad response");
            }

            setTimeout(getData, 1000);
          } else {
            throw new Error(`HTTP error! Status: ${response.status}`);
          }
        } catch (err) {
          console.log(err);
        }
      }

      (async () => {
        await getData();
      })()
    };
  </script>
</body>

</html>
