export const BeaconMap = {
  mounted() {
    const lat = parseFloat(this.el.dataset.lat)
    const lon = parseFloat(this.el.dataset.lon)
    const label = this.el.dataset.label || ""
    const onTheAir = this.el.dataset.onTheAir === "true"
    const cells = JSON.parse(this.el.dataset.cells || "[]")
    const step = parseFloat(this.el.dataset.gridStep || "0.125")
    const initialShowCoverage = this.el.dataset.showCoverage === "true"

    const map = L.map(this.el, {
      zoomControl: true,
      attributionControl: false,
      scrollWheelZoom: false
    }).setView([lat, lon], 11)

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19
    }).addTo(map)

    // Build the coverage cell layer up-front but keep it off the map until
    // the user toggles it on. Using a single layerGroup keeps pan/zoom fast.
    const cellLayer = L.layerGroup()
    const half = step / 2.0
    const allBounds = []

    for (const c of cells) {
      const sw = [c.lat - half, c.lon - half]
      const ne = [c.lat + half, c.lon + half]
      const rect = L.rectangle([sw, ne], {
        color: c.color,
        weight: 0,
        fillColor: c.color,
        fillOpacity: 0.55,
        interactive: true
      })
      rect.bindTooltip(
        `${c.label}<br>${c.rx_dbm} dBm<br>${c.distance_km} km · score ${c.score}`,
        {sticky: true}
      )
      rect.addTo(cellLayer)
      allBounds.push(sw, ne)
    }

    // Beacon marker on top.
    const markerColor = onTheAir ? "#16a34a" : "#94a3b8"
    const markerFill = onTheAir ? "#22c55e" : "#cbd5e1"
    L.circleMarker([lat, lon], {
      radius: 7,
      color: markerColor,
      fillColor: markerFill,
      fillOpacity: 1.0,
      weight: 2
    }).addTo(map).bindTooltip(label, {
      permanent: true,
      direction: "top",
      offset: [0, -10]
    })

    const showLayer = () => {
      if (!map.hasLayer(cellLayer)) cellLayer.addTo(map)
      if (allBounds.length > 0) {
        map.fitBounds(L.latLngBounds(allBounds), {padding: [20, 20]})
        map.setZoom(map.getZoom() + 2)
      }
    }

    const hideLayer = () => {
      if (map.hasLayer(cellLayer)) map.removeLayer(cellLayer)
      map.setView([lat, lon], 11)
    }

    if (initialShowCoverage) showLayer()

    this.handleEvent("toggle_coverage", ({show}) => {
      if (show) {
        showLayer()
      } else {
        hideLayer()
      }
    })

    setTimeout(() => map.invalidateSize(), 50)
  }
}