<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  .container {
    display: flex;
    height: 100vh;
    flex-direction: row;
  }
  #sidebar {
    width: 320px;
    min-width: 260px;
    background: #f9f9f9;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    padding: 15px;
  }
  #sidebar h3 {
    margin-top: 0;
    font-size: 20px;
    color: #d9534f;
    border-bottom: 2px solid #d9534f;
    padding-bottom: 5px;
  }
  .redzone-item {
    background: white;
    margin: 10px 0;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .redzone-item:hover {
    background: #ffecec;
  }
  .redzone-item strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: #b30000;
  }
  #map {
    flex: 1;
  }
  #noDataMessage {
    padding: 20px;
    font-size: 18px;
    color: red;
    text-align: center;
  }

  /* Mobile responsive */
  @media (max-width: 768px) {
    .container {
      flex-direction: column;
    }
    #sidebar {
      width: 100%;
      max-height: 200px;
      border-right: none;
      border-bottom: 1px solid #ddd;
    }
  }
</style>

<div class="container">
  <!-- Sidebar -->
  <div id="sidebar">
    <h3>Redzones</h3>
    <div id="redzoneList"></div>
  </div>

  <!-- Map -->
  <div id="map"></div>
</div>

<div id="noDataMessage" style="display:none;">
  🚫 There are no active redzones to display.
</div>

<script>
  const redzones = <%- JSON.stringify(redzones) %>;

  function initMap() {
    if (!redzones || redzones.length === 0) {
      document.querySelector(".container").style.display = "none";
      document.getElementById("noDataMessage").style.display = "block";
      return;
    }

    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: { lat: 20, lng: 78 },
    });

    const bounds = new google.maps.LatLngBounds();
    const redzoneListEl = document.getElementById("redzoneList");

    redzones.forEach(zone => {
      const lat = parseFloat(zone.lat);
      const lng = parseFloat(zone.lng);
      const radiusMeters = parseFloat(zone.radius) * 1000;

      if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
        console.warn(`Skipping invalid coordinates for zone: ${zone.name}`);
        return;
      }

      const center = { lat, lng };

      // Circle
      const circle = new google.maps.Circle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map,
        center,
        radius: radiusMeters,
      });

      // Extend bounds to include entire circle
      const ne = google.maps.geometry.spherical.computeOffset(
        new google.maps.LatLng(lat, lng),
        radiusMeters * Math.SQRT2,  // Diagonal distance
        45
      );
      const sw = google.maps.geometry.spherical.computeOffset(
        new google.maps.LatLng(lat, lng),
        radiusMeters * Math.SQRT2,
        225
      );
      bounds.extend(ne);
      bounds.extend(sw);

      // Marker
      const marker = new google.maps.Marker({
        position: center,
        map,
        title: zone.name,
      });

      const infowindow = new google.maps.InfoWindow({
        content: `<strong>${zone.name}</strong><br>${zone.location || ''}<br>Radius: ${zone.radius} km`,
      });

      marker.addListener('click', () => {
        infowindow.open(map, marker);
      });

      circle.addListener('click', () => {
        infowindow.setPosition(circle.getCenter());
        infowindow.open(map);
      });

      // Sidebar item
      const div = document.createElement("div");
      div.className = "redzone-item";
      div.innerHTML = `
        <strong>${zone.name}</strong>
        <small>${zone.location || ''}</small><br>
        Radius: ${zone.radius} km
      `;
      div.addEventListener("click", () => {
        map.panTo(center);           // Pan to zone
        infowindow.open(map, marker); // Show info
        // No zoom here to keep all redzones in view
      });
      redzoneListEl.appendChild(div);
    });

    // Fit map to show all redzones
    map.fitBounds(bounds);
  }
</script>

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=<%= GoogleMapsAPIKey%>&callback=initMap&libraries=geometry">
</script>

