<script setup>
import Header from '../components/Header.vue';
import InfoModal from '../components/InfoModal.vue';
import HardwareModelList from '../components/HardwareModelList.vue';
import Settings from '../components/Settings.vue';
import NodeInfo from '../components/NodeInfo.vue';
import NodeNeighborsModal from '../components/NodeNeighborsModal.vue';
import NodePositionHistoryModal from '../components/NodePositionHistoryModal.vue';
import TracerouteInfo from '../components/TracerouteInfo.vue';
import Announcement from '../components/Announcement.vue';

import axios from 'axios';
import moment from 'moment';
import L from 'leaflet/dist/leaflet.js';
import 'leaflet.markercluster/dist/leaflet.markercluster.js';
import 'leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.js';
import { onMounted, useTemplateRef, ref, watch, markRaw } from 'vue';
import { state } from '../store.js';
import { 
  layerGroups,
  tileLayers,
  icons,
  getTooltipContentForWaypoint,
  getTooltipContentForNode,
  getNeighbourTooltipContent,
  clearAllNodes,
  clearAllNeighbors,
  clearAllWaypoints,
  clearAllPositionHistory,
  cleanUpPositionHistory,
  closeAllTooltips,
  closeAllPopups,
  cleanUpNodeNeighbors,
  clearNodeOutline,
  clearMap,
  setMap,
  getMap,
} from '../map.js';
import {
  nodesMaxAge,
  nodesDisconnectedAge,
  nodesOfflineAge,
  waypointsMaxAge,
  enableMapAnimations,
  goToNodeZoomLevel,
  autoUpdatePositionInUrl,
  neighboursMaxDistance,
  enabledOverlayLayers,
  selectedTileLayerName,
  hasSeenInfoModal,
  lastSeenAnnouncementId,
  CURRENT_ANNOUNCEMENT_ID,
} from '../config.js';
import { 
  getColorForSnr,
  getPositionPrecisionInMeters,
  getTerrainProfileImage,
  getRegionFrequencyRange,
  escapeString,
  formatPositionPrecision,
  isMobile,
  elementOrAnyAncestorHasClass,
  findNodeById,
  findNodeMarkerById,
  hasNodeUplinkedToMqttRecently,
  buildPath,
} from '../utils.js';
const mapEl = useTemplateRef('appMap');

// watchers
watch(
  () => state.positionHistoryDateTimeTo,
  (newValue) => {
    if (newValue != null) {
        loadNodePositionHistory(state.selectedNodeToShowPositionHistory.node_id);
    }
  }, {deep: true}
);
watch(
  () => state.positionHistoryDateTimeFrom,
  (newValue) => {
    if (newValue != null) {
        loadNodePositionHistory(state.selectedNodeToShowPositionHistory.node_id);
    }
  }, {deep: true}
);

function showNodeOutline(id) {
    // remove any existing node circle
    clearNodeOutline();

    // find node marker by id
    const nodeMarker = state.nodeMarkers[id];
    if (!nodeMarker) {
        return;
    }

    // find node by id
    const node = findNodeById(id);
    if (!node) {
        return;
    }

    // add position precision circle around node
    if(node.position_precision != null && node.position_precision > 0 && node.position_precision < 32){
        state.selectedNodeOutlineCircle = L.circle(nodeMarker.getLatLng(), {
            radius: getPositionPrecisionInMeters(node.position_precision),
        }).addTo(getMap());
    }
}

window.showNodeDetails = function(id) {
    // find node
    const node = findNodeById(id);
    if (!node) {
        return;
    }
    state.selectedNode = node;
}

window.showNodeNeighboursThatHeardUs = function(id) {
    cleanUpNodeNeighbors();

    // find node
    const node = findNodeById(id);
    if (!node) {
        return;
    }

    // find node marker
    const nodeMarker = findNodeMarkerById(node.node_id);
    if (!nodeMarker) {
      return;
    }

    // show overlay
    state.selectedNodeToShowNeighbours = node;
    state.selectedNodeToShowNeighboursType = 'theyHeard';

    // find all nodes that have us as a neighbour
    const neighbourNodeInfos = [];
    for (const nodeThatMayHaveHeardUs of state.nodes) {
        // find our node in this nodes neighbours
        const nodeNeighbours = nodeThatMayHaveHeardUs.neighbours ?? [];
        const neighbour = nodeNeighbours.find(function(neighbour) {
            return neighbour.node_id.toString() === node.node_id.toString();
        });

        // we exist as a neighbour
        if (neighbour) {
            neighbourNodeInfos.push({
                node: nodeThatMayHaveHeardUs,
                neighbour: neighbour,
            });
        }
    }

    // ensure we have neighbours to show
    if (neighbourNodeInfos.length === 0) {
        return;
    }

    // add node neighbours
    for (const neighbourNodeInfo of neighbourNodeInfos) {

        const neighbourNode = neighbourNodeInfo.node;
        const neighbour = neighbourNodeInfo.neighbour;

        // fixme: skipping zero snr? saw some crazy long neighbours with zero snr...
        if (neighbour.snr === 0) {
            continue;
        }

        // find neighbour node marker
        const neighbourNodeMarker = findNodeMarkerById(neighbourNode.node_id);
        if (!neighbourNodeMarker) {
            continue;
        }

        // calculate distance in meters between nodes (rounded to 2 decimal places)
        const distanceInMeters = neighbourNodeMarker.getLatLng().distanceTo(nodeMarker.getLatLng()).toFixed(2);

        // don't show this neighbour connection if further than config allows
        if (neighboursMaxDistance.value != null && parseFloat(distanceInMeters) > neighboursMaxDistance.value) {
            continue;
        }

        // add neighbour line to map
        const line = L.polyline([
            nodeMarker.getLatLng(), // from us
            neighbourNodeMarker.getLatLng(), // to neighbour
        ], {
            color: getColourForSnr(neighbour.snr),
            opacity: 1,
        }).arrowheads({
            size: '10px',
            fill: true,
            offsets: {
                start: '25px',
                end: '25px',
            },
        }).addTo(layerGroups.nodeNeighbors);

        const tooltip = getNeighbourTooltipContent('theyHeard', node, neighbourNode, distanceInMeters, neighbour.snr);
        line.bindTooltip(tooltip, {
            sticky: true,
            opacity: 1,
            interactive: true,
        }).bindPopup(tooltip).on('click', function(event) {
          // close tooltip on click to prevent tooltip and popup showing at same time
          event.target.closeTooltip();
        });
    }
}

window.showNodeNeighboursThatWeHeard = function(id) {
    cleanUpNodeNeighbors();

    // find node
    const node = findNodeById(id);
    if (!node) {
        return;
    }

    // find node marker
    const nodeMarker = findNodeMarkerById(node.node_id);
    if (!nodeMarker) {
      return;
    }

    // show overlay
    state.selectedNodeToShowNeighbours = node;
    state.selectedNodeToShowNeighboursType = 'weHeard';

    // ensure we have neighbours to show
    const neighbours = node.neighbours ?? [];
    if (neighbours.length === 0) {
      return;
    }
    for (const neighbour of neighbours) {
      // fixme: skipping zero snr? saw some crazy long neighbours with zero snr...
      if (neighbour.snr === 0) {
        continue;
      }
      // find neighbor node
      const neighbourNode = findNodeById(neighbour.node_id);
      if (!neighbourNode) {
        continue;
      }
      // find neighbor node marker
      const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
      if (!neighbourNodeMarker) {
        continue;
      }
      // calculate distance in meters between nodes (rounded to 2 decimal places)
      const distanceInMeters = nodeMarker.getLatLng().distanceTo(neighbourNodeMarker.getLatLng()).toFixed(2);

      if (neighboursMaxDistance.value != null && parseFloat(distanceInMeters) > neighboursMaxDistance.value) {
        continue;
      }

      // add neighbour line to map
      const line = L.polyline([
          neighbourNodeMarker.getLatLng(), // from neighbor
          nodeMarker.getLatLng(), // to us
      ], {
          color: getColorForSnr(neighbour.snr),
          opacity: 1,
      }).arrowheads({
          size: '10px',
          fill: true,
          offsets: {
              start: '25px',
              end: '25px',
          },
      }).addTo(layerGroups.nodeNeighbors);

      const tooltip = getNeighbourTooltipContent('weHeard', node, neighbourNode, distanceInMeters, neighbour.snr);
      line.bindTooltip(tooltip, {
          sticky: true,
          opacity: 1,
          interactive: true,
      }).bindPopup(tooltip).on('click', function(event) {
        // close tooltip on click to prevent tooltip and popup showing at same time
        event.target.closeTooltip();
      });
    }
} 

function onNodesUpdated(nodes) {
    const now = moment();
    state.nodes = [];
    for (const node of nodes) {
        // skip nodes older than configured node max age
        if (nodesMaxAge.value) {
            const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
            if (lastUpdatedAgeInMillis > nodesMaxAge.value * 1000) {
                continue;
            }
        }
        // skip nodes without position
        if (!node.latitude || !node.longitude) {
            continue;
        }

        // skip nodes with invalid position
        if (isNaN(node.latitude) || isNaN(node.longitude)) {
            continue;
        }

        // fix lat long
        node.latitude = node.latitude / 10000000;
        node.longitude = node.longitude / 10000000;

        // wrap longitude for shortest path, everything to left of australia should be shown on the right
        let longitude = parseFloat(node.longitude);
        if (longitude <= 100) {
            longitude += 360;
        }

        // icon based on mqtt connection state
        let icon = icons.mqttDisconnected;

        // use offline icon for nodes older than configured node offline age
        if (nodesOfflineAge) {
            const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
            if (lastUpdatedAgeInMillis > nodesOfflineAge.value * 1000) {
                icon = icons.offline;
            }
        }

        // determine if node was recently heard uplinking packets to mqtt
        const nodeHasUplinkedToMqttRecently = hasNodeUplinkedToMqttRecently(node);
        if (nodeHasUplinkedToMqttRecently) {
            icon = icons.mqttConnected;
        }

        // create node marker
        const marker = L.marker([node.latitude, longitude], {
            icon: icon,
            tagName: node.node_id,
            // we want to show online nodes above offline, but without needing to use separate layer groups
            zIndexOffset: nodeHasUplinkedToMqttRecently ? 1000 : -1000,
        }).on('click', function(event) {
            // close tooltip on click to prevent tooltip and popup showing at same time
            event.target.closeTooltip();
        });

        // add marker to node layer groups
        marker.addTo(layerGroups.nodes);
        layerGroups.nodesClustered.addLayer(marker);

        // add markers for routers and repeaters to routers layer group
        if (node.role_name === 'ROUTER'
            || node.role_name === 'ROUTER_CLIENT'
            || node.role_name === 'ROUTER_LATE'
            || node.role_name === 'REPEATER') {
            layerGroups.nodesRouter.addLayer(marker);
        }

        // show tooltip on desktop only
        if (!isMobile()) {
            marker.bindTooltip(getTooltipContentForNode(node), {
                interactive: true,
            });
        }

        // Push node and marker to cache
        state.nodes.push(node);
        state.nodeMarkers[node.node_id] = marker;

        // show node info tooltip when clicking node marker
        marker.on('click', function(event) {
            // close all other popups and tooltips
            closeAllTooltips();
            closeAllPopups();

            // find node
            const node = findNodeById(event.target.options.tagName);
            if (!node){
                return;
            }

            // show position precision outline
            showNodeOutline(node.node_id);

            // open tooltip for node
            getMap().openTooltip(getTooltipContentForNode(node), event.target.getLatLng(), {
                interactive: true, // allow clicking buttons inside tooltip
                permanent: true, // don't auto dismiss when clicking buttons inside tooltip
            });
        });
    }
    for(const node of nodes) {
      // find current node
      const currentNode = findNodeMarkerById(node.node_id);
      if (!currentNode) {
          continue;
      }

      // add node neighbours
      var polylineOffset = 0;
      const neighbours = node.neighbours ?? [];
      for( const neighbour of neighbours) {
          // fixme: skipping zero snr? saw some crazy long neighbours with zero snr...
          if(neighbour.snr === 0){
              continue;
          }
          const neighbourNode = findNodeById(neighbour.node_id);
          if (!neighbourNode) {
              continue;
          }
          const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
          if (neighbourNodeMarker) {

              // calculate distance in meters between nodes (rounded to 2 decimal places)
              const distanceInMeters = currentNode.getLatLng().distanceTo(neighbourNodeMarker.getLatLng()).toFixed(2);

              // don't show this neighbour connection if further than config allows
              if (neighboursMaxDistance.value != null && parseFloat(distanceInMeters) > neighboursMaxDistance.value) {
                  continue;
              }

              // add neighbour line to map
              const line = L.polyline([
                  currentNode.getLatLng(),
                  neighbourNodeMarker.getLatLng(),
              ], {
                  color: '#2563eb',
                  opacity: 0.75,
                  offset: polylineOffset,
              }).addTo(layerGroups.neighbors);

              // increase offset so next neighbour does not overlay other neighbours from self
              polylineOffset += 2;

              const tooltip = getNeighbourTooltipContent('weHeard', node, neighbourNode, distanceInMeters, neighbour.snr);
              line.bindTooltip(tooltip, {
                  sticky: true,
                  opacity: 1,
                  interactive: true,
              }).bindPopup(tooltip).on('click', function(event) {
                // close tooltip on click to prevent tooltip and popup showing at same time
                event.target.closeTooltip();
              });

          }
      }
    }
}

function onWaypointsUpdated(waypoints) {
    state.waypoints = [];
    const now = moment();
    // add nodes
    for (const waypoint of waypoints) {
        // skip waypoints older than configured waypoint max age
        if (waypointsMaxAge.value) {
            const lastUpdatedAgeInMillis = now.diff(moment(waypoint.updated_at));
            if (lastUpdatedAgeInMillis > waypointsMaxAge.value * 1000) {
                continue;
            }
        }

        // skip expired waypoints
        if (waypoint.expire < Date.now() / 1000) {
            continue;
        }

        // skip waypoints without position
        if (!waypoint.latitude || !waypoint.longitude) {
            continue;
        }

        // skip nodes with invalid position
        if (isNaN(waypoint.latitude) || isNaN(waypoint.longitude)) {
            continue;
        }

        // fix lat long
        waypoint.latitude = waypoint.latitude / 10000000;
        waypoint.longitude = waypoint.longitude / 10000000;

        // wrap longitude for shortest path, everything to left of australia should be shown on the right
        let longitude = parseFloat(waypoint.longitude);
        if (longitude <= 100) {
            longitude += 360;
        }

        // determine emoji to show as marker icon
        const emoji = waypoint.icon === 0 ? 128205 : waypoint.icon;
        const emojiText = String.fromCodePoint(emoji);

        let tooltip = getTooltipContentForWaypoint(waypoint);

        // create waypoint marker
        const marker = L.marker([waypoint.latitude, longitude], {
            icon: L.divIcon({
                className: 'waypoint-label',
                iconSize: [26, 26], // increase from 12px to 26px
                html: emojiText,
            }),
        }).bindPopup(tooltip).on('click', function(event) {
            // close tooltip on click to prevent tooltip and popup showing at same time
            event.target.closeTooltip();
        });

        // show tooltip on desktop only
        if (!isMobile()) {
            marker.bindTooltip(tooltip, {
                interactive: true,
            });
        }

        // add marker to waypoints layer groups
        marker.addTo(layerGroups.waypoints)
 
        // add to cache
        state.waypoints.push(waypoint);
    }
}

function onPositionHistoryUpdated(updatedPositionHistories) {
  let positionHistoryLinesCords = [];
  // add nodes
  for (const positionHistory of updatedPositionHistories) {
    // skip position history without position
    if (!positionHistory.latitude || !positionHistory.longitude) {
      continue;
    }

    // find node this position is for
    const node = findNodeById(positionHistory.node_id);
    if (!node) {
      continue;
    }

    // skip position history without position
    if (!positionHistory.latitude || !positionHistory.longitude) {
      continue;
    }

    // skip nodes with invalid position
    if (isNaN(positionHistory.latitude) || isNaN(positionHistory.longitude)) {
      continue;
    }

    // fix lat long
    positionHistory.latitude = positionHistory.latitude / 10000000;
    positionHistory.longitude = positionHistory.longitude / 10000000;

    // wrap longitude for shortest path, everything to left of australia should be shown on the right
    let longitude = parseFloat(positionHistory.longitude);
    if (longitude <= 100) {
      longitude += 360;
    }
    positionHistoryLinesCords.push([positionHistory.latitude, longitude]);

    let tooltip = "";
    if(positionHistory.type === "position"){
        tooltip += `<b>Position</b>`;
    } else if(positionHistory.type === "map_report"){
        tooltip += `<b>Map Report</b>`;
    }
    tooltip += `<br/>[${escapeString(node.short_name)}] ${escapeString(node.long_name)}`;
    tooltip += `<br/>${positionHistory.latitude}, ${positionHistory.longitude}`;
    tooltip += `<br/>Heard on: ${moment(new Date(positionHistory.created_at)).format("DD/MM/YYYY hh:mm A")}`;

    // add gateway info if available
    if (positionHistory.gateway_id) {
        const gatewayNode = findNodeById(positionHistory.gateway_id);
        const gatewayNodeInfo = gatewayNode ? `[${gatewayNode.short_name}] ${gatewayNode.long_name}` : "???";
        tooltip += `<br/>Heard by: <a href="javascript:void(0);" onclick="goToNode(${positionHistory.gateway_id})">${gatewayNodeInfo}</a>`;
    }

    // create position history marker
    const marker = L.marker([positionHistory.latitude, longitude],{
        icon: iconPositionHistory,
    }).bindTooltip(tooltip).bindPopup(tooltip).on('click', function(event) {
        // close tooltip on click to prevent tooltip and popup showing at same time
        event.target.closeTooltip();
    });

    // add marker to position history layer group
    marker.addTo(layerGroups.nodePositionHistory);
  }
  // show lines between position history markers
  L.polyline(positionHistoryLinesCords).addTo(layerGroups.nodePositionHistory);
}

function goToRandomNode() {
    if (state.nodes.length > 0) {
        const randomNode = state.nodes[Math.floor(Math.random() * state.nodes.length)];
        if (randomNode) {
            // go to node
            if (goToNode(randomNode.node_id)) {
                return;
            }
            // fallback to showing node details since we can't go to the node
            window.showNodeDetails(randomNode.node_id);
        }
    }
}

function showNodePositionHistory(nodeId) {
  // find node
  const node = findNodeById(nodeId);
  if (!node) {
    return;
  }

  // update ui
  state.selectedNode = null;
  state.selectedNodeToShowPositionHistory = node;
  state.positionHistoryModalExpanded = true;

  // close node info tooltip as position history shows under it
  closeAllTooltips();

  // reset default time range when opening position history ui
  // YYYY-MM-DDTHH:mm is the format expected by the datetime-local input type
  state.positionHistoryDateTimeFrom = moment().subtract(1, "hours").format('YYYY-MM-DDTHH:mm');
  state.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');

  // load position history
  loadNodePositionHistory(nodeId);
}

function loadNodePositionHistory(nodeId) {
    state.selectedNodePositionHistory = [];
    axios.get(buildPath(`/api/v1/nodes/${nodeId}/position-history`), {
        params: {
            // parse from datetime-local format, and send as unix timestamp in milliseconds
            time_from: moment(state.positionHistoryDateTimeFrom, "YYYY-MM-DDTHH:mm").format("x"),
            time_to: moment(state.positionHistoryDateTimeTo, "YYYY-MM-DDTHH:mm").format("x"),
        },
    }).then((response) => {
        state.selectedNodePositionHistory = response.data.position_history;
        if (state.selectedNodeToShowPositionHistory != null) {
            clearAllPositionHistory();
            onPositionHistoryUpdated(response.data.position_history);
        };
    }).catch(() => {
        // do nothing
    });
}

function reload(goToNodeId, zoom) {
    // show loading
    state.loading = true;
    // clear previous data
    clearMap();
    axios.get(buildPath('/api/v1/nodes')).then(response => {
        // update nodes
        onNodesUpdated(response.data.nodes);
        // hide loading
        state.loading = false;
        // fetch waypoints (after awaiting nodes, so we can use nodes cache in waypoint tooltips)
        axios.get(buildPath('/api/v1/waypoints')).then(response => {
            onWaypointsUpdated(response.data.waypoints);
        });
        // go to node id if provided
        if (goToNodeId) {
            // go to node
            if(goToNode(goToNodeId, false, zoom)) {
                return;
            }
            // fallback to showing node details since we can't go to the node
            window.showNodeDetails(goToNodeId);
        }
    });
}

function goToNode(id, animate, zoom){
    // find node
    const node = findNodeById(id);
    if (!node) {
        alert("Could not find node: " + id);
        return false;
    }

    // find node marker by id
    const nodeMarker = findNodeMarkerById(id);
    if (!nodeMarker) {
        return false;
    }

    // close all popups and tooltips
    closeAllPopups();
    closeAllTooltips();

    // select node
    showNodeOutline(id);

    // fly to node marker
    const shouldAnimate = animate != null ? animate : true;
    getMap().flyTo(nodeMarker.getLatLng(), parseFloat(zoom || goToNodeZoomLevel.value), {
        animate: enableMapAnimations.value ? shouldAnimate : false,
    });

    // open tooltip for node
    getMap().openTooltip(getTooltipContentForNode(node), nodeMarker.getLatLng(), {
        interactive: true, // allow clicking buttons inside tooltip
        permanent: true, // don't auto dismiss when clicking buttons inside tooltip
    });

    // successfully went to node
    return true;

}

function onSearchResultNodeClick(node) {
  // clear search
  state.searchText = '';

  // hide search
  state.mobileSearchVisible = false;

  // go to node
  if (goToNode(node.node_id) ){
      return;
  }

  // fallback to showing node details since we can't go to the node
  window.showNodeDetails(node.node_id);
}

onMounted(() => {
    // set map bounds to be a little more than full size to prevent panning off screen
    const bounds = [
        [-100, 70], // top left
        [100, 500], // bottom right
    ];
    // create map positioned over AU and NZ
    setMap(L.map(mapEl.value, {
      maxBounds: bounds,
    }));
    // set view 
    getMap().setView([-15, 150], 2);
    // remove leaflet link
    getMap().attributionControl.setPrefix('');

    // use tile layer based on config
    const selectedTileLayer = tileLayers[selectedTileLayerName.value] || tileLayers['OpenStreetMap'];
    selectedTileLayer.addTo(getMap());

    // handle baselayerchange to update tile layer preference
    getMap().on('baselayerchange', function(event) {
        selectedTileLayerName.value = event.name;
    });

    // create legend
    const legend = L.control({position: 'bottomleft'});
    legend.onAdd = function (map) {
        const div = L.DomUtil.create('div', 'leaflet-control-layers');
        div.style.backgroundColor = 'white';
        div.style.padding = '12px';
        div.innerHTML = `<div style="margin-bottom:6px;"><strong>Legend</strong></div>`
            + `<div style="display:flex"><div class="icon-mqtt-connected" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MQTT Connected</div>`
            + `<div style="display:flex"><div class="icon-mqtt-disconnected" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MQTT Disconnected</div>`
            + `<div style="display:flex"><div class="icon-offline" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> Offline Too Long</div>`;
        return div;
    };
    // handle adding/remove legend on map (can't use L.Control as an overlay, so we toggle an empty L.LayerGroup)
    getMap().on('overlayadd overlayremove', function(event) {
        if (event.name === 'Legend') {
            if (event.type === 'overlayadd') {
                getMap().addControl(legend);
            } else if(event.type === 'overlayremove') {
                getMap().removeControl(legend);
            }
        }
    });
    // add layers to control ui
    L.control.groupedLayers(tileLayers, {
        'Nodes': {
            'All': layerGroups.nodes,
            'Routers': layerGroups.nodesRouter,
            'Clustered': layerGroups.nodesClustered,
            'None': layerGroups.none,
        },
        'Overlays': {
            'Legend': layerGroups.legend,
            'Neighbors': layerGroups.neighbors,
            'Waypoints': layerGroups.waypoints,
            'Position History': layerGroups.nodePositionHistory,
        },
    }, {
        // make the "Nodes" group exclusive (use radio inputs instead of checkbox)
        exclusiveGroups: ['Nodes'],
    }).addTo(getMap());

    // enable base layers
    layerGroups.nodesClustered.addTo(getMap());

    // enable overlay layers based on config
    if (enabledOverlayLayers.value.includes('Legend')) {
        layerGroups.legend.addTo(getMap());
    }
    if (enabledOverlayLayers.value.includes('Neighbors')) {
        layerGroups.neighbors.addTo(getMap());
    }
    if (enabledOverlayLayers.value.includes('Waypoints')) {
        layerGroups.waypoints.addTo(getMap());
    }
    if (enabledOverlayLayers.value.includes('Position History')) {
        layerGroups.nodePositionHistory.addTo(getMap());
    }
    // update config when map overlay is added/removed
    getMap().on('overlayremove', function(event) {
        const layerName = event.name;
        enabledOverlayLayers.value = enabledOverlayLayers.value.filter(function(enabledOverlayLayer) {
            return enabledOverlayLayer !== layerName;
        });
    });

    getMap().on('overlayadd', function(event) {
        const layerName = event.name;
        if (!enabledOverlayLayers.value.includes(layerName)) {
            enabledOverlayLayers.value.push(layerName);
        }
    });

    getMap().on('click', function(event) {
        // remove outline when map clicked
        clearNodeOutline();
        // clear search
        state.searchText = '';
        state.mobileSearchVisible = false;
        // do nothing when clicking inside tooltip
        const clickedElement = event.originalEvent.target;
        if (elementOrAnyAncestorHasClass(clickedElement, 'leaflet-tooltip')) {
            return;
        }

        closeAllTooltips();
        closeAllPopups();
    });

    // auto update url when lat/lng/zoom changes
    getMap().on('moveend zoomend', function() {
        // check if user enabled auto updating position in url
        if (!autoUpdatePositionInUrl.value) {
            return;
        }

        // get map info
        const latLng = getMap().getCenter();
        const zoom = getMap().getZoom();

        // construct new url
        const url = new URL(window.location.href);
        url.searchParams.set('lat', latLng.lat);
        url.searchParams.set('lng', latLng.lng);
        url.searchParams.set('zoom', zoom);

        // update current url
        if(window.history.replaceState){
            window.history.replaceState(null, null, url.toString());
        }
    });

    // parse url params
    const queryParams = new URLSearchParams(location.search);
    const queryNodeId = queryParams.get('node_id');
    const queryLat = queryParams.get('lat');
    const queryLng = queryParams.get('lng');
    const queryZoom = queryParams.get('zoom');

    // go to lat/lng if provided
    if(queryLat && queryLng){
        const zoomLevel = queryZoom || goToNodeZoomLevel.value
        getMap().flyTo([queryLat, queryLng], parseFloat(zoomLevel), {
            animate: false,
        });
    }

    // reload and go to provided node id
    reload(queryNodeId, queryZoom);
});

onMounted(() => {
  if (lastSeenAnnouncementId.value !== CURRENT_ANNOUNCEMENT_ID) {
    state.announcementVisible = true;
  }
  if (!isMobile() && hasSeenInfoModal.value === false) {
    state.infoModalVisible = true;
  }
})
</script>

<template>
    <div class="flex flex-col h-full w-full overflow-hidden">
        <div class="flex flex-col h-full">
            <Announcement />
            <Header 
              @reload="reload"
              @random-node="goToRandomNode"
              @search-click="onSearchResultNodeClick"
            />
            <div id="map" style="width:100%;height:100%;" ref="appMap"></div>
        </div>
    </div>
    <InfoModal />
    <HardwareModelList />
    <Settings />
    <NodeInfo @show-position-history="showNodePositionHistory"/>
    <NodeNeighborsModal @dismiss="cleanUpNodeNeighbors" />
    <NodePositionHistoryModal @dismiss="cleanUpPositionHistory" />
    <TracerouteInfo @go-to="goToNode" />
</template>