{% extends 'core/base.html' %}
{% load static %}
{% block title %}
  Medwings | Dashboard
{% endblock title %}

{% block content %}
  <div class="flex flex-col justify-center items-center gap-8 py-4 px-8 w-full h-full">

    <h1 class="w-full text-center">Dashboard</h1>
    <p class="text-secondary font-semibold">This page shows all of your recorded health data.</p>

    <div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
      <h2 class="w-full text-secondary-400 text-center">MEWS</h2>
      {% if mews_data %}
        <canvas id="mewsChart"></canvas>
      {% else %}
        <div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
          <p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
        </div>
      {% endif %}
    </div>

    <div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
      <h2 class="w-full text-secondary-400 text-center">Blood Pressure</h2>
      {% if blood_pressure_data %}
        <canvas id="bloodPressureChart"></canvas>
      {% else %}
        <div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
          <p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
        </div>
      {% endif %}
    </div>

    <div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
      <h2 class="w-full text-secondary-400 text-center">Body Temperature</h2>
      {% if body_temp_data %}
        <canvas id="bodyTempChart"></canvas>
      {% else %}
        <div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
          <p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
        </div>
      {% endif %}
    </div>

    <div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
      <h2 class="w-full text-secondary-400 text-center">Heart Rate</h2>
      {% if heart_rate_data %}
        <canvas id="heartRateChart"></canvas>
      {% else %}
        <div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
          <p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
        </div>
      {% endif %}
    </div>

    <div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
      <h2 class="w-full text-secondary-400 text-center">Blood Oxygenation</h2>
      {% if spo2_level_data %}
        <canvas id="spo2LevelChart"></canvas>
      {% else %}
        <div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
          <p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
        </div>
      {% endif %}
    </div>

    <div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
      <h2 class="w-full text-secondary-400 text-center">Respiration Score</h2>
      {% if respiration_score_data %}
        <canvas id="respirationScoreChart"></canvas>
      {% else %}
        <div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
          <p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
        </div>
      {% endif %}
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/date-fns@2.30.0/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  <script>
    async function createChart(id, data, label) {
      new Chart(document.getElementById(id), {
        type: 'scatter',
        data: {
          datasets: [{
            label: label,
            data: data,
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // color for point fill
            borderColor: 'rgba(75, 192, 192, 1)', // color for point border
            pointBackgroundColor: 'rgba(75, 192, 192, 1)', // color for point fill (on hover)
            pointBorderColor: '#fff', // color for point border (on hover)
            pointBorderWidth: 1, // border width for point (on hover)
          }]
        },
        options: {
          scales: {
            x: {
              type: 'time',
              position: 'bottom'
            },
            y: {
              type: 'linear',
              position: 'left'
            }
          }
        }
      });
    }

    const mewsData = JSON.parse('{{ mews_data|safe }}');
    const bloodPressureData = JSON.parse('{{ blood_pressure_data|safe }}');
    const bodyTempData = JSON.parse('{{ body_temp_data|safe }}');
    const heartRateData = JSON.parse('{{ heart_rate_data|safe }}');
    const spo2LevelData = JSON.parse('{{ spo2_level_data|safe }}');
    const respirationScoreData = JSON.parse('{{ respiration_score_data|safe }}');

    for (let dataset of [mewsData, bloodPressureData, bodyTempData, heartRateData, spo2LevelData, respirationScoreData]) {
      dataset.forEach((data) => {
        data.x = new Date(data.x * 1000).toISOString();
      });
    }

    {% if mews_data %}
      createChart("mewsChart", mewsData, "Modified Early Warning Score");
    {% endif %}
    {% if blood_pressure_data %}
      createChart("bloodPressureChart", bloodPressureData, "Systolic Blood Pressure (mmHg)");
    {% endif %}
    {% if body_temp_data %}
      createChart("bodyTempChart", bodyTempData, "Body Temperature (°C)");
    {% endif %}
    {% if heart_rate_data %}
      createChart("heartRateChart", heartRateData, "Heart Rate (bpm)");
    {% endif %}
    {% if spo2_level_data %}
      createChart("spo2LevelChart", spo2LevelData, "Blood Oxygenation (%)");
    {% endif %}
    {% if respiration_score_data %}
      createChart("respirationScoreChart", respirationScoreData, "Respiration Score");
    {% endif %}
  </script>
{% endblock content %}
