<!DOCTYPE html>
<html>
<head>
  <title>PVLOCAL - Starlight</title>
  <meta charset="UTF-8">
  <script src="https://code.highcharts.com/highcharts.js"></script>

  <style>
    body {
      font-family: Arial, sans-serif;
      background: #111;
      color: #eee;
      margin: 20px;
    }

    h1 {
      margin-bottom: 5px;
    }

    .updated {
      color: #aaa;
      margin-bottom: 20px;
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 25px;
      align-items: stretch;
    }

    .card {
      background: #222;
      border-radius: 10px;
      padding: 15px;
      min-width: 150px;
      min-width: 120px;
      box-shadow: 0 0 8px rgba(0,0,0,0.4);
      transition: all 0.25s ease;
    }
    .card-green {
      border: 1px solid #00cc66;
      box-shadow: 0 0 10px rgba(0, 255, 120, 0.35);
    }

    .card-red {
      border: 1px solid #ff6633;
      box-shadow: 0 0 10px rgba(255, 80, 50, 0.35);
    }

    .card-amber {
      border: 1px solid #ffcc00;
      box-shadow: 0 0 10px rgba(255, 200, 0, 0.35);
    }

    .label {
      color: #aaa;
      font-size: 14px;
    }

    .value {
      font-size: 28px;
      font-weight: bold;
      margin-top: 5px;
    }


    .stats-section {
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 20px;
      background: rgba(255,255,255,0.02);
    }

    .stats-title {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: rgba(255,255,255,0.75);
      margin-bottom: 12px;
      letter-spacing: 1px;
#     text-transform: uppercase;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 14px rgba(255,255,255,0.08);
    }

    .stats-divider {
      width: 1px;
      background: rgba(255,255,255,0.12);
      margin: 0 14px;
      align-self: stretch;
      box-shadow: 0 0 6px rgba(255,255,255,0.08);
    }

    #chart {
      height: 500px;
      background: #181818;
      border-radius: 10px;
      padding: 10px;
      border: 1px solid #333;
    }

    #gridChart {
      height: 300px;
      background: #181818;
      border-radius: 10px;
      padding: 10px;
     border: 1px solid #333;
    }
	
  </style>
</head>

<body>

<h1>PVLOCAL - Starlight</h1>
<div class="updated" id="lastUpdated">Waiting for data...</div>

<div style="margin-bottom: 20px;">
  <label for="historyDate">View date: </label>
  <button onclick="changeDate(-1)">Previous Day</button>
  <input type="date" id="historyDate">
  <button onclick="loadSelectedDate()">Load</button>
  <button id="nextDayBtn" onclick="changeDate(1)">Next Day</button>
</div>

<div class="stats-section">

  <div class="stats-wrapper">

    <div class="stats-group">
	
        <div class="stats-title">
         Live Stats <span id="sunIcon" style="color: #ffcc33;">☀</span>
        </div>

        <div class="cards">

        <div class="card" id="generationCard"
             title="Green: normal. Amber: low generation while sun is up. Red: very low generation while sun is up.">
          <div class="label">Generation - Live Stats</div>
          <div class="value" id="generation">-- W</div>
        </div>
		
        <div class="card" id="consumptionCard">
          <div class="label">Consumption - Live Stats</div>
          <div class="value" id="consumption">-- W</div>
        </div>

        <div class="card" id="importCard"
             title="Green: exporting or low import. Amber: moderate import. Red: high import.">
          <div class="label">Import - Live Stats</div>
          <div class="value" id="import">-- W</div>
        </div>

        <div class="card" id="exportCard"
             title="Green: night time or export above 200W. Amber: weak daytime export. Red: no/very low daytime export.">
          <div class="label">Export - Live Stats</div>
          <div class="value" id="export">-- W</div>
        </div>

        <div class="card" id="voltageCard"
             title="Green: 235V to 245V. Amber: 230V-235V or 245V-250V. Red: below 230V or above 250V.">
          <div class="label">Voltage - Live Stats</div>
          <div class="value" id="voltage">-- V</div>
        </div>

        <div class="card" id="frequencyCard"
             title="Green: 49.9Hz to 50.1Hz. Amber: 49.8-49.9Hz or 50.1-50.2Hz. Red: outside 49.8Hz to 50.2Hz.">
          <div class="label">Frequency - Live Stats</div>
          <div class="value" id="frequency">-- Hz</div>
        </div>

      </div>
    </div>

    <div class="stats-divider"></div>

    <div class="stats-group">
      <div class="stats-title" id="historyStatsTitle">
           Selected Day Stats
      </div>

        <div class="cards">

          <div class="card" id="totalGenerationCard">
             <div class="label">Generation</div>
             <div class="value" id="totalGeneration">-- kWh</div>
          </div>

        <div class="card"  id="totalConsumptionCard">
          <div class="label">Consumption</div>
          <div class="value" id="totalConsumption">-- kWh</div>
        </div>

        <div class="card" id="totalImportCard">
          <div class="label">Import</div>
          <div class="value" id="totalImport">-- kWh</div>
        </div>

        <div class="card"  id="totalExportCard">
          <div class="label">Export</div>
          <div class="value" id="totalExport">-- kWh</div>
        </div>

        <div class="card" id="peakGenerationCard">
           <div class="label">Peak Generation</div>
           <div class="value" id="peakGeneration">-- W</div>
        </div>

        <div class="card" id="peakConsumptionCard">
           <div class="label">Peak Consumption</div>
           <div class="value" id="peakConsumption">-- W</div>
        </div>

        <div class="card" id="peakImportCard">
           <div class="label">Peak Import</div>
           <div class="value" id="peakImport">-- W</div>
        </div>

        <div class="card" id="peakExportCard">
           <div class="label">Peak Export</div>
           <div class="value" id="peakExport">-- W</div>
        </div>

        <div class="card" id="minVoltageCard"
             title="Selected day min voltage. Green: 235V or above. Amber: below 235V. Red: below 230V.">
           <div class="label">Min Voltage</div>
           <div class="value" id="minVoltage">-- V</div>
        </div>

        <div class="card" id="maxVoltageCard"
             title="Selected day max voltage. Green: 245V or below. Amber: above 245V. Red: above 250V.">
           <div class="label">Max Voltage</div>
           <div class="value" id="maxVoltage">-- V</div>
        </div>
  
      </div>
    </div>
  </div>
</div>

<div id="chart"></div>
<div id="gridChart" style="margin-top: 30px;"></div>

<script>

// ====================================================
// Highcharts Global Configuration
//
// Configure Highcharts to use local browser time
// instead of UTC.
//
// Important because all PVLOCAL history files are
// generated using local Perth time.
// ====================================================


Highcharts.setOptions({
  time: {
    useUTC: false
  }
});

// ====================================================
// Global Variables
//
// Stores chart objects that need to be reused when
// the page refreshes.
//
// This prevents Highcharts from creating a new chart
// every time new data is loaded.
// ====================================================

let chart;

// ====================================================
// Helper Functions
//
// Small reusable utility functions used throughout
// the PVLOCAL dashboard.
//
// These help keep the main logic cleaner and easier
// to maintain.
// ====================================================

function toNumber(value) {
  const n = Number(value);
  return Number.isFinite(n) ? n : 0;
}

// ====================================================
// Live Data Functions
//
// Handles all real-time dashboard updates including:
//
//   - Reading current live sensor values
//   - Updating dashboard cards
//   - Applying card colour logic
//   - Updating sun/moon status
//   - Updating last refresh timestamp
//
// Data source:
//   data/live.json
//
// This file is generated by the Home Assistant
// PVLOCAL automation every 5 minutes.
// ====================================================
 
async function loadLiveData() {

// **********         Read Sensors   ****************************

  const response = await fetch('data/live.json?v=' + Date.now());
  const data = await response.json();

  document.getElementById('generation').textContent = data.generation + ' W';
  document.getElementById('consumption').textContent = data.consumption + ' W';
  document.getElementById('export').textContent = data.export + ' W';
  document.getElementById('import').textContent = data.import + ' W';
  document.getElementById('voltage').textContent = data.voltage + ' V';
  document.getElementById('frequency').textContent = data.frequency + ' Hz';

  document.getElementById('lastUpdated').textContent =
    'Last update: ' + data.date + ' ' + data.time;
	
  const exportValue = data.export || 0;
  const importValue = data.import || 0;
  const voltageValue = data.voltage || 0;
  const frequencyValue = data.frequency || 0;

  const generationValue = Number(data.generation || 0);
  const consumptionValue = Number(data.consumption || 0);

  const exportCard = document.getElementById('exportCard');
  const importCard = document.getElementById('importCard');
  const voltageCard = document.getElementById('voltageCard');
  const frequencyCard = document.getElementById('frequencyCard');
  const consumptionCard = document.getElementById('consumptionCard');
  const generationCard = document.getElementById('generationCard');
  const sunState = data.sun || 'below_horizon';
  const sunIcon = document.getElementById('sunIcon');

if (sunState === 'below_horizon') {
  sunIcon.textContent = '🌙';
} else {
  sunIcon.textContent = '☀';
}


/*
  Generation Card Colour
  
        When Sun Below Horizon, card set to green as normal for no output of inverter (gernationValue) 
  
        When sun above horizon card colour determined by gernationValue
		
*/
generationCard.classList.remove(
  'card-green',
  'card-amber',
  'card-red'
);

if (sunState === 'below_horizon') {

  generationCard.classList.add('card-green');
  exportCard.classList.add('card-green');

} else if (generationValue > 1000) {

  generationCard.classList.add('card-green');

} else if (generationValue > 10) {

  generationCard.classList.add('card-amber');

} else {

  generationCard.classList.add('card-red');
}

// --------------------------
// Consumption Card Colour
//
//   If we are importing we care what consumption is so show colour based on consumptionValue
//   If we are exporting, then we don"t care what the value of consumptionValue is,  so card is green
//
//   If Importing
//         Consumption > 2000 - red
//         Consumption > 1000 - amber
//         Consumption >   50 - green
//   If Exporting
//         Consumption Always - green
// --------------------------

consumptionCard.classList.remove(
  'card-green',
  'card-amber',
  'card-red'
);

if (importValue > exportValue) {

  if (consumptionValue > 2000) {
    consumptionCard.classList.add('card-red');

  } else if (consumptionValue > 1000) {
    consumptionCard.classList.add('card-amber');

  } else if (consumptionValue > 50) {
    consumptionCard.classList.add('card-green');
  }

} else {
  consumptionCard.classList.add('card-green');
}

// ---------------------------
// Export Card Logic
//
//         If sun is down card is green
//         When sun is up card is based on value of exportValue
//
// ---------------------------

exportCard.classList.remove(
  'card-green',
  'card-amber',
  'card-red'
);

// Night time
if (sunState === 'below_horizon') {

  exportCard.classList.add('card-green');

} else {

  // Daylight export levels

  if (exportValue > 200) {

    exportCard.classList.add('card-green');

  } else if (exportValue > 10) {

    exportCard.classList.add('card-amber');

  } else {

    exportCard.classList.add('card-red');

  }
}

/*
Import Card Colour

Export > Import
    → always green

Otherwise:
    Import > 2000 → red
    Import > 1000  → amber
    Else          → green
*/
// Exporting more than importing = good

importCard.classList.remove(
  'card-green',
  'card-amber',
  'card-red'
);

if (exportValue > importValue) {

  importCard.classList.add('card-green');

} else {

  // Importing from grid
  if (importValue > 2000) {

    importCard.classList.add('card-red');

  } else if (importValue > 1000) {

    importCard.classList.add('card-amber');

  } else {

    importCard.classList.add('card-green');

  }
}


/*
Voltage Card Colour

	Votage > 250 or < 230 - red
	Votage > 245 or < 235 - ramber
	else                  - green
*/

voltageCard.classList.remove(
  'card-green',
  'card-amber',
  'card-red'
);

if (voltageValue < 230 || voltageValue > 250) {

  voltageCard.classList.add('card-red');

} else if (voltageValue < 235 || voltageValue > 245) {

  voltageCard.classList.add('card-amber');

} else {

  voltageCard.classList.add('card-green');

}

/*
Frequency Card Colour

	frequencyValue < 49.8 or > 50.2 - red
	frequencyValue < 49.9 or > 50.1 - ramber
	          else                  - green
*/


frequencyCard.classList.remove(
     'card-green',
     'card-amber',
     'card-red'
);

if (frequencyValue < 49.8 || frequencyValue > 50.2) {

  frequencyCard.classList.add('card-red');

} else if (frequencyValue < 49.9 || frequencyValue > 50.1) {

  frequencyCard.classList.add('card-amber');

}else {

  frequencyCard.classList.add('card-green');

}
}

async function loadHistoryData() {

// ----------------------------------------------------
// Determine Which History File To Load
//
// If the user has selected a date from the date picker
// use that date.
//
// Otherwise default to today's local date.
//
// History files use the format:
//
//   history-YYYY-MM-DD.csv
//
// Example:
//   history-2026-05-22.csv
// ----------------------------------------------------

  const selectedDate =
    document.getElementById('historyDate').value ||
    new Date().toISOString().split('T')[0];

   document.getElementById('historyStatsTitle').textContent =
      'Selected Day Stats - ' + selectedDate;

  const response = await fetch(
    'data/history-' + selectedDate + '.csv?v=' + Date.now()
);

  const text = await response.text();

// ----------------------------------------------------
// Create Data Arrays And Running Totals
//
// These arrays are used by Highcharts to build the
// historical graphs.
//
// Each array stores timestamp/value pairs.
//
// Example:
//   [timestamp, value]
//
// Running totals are also maintained to calculate:
//
//   - Daily energy totals
//   - Peak values
//   - Min/max voltage
//   - Running accumulated kWh curves
// ----------------------------------------------------

  const generation = [];
  const consumption = [];
  const exportPower = [];
  const importPower = [];
  const voltage = [];
  const frequency = [];
  const generationEnergy = [];
  const consumptionEnergy = [];
  let totalGenerationWh = 0;
  let totalConsumptionWh = 0;
  let totalExportWh = 0;
  let totalImportWh = 0;
  let runningGenerationKWh = 0;
  let runningConsumptionKWh = 0;
  let peakGeneration = 0;
  let peakConsumption = 0;
  let peakExport = 0;
  let peakImport = 0;
  let minVoltage = null;
  let maxVoltage = null;

// ----------------------------------------------------
// Parse CSV History File
//
// The CSV file format is:
//
//   date,time,generation,consumption,
//   voltage,frequency,export,import
//
// Example row:
//
//   2026-05-22,14:35,4200,1800,242.1,49.98,2100,0
//
// Each row represents one 5-minute sample written
// by the Home Assistant automation.
// ----------------------------------------------------

  const rows = text.trim().split('\n');

// ----------------------------------------------------
// Process Each 5-Minute History Sample
//
// For every CSV row:
//
//   1. Convert date/time into a JavaScript timestamp
//   2. Build chart data arrays
//   3. Calculate running energy totals
//   4. Calculate running accumulated kWh curves
//   5. Track peak power values
//   6. Track minimum and maximum voltage
//
// Highcharts requires timestamps in milliseconds.
// ----------------------------------------------------

  rows.forEach(row => {
    const cols = row.split(',');

    if (cols.length < 8) return;

    const date = cols[0];
    const time = cols[1];
 
    const parts = time.split(':');

// ----------------------------------------------------
// Convert CSV Date/Time Into JavaScript Timestamp
//
// Highcharts uses Unix timestamps in milliseconds
// for all datetime chart axes.
//
// The CSV stores:
//
//   date = YYYY-MM-DD
//   time = HH:MM
//
// These values are converted into a local browser
// timestamp for chart plotting.
//
// Example:
//
//   2026-05-22 + 14:35
//        ↓
//   1779450900000
// ----------------------------------------------------

    const timestamp = new Date(
      Number(date.substring(0,4)),
      Number(date.substring(5,7)) - 1,
      Number(date.substring(8,10)),
      Number(parts[0]),
      Number(parts[1]),
      0
).getTime();

    generation.push([timestamp, toNumber(cols[2])]);

// ----------------------------------------------------
// Convert Instantaneous Power Into Accumulated Energy
//
// CSV power values are instantaneous Watts sampled
// every 5 minutes.
//
// To convert power into energy:
//
//   Watts × Hours = Watt-hours
//
// Since each sample represents 5 minutes:
//
//   5 minutes = 5 / 60 hours
//
// Divide by 1000 to convert Wh into kWh.
//
// This creates the running accumulated energy curve
// displayed on the history chart.
// ----------------------------------------------------
	
	runningGenerationKWh += toNumber(cols[2]) * (5 / 60) / 1000;

    generationEnergy.push([
     timestamp,
     Number(runningGenerationKWh.toFixed(3))
    ]);	
	
    consumption.push([timestamp, toNumber(cols[3])]);
	
	runningConsumptionKWh += toNumber(cols[3]) * (5 / 60) / 1000;

    consumptionEnergy.push([
     timestamp,
     Number(runningConsumptionKWh.toFixed(3))
    ]);
	
    voltage.push([timestamp, toNumber(cols[4])]);
	frequency.push([timestamp, toNumber(cols[5])]);
    exportPower.push([timestamp, toNumber(cols[6])]);
    importPower.push([timestamp, toNumber(cols[7])]);
	totalGenerationWh += toNumber(cols[2]) * (5 / 60);
    totalConsumptionWh += toNumber(cols[3]) * (5 / 60);
    totalExportWh += toNumber(cols[6]) * (5 / 60);
    totalImportWh += toNumber(cols[7]) * (5 / 60);
	peakGeneration = Math.max(peakGeneration, toNumber(cols[2]));
    peakConsumption = Math.max(peakConsumption, toNumber(cols[3]));
    peakExport = Math.max(peakExport, toNumber(cols[6]));
    peakImport = Math.max(peakImport, toNumber(cols[7]));

    const voltageValue = toNumber(cols[4]);

    if (minVoltage === null || voltageValue < minVoltage) {
      minVoltage = voltageValue;
    }

    if (maxVoltage === null || voltageValue > maxVoltage) {
      maxVoltage = voltageValue;
    }
	
    });

// ----------------------------------------------------
// Update Historical Statistics Cards
//
// Display calculated daily totals and peak values
// on the dashboard statistic cards.
//
// Values shown include:
//
//   - Total generation
//   - Total consumption
//   - Total export/import
//   - Peak power values
//   - Min/max voltage
//
// Most totals are converted from Wh to kWh for
// easier readability.
// ----------------------------------------------------

  document.getElementById('totalGeneration').textContent =
    (totalGenerationWh / 1000).toFixed(2) + ' kWh';

  document.getElementById('totalConsumption').textContent =
    (totalConsumptionWh / 1000).toFixed(2) + ' kWh';

  document.getElementById('totalExport').textContent =
    (totalExportWh / 1000).toFixed(2) + ' kWh';

  document.getElementById('totalImport').textContent =
    (totalImportWh / 1000).toFixed(2) + ' kWh';

// ----------------------------------------------------
// Prepare Historical Statistic Cards For Colour Logic
//
// Store references to each history card so their
// colour classes can be updated based on the selected
// day's totals, peaks, and voltage limits.
// ----------------------------------------------------
	
  const totalImportCard = document.getElementById('totalImportCard');
  
  const totalGenerationCard = document.getElementById('totalGenerationCard');
  const maxVoltageCard = document.getElementById('maxVoltageCard');
  const minVoltageCard = document.getElementById('minVoltageCard');
  const peakImportCard = document.getElementById('peakImportCard');
  const peakExportCard = document.getElementById('peakExportCard');
  const peakConsumptionCard = document.getElementById('peakConsumptionCard');
  const peakGenerationCard = document.getElementById('peakGenerationCard');
  const totalExportCard = document.getElementById('totalExportCard');
  const totalConsumptionCard = document.getElementById('totalConsumptionCard');

/*
 Total Consumption Card Colour

         Total Consumption KWh > 25000 - red
         Total Consumption KWh >  15000 - amber
         else                       - green
*/

  totalConsumptionCard.classList.remove(
    'card-green',
    'card-amber',
    'card-red',
  );

  if (totalConsumptionWh > 25000) {
    totalConsumptionCard.classList.add('card-red');
  } else if (totalConsumptionWh > 15000) {
    totalConsumptionCard.classList.add('card-amber');
  } else {
    totalConsumptionCard.classList.add('card-green');
  }


/*
 Total Export Card Colour

         Total Export KWh > 7   - green
         Total Export KWh > 0.1 - amber
         else                   - red
*/

  totalExportCard.classList.remove(
    'card-green',
    'card-amber',
    'card-red',
  );

  if (totalExportWh > 7000) {
    totalExportCard.classList.add('card-green');
  } else if (totalExportWh > 100) {
    totalExportCard.classList.add('card-amber');
  } else {
    totalExportCard.classList.add('card-red');
  }


/*
 Peak Generation Card Colour

         Gernerating > 3000 - green
         Gernerating > 2000 - amber
         else               - red
*/

  peakGenerationCard.classList.remove(
    'card-green',
    'card-amber',
    'card-red',
  );

  if (peakGeneration > 3000) {
    peakGenerationCard.classList.add('card-green');
  } else if (peakGeneration > 2000) {
    peakGenerationCard.classList.add('card-amber');
  } else {
    peakGenerationCard.classList.add('card-red');
  }


/*
 Peak Consumption Card Colour


   If Importing
         Consumption > 4000 - red
         Consumption > 3000 - amber
         Consumption >   50 - green
   If Exporting
         Consumption Always - green
*/

  peakConsumptionCard.classList.remove(
    'card-green',
    'card-amber',
    'card-red',
  );

  if (peakConsumption > 4000) {
    peakConsumptionCard.classList.add('card-red');
  } else if (peakConsumption > 3000) {
    peakConsumptionCard.classList.add('card-amber');
  } else {
    peakConsumptionCard.classList.add('card-green');
  }
  
/*
     Peak Export(History) Card Colour

	  Export > 2000  - green
	  Export > 500  - amber
	  else           - green

*/

  peakExportCard.classList.remove(
    'card-green',
    'card-amber',
    'card-red',
  );

  if (peakExport > 2000) {
    peakExportCard.classList.add('card-green');
  } else if (peakExport > 500) {
    peakExportCard.classList.add('card-amber');
  } else {
    peakExportCard.classList.add('card-red');
  }


/*
     Max Voltage (History) Card Colour

	  Votage > 250  - red
	  Votage > 245 - amber
	  else         - green

*/

maxVoltageCard.classList.remove(
  'card-green',
  'card-amber',
  'card-red'
);

if (maxVoltage > 250) {
  maxVoltageCard.classList.add('card-red');

} else if (maxVoltage > 245) {
  maxVoltageCard.classList.add('card-amber');

} else {
  maxVoltageCard.classList.add('card-green');
}  

/*
     Peak Import(History) Card Colour

	  Import > 4000  - red
	  Import > 3000  - amber
	  else           - green

*/

  peakImportCard.classList.remove(
    'card-green',
    'card-amber',
    'card-red',
  );

  if (peakImport > 4000) {
    peakImportCard.classList.add('card-red');
  } else if (peakImport > 3000) {
    peakImportCard.classList.add('card-amber');
  } else {
    peakImportCard.classList.add('card-green');
  }


/*
     Min Voltage (History) Card Colour

     Voltage < 230 - red
     Voltage < 235 - amber
     else          - green
*/

minVoltageCard.classList.remove(
  'card-green',
  'card-amber',
  'card-red'
);

if (minVoltage < 230) {

  minVoltageCard.classList.add('card-red');

} else if (minVoltage < 235) {

  minVoltageCard.classList.add('card-amber');

} else {

  minVoltageCard.classList.add('card-green');

}


/*
     Total Import (History) Card Colour

     Total Import < 15kWh  - red
     Total Import < 10kWh  - amber
     else                  - green
*/

  totalImportCard.classList.remove(
    'card-red',
	'card-amber',
	'card-green',
	);

  if (totalImportWh / 1000 > 15) {
    totalImportCard.classList.add('card-red');
  } else if (totalImportWh / 1000 > 10) {
    totalImportCard.classList.add('card-amber');
  } else {
    totalImportCard.classList.add('card-green');
  }


/*
     Total Generation (History) Card Colour

     Total Generation > 13kWh  - greend
     Total Generation > 100Wh  - amber
     else                  - green
*/

  totalGenerationCard.classList.remove(
    'card-green',
    'card-amber',
    'card-red',
  );

  if (totalGenerationWh / 1000 > 13) {
    totalGenerationCard.classList.add('card-green');
  } else if (totalGenerationWh / 1000 > 0.1) {
    totalGenerationCard.classList.add('card-amber');
  } else {
    totalGenerationCard.classList.add('card-red');
  }
  
  document.getElementById('peakGeneration').textContent =
    peakGeneration.toFixed(0) + ' W';

  document.getElementById('peakConsumption').textContent =
    peakConsumption.toFixed(0) + ' W';

  document.getElementById('peakExport').textContent =
    peakExport.toFixed(0) + ' W';

  document.getElementById('peakImport').textContent =
    peakImport.toFixed(0) + ' W';

  document.getElementById('minVoltage').textContent =
    minVoltage !== null ? minVoltage.toFixed(2) + ' V' : '-- V';

  document.getElementById('maxVoltage').textContent =
    maxVoltage !== null ? maxVoltage.toFixed(2) + ' V' : '-- V';

// ----------------------------------------------------
// Create Or Update Main Power History Chart
//
// The chart is created once on first page load.
//
// On later refreshes, the existing chart is reused and
// only the data series and title are updated.
//
// This avoids rebuilding the whole Highcharts object
// every 30 seconds.
// ----------------------------------------------------

  if (!chart) {
    chart = Highcharts.chart('chart', {
      chart: {
        zoomType: 'x',
        backgroundColor: '#181818'
      },

      title: {
        text: 'Power History For - ' + selectedDate,
          style: {
          color: '#eee'
          }
      },
	  
      xAxis: {
        type: 'datetime',
        labels: {
          style: {
           color: '#ccc'
          }
        }
      },

      yAxis: [{
        labels: {
          style: {
            color: '#ccc'
          }
      },

      title: {
        text: 'Power W',
        style: {
          color: '#eee',
          fontWeight: 'bold',
          fontSize: '13px'
  }
}
		
      },

	  {
        labels: {
          style: {
            color: '#ccc',
          }

     },
    
        title: {
          text: 'Energy kWh',
          style: {
            color: '#eee',
            fontWeight: 'bold',
            fontSize: '13px'
          }

	
        },

  opposite: true
}],
	  
      tooltip: {
        shared: true,
        xDateFormat: '%H:%M'
      },
      legend: {
        itemStyle: {
          color: '#eee'
        },
      itemHoverStyle: {
        color: '#fff'
  }
},

      series: [
        {
          name: 'Generation',
          data: generation,
          type: 'spline',
		  lineWidth: 4,
          yAxis: 0
        },
        {
          name: 'Generation Energy',
          data: generationEnergy,
          type: 'area',
		  color: {
            linearGradient: [0, 0, 0, 300],
            stops: [
              [0, 'rgba(120, 90, 255, 0.55)'],
              [1, 'rgba(120, 90, 255, 0.08)']
            ]
        },
		
          yAxis: 1,
          tooltip: {
            valueSuffix: ' kWh'
          }
        },		
        {
          name: 'Consumption Energy',
          data: consumptionEnergy,
          type: 'area',
		  color: {
            linearGradient: [0, 0, 0, 300],
            stops: [
               [0, 'rgba(0, 255, 140, 0.45)'],
               [1, 'rgba(0, 255, 140, 0.06)']
            ]
        },
          yAxis: 1,
          tooltip: {
            valueSuffix: ' kWh'
          }
        },
        {
          name: 'Consumption',
          data: consumption,
          type: 'spline',
		  lineWidth: 2,
          yAxis: 0
        },
        {
          name: 'Export',
          data: exportPower,
          type: 'spline',
		  dashStyle: 'Dash',
		  lineWidth: 2,
          yAxis: 0
        },
        {
          name: 'Import',
          data: importPower,
          type: 'spline',
		  dashStyle: 'Dash',
		  lineWidth: 2,
          yAxis: 0
        },
      ],

      credits: {
        enabled: false
      }
    });
  } else {
    chart.series[0].setData(generation, false);
    chart.series[1].setData(generationEnergy, false);
    chart.series[2].setData(consumptionEnergy, false);
    chart.series[3].setData(consumption, false);
    chart.series[4].setData(exportPower, false);
    chart.series[5].setData(importPower, false);
	
	chart.setTitle({
      text: 'Power History For - ' + selectedDate
    });
	
    chart.redraw();
  }
  
if (!window.gridChart || !window.gridChart.series || window.gridChart.series.length < 2) {

  window.gridChart = Highcharts.chart('gridChart', {

    chart: {
      zoomType: 'x',
      height: 300,
      backgroundColor: '#181818'
    },
      title: {
        text: 'Grid Quality For - ' + selectedDate,
        style: {
          color: '#eee'
        }
      },

    xAxis: {
      type: 'datetime',
      labels: {
        style: {
          color: '#ccc'
        }
      }
    },

    yAxis: [{

        labels: {
          style: {
            color: '#ccc'
          }
      },

        title: {
          text: 'Voltage',
          style: {
            color: '#eee',
            fontWeight: 'bold',
            fontSize: '13px'
          }
        }
 },

	{
        labels: {
          style: {
            color: '#ccc'
          }
  },

        title: {
          text: 'Frequency Hz',
          style: {
            color: '#eee',
            fontWeight: 'bold',
            fontSize: '13px'
          }
  },

  opposite: true
}
	],

    tooltip: {
      shared: true,
      xDateFormat: '%H:%M'
    },

    legend: {
      itemStyle: {
        color: '#eee'
      },
      itemHoverStyle: {
        color: '#fff'
      }
},

    series: [{
      name: 'Voltage',
      data: voltage,
      type: 'spline',
	  lineWidth: 4,
      yAxis: 0
    }, {
      name: 'Frequency',
      data: frequency,
      type: 'spline',
	  lineWidth: 2,
      yAxis: 1
    }],

    credits: {
      enabled: false
    }

  });

} else {

  window.gridChart.series[0].setData(voltage, false);
  window.gridChart.series[1].setData(frequency, false);
  
  window.gridChart.setTitle({
    text: 'Grid Quality For - ' + selectedDate
  });
  
  window.gridChart.redraw();

}

}



async function updatePage() {
  try {
    await loadLiveData();

if (!document.getElementById('historyDate').value) {
  document.getElementById('historyDate').value =
    formatLocalDate(new Date());
}

await loadHistoryData();
  } catch (err) {
    document.getElementById('lastUpdated').textContent =
      'Error loading data: ' + err.message;
    console.error(err);
  }
}

function loadSelectedDate() {
  updateNextDayButton();
  loadHistoryData();
}

function formatLocalDate(date) {
  const yyyy = date.getFullYear();
  const mm = String(date.getMonth() + 1).padStart(2, '0');
  const dd = String(date.getDate()).padStart(2, '0');
  return `${yyyy}-${mm}-${dd}`;
}

function changeDate(days) {
  const dateInput = document.getElementById('historyDate');

  let currentDate = dateInput.value
    ? new Date(dateInput.value + 'T12:00:00')
    : new Date();

  currentDate.setDate(currentDate.getDate() + days);

  dateInput.value = formatLocalDate(currentDate);

  updateNextDayButton();

  loadHistoryData();
}
function updateNextDayButton() {
  const dateInput = document.getElementById('historyDate');
  const nextBtn = document.getElementById('nextDayBtn');

  const selectedDate = new Date(dateInput.value + 'T00:00:00');

  const today = new Date();
  today.setHours(0,0,0,0);

  if (selectedDate >= today) {
    nextBtn.style.display = 'none';
  } else {
    nextBtn.style.display = 'inline-block';
  }
}

updatePage();

// Refresh page data every 30 seconds.
// Your HA automation writes new data every 5 minutes.
setInterval(updatePage, 30000);
</script>

</body>
</html>