// public/scripts/trends.js

// ─── Timeframes ──────────────────────────────────────────────────────────────
const tfConfig = [
  { unit:'hours',  count:24,  label:'Last 24 Hours'   },
  { unit:'days',   count:7,   label:'Last 7 Days'     },
  { unit:'weeks',  count:4,   label:'Last 4 Weeks'    },
  { unit:'months', count:12,  label:'Last 12 Months'  },
  { unit:'years',  count:1,   label:'All Time'        }
];

// ─── Helpers ─────────────────────────────────────────────────────────────────
function formatEST(epoch) {
  return new Date(epoch).toLocaleString('en-US', {
    timeZone: 'America/New_York',
    month:    'numeric',
    day:      'numeric',
    year:     '2-digit',
    hour12:   false,
    hour:     '2-digit',
    minute:   '2-digit'
  }).replace(',', ' @');
}
function subtract(date, count, unit) {
  const d = new Date(date);
  switch(unit){
    case 'hours':  d.setHours(d.getHours()  - count); break;
    case 'days':   d.setDate(d.getDate()     - count); break;
    case 'weeks':  d.setDate(d.getDate()     - 7*count); break;
    case 'months': d.setMonth(d.getMonth()   - count); break;
    case 'years':  d.setFullYear(d.getFullYear() - count); break;
  }
  return d;
}

// ─── State ────────────────────────────────────────────────────────────────────
let readings = [];
let chart;

// ─── On Load ─────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async() => {
  const data = await fetch('/api/readings').then(r=>r.json());
  readings = data.map(r=>({
    ...r,
    ts: formatEST(r.epoch_ms),
    date: new Date(r.epoch_ms)
  }));
  setupUI(); initChart(); updateView();
});

// ─── UI Wiring ────────────────────────────────────────────────────────────────
function setupUI(){
  const slider = document.getElementById('timeframe-slider');
  const label  = document.getElementById('timeframe-label');
  slider.addEventListener('input',()=>{
    label.textContent = tfConfig[slider.value].label;
    updateView();
  });
  label.textContent = tfConfig[slider.value].label;

  document.getElementsByName('metric').forEach(cb=>cb.addEventListener('change',updateView));

  document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{
    th.addEventListener('click', ()=>{
      const idx = th.cellIndex;
      const asc = !th.classList.contains('asc');
      const tbody = document.getElementById('trends-table-body');
      const rows  = Array.from(tbody.rows);
      rows.sort((a,b)=>{
        return asc
          ? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent,undefined,{numeric:true})
          : b.cells[idx].textContent.localeCompare(a.cells[idx].textContent,undefined,{numeric:true});
      });
      th.classList.toggle('asc',asc);
      rows.forEach(r=>tbody.appendChild(r));
    });
  });
}

// ─── Chart.js Setup ──────────────────────────────────────────────────────────
function initChart(){
  const ctx = document.getElementById('trend-chart').getContext('2d');
  chart = new Chart(ctx,{ 
    type:'line',
    data:{labels:[],datasets:[]},
    options:{
      scales:{
        x:{ title:{display:true,text:'Time (EST)'} },
        y:{ title:{display:true,text:'Value'} }
      },
      interaction:{mode:'index',intersect:false},
      plugins:{legend:{position:'top'}},
      maintainAspectRatio:false
    }
  });
}

// ─── Render ───────────────────────────────────────────────────────────────────
function updateView(){
  const idx    = +document.getElementById('timeframe-slider').value;
  const {unit,count} = tfConfig[idx];
  const cutoff = subtract(Date.now(),count,unit);

  const filtered = readings.filter(r=>r.date>=cutoff);
  const selected = Array.from(document.getElementsByName('metric'))
    .filter(cb=>cb.checked).map(cb=>cb.value);

  const labels = filtered.map(r=>r.ts);
  const datasets = [];
  if (selected.includes('temperature'))
    datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 });
  if (selected.includes('humidity'))
    datasets.push({ label:'Humidity (%)',      data:filtered.map(r=>r.humidity),    tension:0.3 });
  if (selected.includes('heatIndex'))
    datasets.push({ label:'Heat Index (°F)',   data:filtered.map(r=>r.heatIndex),   tension:0.3 });

  chart.data.labels   = labels;
  chart.data.datasets = datasets;
  chart.update();

  const tbody = document.getElementById('trends-table-body');
  tbody.innerHTML = '';
  filtered.forEach(r=>{
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${r.ts}</td>
      <td>${r.temperature.toFixed(1)}</td>
      <td>${r.humidity.toFixed(1)}</td>
      <td>${r.heatIndex.toFixed(2)}</td>
      <td>${r.stationDockDoor}</td>
      <td>${r.location}</td>
    `;
    tbody.appendChild(tr);
  });
}