const ctxD = document.getElementById('dailyChart').getContext('2d');
const ctxW = document.getElementById('weeklyChart').getContext('2d');
const ctxM = document.getElementById('monthlyChart').getContext('2d');

async function drawTrend(ctx, period) {
  const all = await fetch('/api/readings').then(r=>r.json());
  // group by day/week/month
  const groups = {};
  all.forEach(r => {
    const d = new Date(r.timestamp);
    let key;
    if (period==='daily')   key = d.toISOString().slice(0,10);
    if (period==='weekly')  key = `${d.getFullYear()}-W${Math.ceil(d.getDate()/7)}`;
    if (period==='monthly') key = d.toISOString().slice(0,7);
    groups[key] = groups[key]||[];
    groups[key].push(r.heatIndex);
  });
  const labels = Object.keys(groups);
  const data = labels.map(k => {
    const arr = groups[k];
    return {
      max: Math.max(...arr),
      min: Math.min(...arr),
      avg: arr.reduce((a,b)=>a+b,0)/arr.length
    };
  });
  new Chart(ctx, {
    type: 'line',
    data: {
      labels,
      datasets: [
        { label: 'Max', data: data.map(x=>x.max) },
        { label: 'Avg', data: data.map(x=>x.avg) },
        { label: 'Min', data: data.map(x=>x.min) }
      ]
    }
  });
}

['daily','weekly','monthly'].forEach((p,i)=>drawTrend([ctxD,ctxW,ctxM][i], p));