// Map setup
const map = L.map('heatmap-container').setView([0, 0], 1);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Dock door coordinates config
const coords = {};
for (let d=106; d<=138; d++) coords[d] = [0, d-122];
for (let d=142; d<=201; d++) coords[d] = [ -1, d-172];
for (let d=202; d<=210; d++) coords[d] = [ 1, d-206];

// Color scale
function getColor(h) {
  const pct = (h - 70) / 30;
  return `rgba(${255},${Math.round(255*(1-pct))},0,0.7)`;
}

// Render markers & listen SSE
fetch('/api/readings').then(r=>r.json()).then(all => all.forEach(plot));
function plot({dockDoor, heatIndex}) {
  const [lat, lon] = coords[dockDoor];
  L.rectangle([[lat-0.1, lon-0.1],[lat+0.1, lon+0.1]],{color:getColor(heatIndex)}).addTo(map);
}

new EventSource('/api/stream').addEventListener('new-reading', e => plot(JSON.parse(e.data)));