{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Waste Route Visualization</title>
  <!-- A-Frame core -->
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js"></script>
 
</head>
<body>
  <a-scene id="scene">
    <!-- Camera & cursor -->
    <a-entity
      id="mainCamera"
      camera look-controls wasd-controls
      position="0 5 10">
      <a-cursor color="#ffffff"></a-cursor>
    </a-entity>

    <!-- Invisible ground-plane fallback -->
    <a-plane id="basePlane"
             rotation="-90 0 0"
             color="#444" opacity="0.0">
    </a-plane>

    <!-- 1) Draw city buildings from your OSM data -->
    {% for building in city_data.buildings %}
    <a-entity id="{{ building.id }}" status="{{ building.status }}">
      <a-box position="{{ building.position_x }} {{ building.height }} {{ building.position_z }}"
             width="{{ building.width }}"
             height="{{ building.height }}"
             depth="{{ building.depth }}"
             color="{{ building.color }}"
             opacity="0.8">
      </a-box>
      <a-entity position="{{ building.position_x }} {{ building.height }} {{ building.position_z }}">

      </a-entity>
    </a-entity>
    {% endfor %}

    <!-- 2) Draw each job-sphere & gauge from step_positions -->
    {% for pos in step_positions %}
    <a-entity position="{{ pos.x }} 1 {{ pos.z }}">
      <a-sphere radius="10"
                color="#FF4136"
                emissive="#FF4136"
                opacity="0.7">
      </a-sphere>
      <!-- gauge above the sphere -->
      <a-entity class="status-gauge" gauge-click-toggle position="11 3 0">
        {% include "pxy_city_digital_twins/_status_gauge_waste.html" with ring_color="#FF4136" status=pos.step.step_type id=pos.step.id %}
      </a-entity>
    </a-entity>
    {% endfor %}

  </a-scene>

  <script>
    document.querySelector('#scene').addEventListener('loaded', () => {
      const sceneEl = document.getElementById('scene');
      // 3) rel_coords was passed in context
      const rel = {{ rel_coords|safe }};

      // Compute bounding box & stageSize
      const xs = rel.map(r => r[0]), zs = rel.map(r => r[1]);
      const minX = Math.min(...xs), maxX = Math.max(...xs);
      const minZ = Math.min(...zs), maxZ = Math.max(...zs);
      const width  = maxX - minX, height = maxZ - minZ;
      const stageSize = Math.ceil(Math.max(width, height) * 1.2);

      // Update invisible base-plane
      const base = document.getElementById('basePlane');
      base.setAttribute('width',  width * 1.5);
      base.setAttribute('height', height * 1.5);
      base.setAttribute('position',
        `${(minX+maxX)/2} 0 ${(minZ+maxZ)/2}`);

      // Add environment
      const envEl = document.createElement('a-entity');
      envEl.setAttribute('environment', `
        preset: forest;
        stageSize: ${stageSize};
        ground: flat;
        grid: true;
        gridColor: #00ffff;
        skyColor: #000000;
        fog: 0.3;
        lighting: subtle;
      `);
      sceneEl.appendChild(envEl);

      // Draw & animate each segment
      const pulseDuration = 600;
      rel.forEach(([x1,z1], i) => {
        if (i + 1 >= rel.length) return;
        const [x2,z2] = rel[i+1];
        const seg = document.createElement('a-entity');
        seg.setAttribute('line', `
          start: ${x1.toFixed(2)} 1 ${z1.toFixed(2)};
          end:   ${x2.toFixed(2)} 1 ${z2.toFixed(2)};
          color: #0077FF;
          opacity: 0.6
        `);
        seg.setAttribute('animation__color', `
          property: line.color;
          from:     #0077FF;
          to:       #FF4136;
          dur:      ${pulseDuration};
          delay:    ${i * pulseDuration};
          dir:      alternate;
          loop:     true
        `);
        sceneEl.appendChild(seg);
      });

      // Position camera at first step
      if (rel.length) {
        const [fx,fz] = rel[0];
        const cam = document.getElementById('mainCamera');
        cam.setAttribute('position', `${fx.toFixed(2)} 6 ${fz.toFixed(2)+6}`);
        cam.setAttribute('look-at',   `${fx.toFixed(2)} 1 ${fz.toFixed(2)}`);
      }
    });
  </script>
</body>
</html>
<!-- 
 -->