{% extends 'base.html' %}
{% block title %}BOMAtlas — SoCal Suppliers{% endblock %}

{% block extra_css %}
<style>
  body { background-color: #0b0f19 !important; color: #e0e6f0 !important; }
  #map-container { position: relative; width: 100%; height: calc(100vh - 100px); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
  #map { position: absolute; inset: 0; }
  /* HUD removed */
</style>
{% endblock %}

{% block content %}
<div id="map-container" class="container-fluid p-0">
  <div id="map"></div>
  
  <div class="watermark" style="position:absolute;bottom:12px;right:12px;z-index:10;background:rgba(11,15,25,0.7);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:6px 10px;color:#aab4c3;font-size:11px;">BOMAtlas</div>
  <div id="popup" style="display:none;position:absolute;z-index:20;background:#111827;color:#e5e7eb;border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:8px 10px;pointer-events:none;min-width:220px;"></div>
</div>
{% endblock %}

{% block extra_js %}
<link href="https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/h3-js@4.1.0/dist/browser/h3-js.min.js"></script>
<script src="https://unpkg.com/deck.gl@8.9.34/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mapbox@8.9.34/dist.min.js"></script>
<script>
  (function(){
    const START = { lon: -118.2437, lat: 34.0522, zoom: 8.5, pitch: 55, bearing: 330 };
    const DARK = {
      version: 8,
      glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
      sources: { osm: { type: 'raster', tiles: [
        'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
        'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
        'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png' ], tileSize: 256 } },
      layers: [ { id: 'bg', type: 'background', paint: { 'background-color': '#0b0f19' } }, { id: 'osm', type: 'raster', source: 'osm', paint: { 'raster-brightness-min': 0.1, 'raster-saturation': -0.8, 'raster-contrast': 0.2, 'raster-opacity': 0.35 } } ]
    };

    const map = new maplibregl.Map({ container: 'map', style: DARK, center: [START.lon, START.lat], zoom: START.zoom, pitch: START.pitch, bearing: START.bearing, attributionControl: false });
    map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');

    const popupEl = document.getElementById('popup');
    const countEl = null;
    let points = [];
    let overlay = null;

    function toGeoJSON(pts){
      return { type: 'FeatureCollection', features: pts.map(p => ({ type:'Feature', geometry:{ type:'Point', coordinates:[p.lon, p.lat] }, properties: { id:p.id, name:p.name, city:p.city||'', state:p.state||'', website:p.website||'' } })) };
    }

    function getHexPolygon(h3index){
      const boundary = h3.cellToBoundary(h3index, true);
      return boundary.map(([lat, lon]) => [lon, lat]);
    }

    function estimatedH3(lat, lon){
      // Prefer r7; if not present, compute from point
      try { return h3.latLngToCell(lat, lon, 7); } catch(e){ return null; }
    }

    function buildPolygonLayer(){
      if(!points.length){ return null; }
      const feats = points.map(p => {
        const r7 = (p.h3 && p.h3.r7) || estimatedH3(p.lat, p.lon);
        return { h3: r7, data: p };
      }).filter(d => !!d.h3);

      return new deck.PolygonLayer({
        id: 'supplier-hexes',
        data: feats,
        getPolygon: d => getHexPolygon(d.h3),
        extruded: true,
        elevationScale: 1.0,
        getElevation: d => Math.max(50, (d.data.employee_count || 30) * 2),
        getFillColor: d => [31, 111, 235, 170],
        getLineColor: [255, 255, 255, 120],
        lineWidthMinPixels: 1,
        pickable: true,
        autoHighlight: true,
        onHover: info => {
          const el = document.getElementById('popup');
          if(info.object && el){
            const p = info.object.data;
            el.innerHTML = `<div style=\"font-weight:600;margin-bottom:4px;\">${p.name||''}</div>` +
                           `<div style=\"opacity:.8\">${p.city||''}${p.state? ', '+p.state: ''}</div>` +
                           (p.website? `<div><a href=\"${p.website}\" target=\"_blank\" style=\"color:#7f9cf5;\">${p.website}</a></div>`: '');
          }
        },
      });
    }

    overlay = new deck.MapboxOverlay({ interleaved: true, layers: [] });
    map.addControl(overlay);

    async function fetchSuppliers(){
      const b = map.getBounds();
      const payload = { bounds: { sw: { lat: b.getSouth(), lng: b.getWest() }, ne: { lat: b.getNorth(), lng: b.getEast() } } };
      {% if init_filter and init_filter.source %}
        payload.source = {{ init_filter.source|tojson }};
      {% endif %}
      {% if init_filter and init_filter.since_days %}
        payload.since_days = {{ init_filter.since_days }};
      {% endif %}
      {% if init_filter and init_filter.tags %}
        payload.tags = {{ init_filter.tags|tojson }};
      {% endif %}
      {% if init_filter and init_filter.min_employees %}
        payload.min_employees = {{ init_filter.min_employees }};
      {% endif %}
      const res = await fetch('/api/suppliers/in-bounds', { method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(payload) });
      const json = await res.json();
      points = json.suppliers || [];
      if(countEl) { countEl.textContent = points.length; }
      const layer = buildPolygonLayer();
      overlay.setProps({ layers: layer ? [layer] : [] });
    }

    map.on('load', fetchSuppliers);
    map.on('moveend', fetchSuppliers);
  })();
</script>
{% endblock %}