<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>LandWatch.AI — Wildfire Risk</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
  <style>
    html, body { height:100%; margin:0; }
    #topbar { position:fixed; z-index:1000; top:0; left:0; right:0; background:#0f172a; color:#e2e8f0; padding:8px 12px; font:14px/1.2 system-ui,Segoe UI,Roboto,Arial; display:flex; gap:12px; align-items:center; }
    #topbar .pill { background:#1e293b; padding:4px 8px; border-radius:999px; }
    #map { height:100vh; width:100vw; }
    .legend { background:#fff; padding:8px 10px; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.25); color:#111; font-size:14px; }
    .legend .swatch { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; }
    /* push map content below topbar */
    body { padding-top:42px; }
  </style>
</head>
<body>
  <div id="topbar">
    <strong>LandWatch.AI — Wildfire Risk</strong>
    <span id="updated" class="pill">Updated: …</span>
    <span id="count" class="pill">Points: …</span>
    <a href="./geo/risk_latest.geojson" class="pill" style="color:#93c5fd;text-decoration:none">Download GeoJSON</a>
  </div>
  <div id="map"></div>

  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    const bbox = [-102,49,-95,55];
    const center = [(bbox[1]+bbox[3])/2, (bbox[0]+bbox[2])/2];
    const map = L.map('map').setView(center, 5);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom:14}).addTo(map);

    function colorFor(l){ l=String(l||'').toLowerCase(); if(l==='high')return'#e74c3c'; if(l==='medium')return'#f1c40f'; return'#2ecc71'; }
    function radiusFor(s){ s=Number(s||0); return 3+Math.round((isFinite(s)?s:0)*7); }

    // Legend
    const legend = L.control({position:'bottomright'});
    legend.onAdd = () => {
      const div = L.DomUtil.create('div', 'legend');
      div.innerHTML = `
        <b>Risk level</b><br>
        <span class="swatch" style="background:#2ecc71"></span>Low<br>
        <span class="swatch" style="background:#f1c40f"></span>Medium<br>
        <span class="swatch" style="background:#e74c3c"></span>High
      `;
      return div;
    };
    legend.addTo(map);

    // Load timestamp (written by the nightly workflow)
    fetch('./geo/last_updated.txt?v=' + Date.now())
      .then(r => r.ok ? r.text() : Promise.resolve(null))
      .then(t => { document.getElementById('updated').textContent = 'Updated: ' + (t?.trim() || new Date().toUTCString()); });

    // Load data
    fetch('./geo/risk_latest.geojson?v=' + Date.now())
      .then(r => r.ok ? r.json() : Promise.reject(new Error('no geojson')))
      .then(geo => {
        const layer = L.geoJSON(geo,{
          pointToLayer:(f,latlng)=>L.circleMarker(latlng,{
            radius: radiusFor(f.properties?.risk_score),
            color:'#111', weight:0.6,
            fillColor: colorFor(f.properties?.risk_level),
            fillOpacity: 0.75
          }),
          onEachFeature:(f,lyr)=>{
            const p=f.properties||{};
            lyr.bindPopup(
              `<b>Risk:</b> ${p.risk_level??'n/a'} (${p.risk_score??'0'})<br/>
               <b>Temp:</b> ${p.temperature_2m??'n/a'} °C<br/>
               <b>RH:</b> ${p.relative_humidity_2m??'n/a'} %<br/>
               <b>Wind:</b> ${p.windspeed_10m??'n/a'} km/h`
            );
          }
        }).addTo(map);
        // counts
        const n = geo?.features?.length || 0;
        document.getElementById('count').textContent = 'Points: ' + n.toLocaleString();
        try { map.fitBounds(layer.getBounds(), {padding:[20,20]}); } catch(_) {}
      })
      .catch(e => {
        console.warn('Could not load geo/risk_latest.geojson', e);
        document.getElementById('count').textContent = 'Points: 0';
      });
  </script>
</body>
</html>