{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Digital Twin City - AR</title>
    <!-- A-Frame & AR.js -->
    <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>

    <!-- Billboard: make objects face the camera -->
    <script>
      AFRAME.registerComponent('billboard', {
        schema: {type: 'selector'},
        tick: function () {
          if (!this.data) return;
          this.el.object3D.lookAt(this.data.object3D.position);
        }
      });
    </script>

    <!-- Toggle gauge color/status -->
    <script>
      AFRAME.registerComponent('gauge-click-toggle', {
        init: function () {
          const colors = ["#00FF00", "#FFFF00", "#FF0000", "#00FFFF"];
          const statuses = ["OK", "Warning", "Critical", "Offline"];
          let i = 0;
          const ring = this.el.querySelector('.gauge-ring');
          const label = this.el.querySelector('.gauge-label');

          this.el.addEventListener('click', () => {
            i = (i + 1) % colors.length;
            if (ring) ring.setAttribute('color', colors[i]);
            if (label) {
              const current = label.getAttribute('value');
              const idLine = current.split("\n")[0];
              label.setAttribute('value', `${idLine}\n${statuses[i]}`);
            }
          });
        }
      });
    </script>
</head>
<body>
  <a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false" vr-mode-ui="enabled: false">

    <!-- Cámara y controles -->
    <a-entity id="mainCamera" camera look-controls wasd-controls position="0 2 5">
      <a-cursor color="#FF0000"></a-cursor>
    </a-entity>

    <!-- Solo los gauges -->
    {% for road in city_data.roads %}
      <a-entity id="{{ road.id }}" status="{{ road.status }}">
        <a-entity
          position="{{ road.position_x }} 1.5 {{ road.position_z }}">
          {% include "pxy_city_digital_twins/_status_gauge.html" with ring_color="#FF6600" offset_y="0" status=road.status id=road.id %}
        </a-entity>
      </a-entity>
    {% endfor %}

  </a-scene>
</body>
</html>
