{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Waste Route Debug</title>
  <style>
    body { font-family: sans-serif; padding: 2rem; }
    h1, h2 { margin-bottom: 0.5rem; }
    pre { background: #f6f6f6; padding: 1rem; overflow-x: auto; }
    ol { margin-left: 1.5rem; }
    li { margin-bottom: 0.5rem; }

    /* map container */
    #route-map {
      width: 600px; height: 400px;
      border: 1px solid #ccc;
      margin-bottom: 2rem;
    }
    #route-map svg {
      width: 100%; height: 100%; display: block;
      background: #f0f8ff;
    }
    .route-line {
      fill: none;
      stroke: #0074D9;
      stroke-width: 2;
    }
    .coord-point {
      fill: #0074D9;
      opacity: 0.6;
    }
    .step-point {
      fill: #FF4136;
      stroke: #fff;
      stroke-width: 1;
    }
    .building-point {
      fill: #2ECC40;
      stroke: #fff;
      stroke-width: 1;
    }

    table {
      border-collapse: collapse;
      margin-top: 1rem;
      width: 100%;
    }
    th, td {
      border: 1px solid #aaa;
      padding: 0.5rem;
      text-align: left;
    }
    th { background: #ddd; }
  </style>
</head>
<body>

  <h1>Waste Route Debug</h1>
  <p><strong>Subdivision:</strong> {{ subdivision }}</p>
  <p><strong>Vehicle:</strong> {{ vehicle }}</p>

  <div id="route-map">
    <svg></svg>
  </div>

  <div id="dump"></div>

  <h2>Buildings</h2>
  {% if city_data.buildings %}
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Status</th>
          <th>Position X</th>
          <th>Position Z</th>
          <th>Width</th>
          <th>Depth</th>
          <th>Height</th>
        </tr>
      </thead>
      <tbody>
      {% for b in city_data.buildings %}
        <tr>
          <td>{{ b.id }}</td>
          <td>{{ b.status }}</td>
          <td>{{ b.position_x|floatformat:2 }}</td>
          <td>{{ b.position_z|floatformat:2 }}</td>
          <td>{{ b.width|floatformat:2 }}</td>
          <td>{{ b.depth|floatformat:2 }}</td>
          <td>{{ b.height|floatformat:2 }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p><em>No buildings generated.</em></p>
  {% endif %}

  <script>
    const route = JSON.parse('{{ selected_route_json|escapejs }}');
    const coords = route.coords || [];

    // 1) Draw SVG route + steps
    if (coords.length > 1) {
      const svg = document.querySelector('#route-map svg');
      const W = svg.clientWidth, H = svg.clientHeight, M = 20;
      const lons = coords.map(c=>c[0]), lats = coords.map(c=>c[1]);
      const minX = Math.min(...lons), maxX = Math.max(...lons);
      const minY = Math.min(...lats), maxY = Math.max(...lats);
      const scaleX = (W - 2*M)/(maxX - minX || 1);
      const scaleY = (H - 2*M)/(maxY - minY || 1);

      function project([lon, lat]) {
        const x = M + (lon - minX)*scaleX;
        const y = H - (M + (lat - minY)*scaleY);
        return [x,y];
      }

      // route line
      const pts = coords.map(project).map(p=>p.join(',')).join(' ');
      const line = document.createElementNS('http://www.w3.org/2000/svg','polyline');
      line.setAttribute('points', pts);
      line.setAttribute('class', 'route-line');
      svg.appendChild(line);

      // decoded-coord dots
      coords.forEach(c => {
        const [x,y] = project(c);
        const dot = document.createElementNS('http://www.w3.org/2000/svg','circle');
        dot.setAttribute('cx', x);
        dot.setAttribute('cy', y);
        dot.setAttribute('r', 2);
        dot.setAttribute('class', 'coord-point');
        svg.appendChild(dot);
      });

      // step markers
      (route.steps||[]).forEach(s => {
        const [x,y] = project(s.position);
        const mark = document.createElementNS('http://www.w3.org/2000/svg','circle');
        mark.setAttribute('cx', x);
        mark.setAttribute('cy', y);
        mark.setAttribute('r', 5);
        mark.setAttribute('class', 'step-point');
        svg.appendChild(mark);
      });

      // OPTIONAL: if you ever pass raw building lon/lat into city_data,
      // you could plot them here as green circles:
      /*
      ({{ city_data.buildings|length }} && city_data.buildings.forEach(b => {
        const geo = [b.lon, b.lat];
        const [x,y] = project(geo);
        const bp = document.createElementNS('http://www.w3.org/2000/svg','circle');
        bp.setAttribute('cx', x);
        bp.setAttribute('cy', y);
        bp.setAttribute('r', 4);
        bp.setAttribute('class', 'building-point');
        svg.appendChild(bp);
      })) 
      */
    }

    // 2) Dump coords & steps below
    let out = '';
    out += '<h2>Coordinates</h2>';
    out += '<pre>' + JSON.stringify(coords, null, 2) + '</pre>';
    out += '<h2>Steps</h2>';
    if (route.steps && route.steps.length) {
      out += '<ol>';
      route.steps.forEach((s,i) => {
        out += '<li>';
        out += `<strong>Step #${i+1}</strong><br>`;
        out += `<strong>Type:</strong> ${s.step_type}<br>`;
        out += `<strong>Position:</strong> ${JSON.stringify(s.position)}<br>`;
        out += `<strong>Popup HTML:</strong> <code>${s.popup
                    .replace(/</g,'&lt;')
                    .replace(/>/g,'&gt;')}</code>`;
        out += '</li>';
      });
      out += '</ol>';
    } else {
      out += '<p><em>(no steps)</em></p>';
    }
    document.getElementById('dump').innerHTML = out;
  </script>
</body>
</html>
