<script lang="ts">
  import { onMount } from 'svelte';
  import Highcharts from 'highcharts';
  import {} from 'highcharts/modules/map';
  import worldMap from '@highcharts/map-collection/custom/world.topo.json';   

  let mapContainer: HTMLDivElement;
  let chart: Highcharts.Chart | null = null;

  interface RegionData {
    latitude: number;
    longitude: number;
    country: string;
    region: string;
    city: string;
  }

  interface StatusData {
    regions: {
      [key: string]: RegionData;
    };
  }

  async function initMap() {
    window.Highcharts = Highcharts;

    const statusResponse = await fetch('/status.json');
    const data: StatusData = await statusResponse.json();

    // Prepare regions data
    const regions = Object.entries(data.regions);
    if (regions.length === 0) return;

    // Convert regions to Highcharts mappoint format
    const mapData = regions.map(([regionName, regionData]) => ({
      name: regionName,
      lat: regionData.latitude,
      lon: regionData.longitude,
      region: regionData.region,
      city: regionData.city,
      country: regionData.country
    }));

    chart = Highcharts.mapChart({
      chart: {
        renderTo: 'map-container',
        map: worldMap,
        margin: 0,
        height: 900,
        backgroundColor: '#0e0f13',
      },
      credits: {
        enabled: false
      },
      accessibility: {
        enabled: false
      },
      title: {
        text: "GCP Region Deployments",
        style: {
          color: '#e0e0e0',
        },
      },
      mapView: {
        projection: {
          name: 'WebMercator',
        },
        center: [-0, 30],
        zoom: 2.5,
      },
      mapNavigation: {
        enabled: true,
        enableButtons: false,
      },
      tooltip: {
        enabled: true,
        backgroundColor: '#161618',
        useHTML: true,
        padding: 15,
        style: {
          color: '#fff',
        },
        distance: 30,
      },
      series: [{
        type: 'map',
        name: 'Map',
        nullColor: '#303038',
        borderColor: '#0e0f13',
        showInLegend: false,
        states: {
          inactive: {
            enabled: false
          },
        }
      }, {
        type: 'mappoint',
        name: 'CDN Region',
        data: mapData,
        cursor: 'pointer',
        showInLegend: false,
        marker: {
          fillColor: 'rgba(54, 162, 235, 1.0)',
          lineWidth: 18,
          lineColor: 'rgba(54, 162, 235, 0.3)',
          symbol: 'circle',
          radius: 8,
        },
        dataLabels: {
          enabled: false
        },
        point: {
          events: {
            click: function () {
              console.log(this);
            }
          }
        },
        tooltip: {
          pointFormat: '<b>{point.name}<br></b><br>Location: {point.city}, {point.country}<br><br>Latitude: {point.lat:.4f}<br>Longitude: {point.lon:.4f}'
        }
      }]
    });

  }

  onMount(() => {
    initMap();
  });
</script>

<div id="map-container" class="map-container">
  <div bind:this={mapContainer} class="map"></div>
</div>

<style>
  .map-container {
    width: 100vw;
    max-width: 100%;
    margin: 0;
    margin-top: 2rem;
    border-radius: 0;
    overflow: hidden;
  }

  .map {
    width: 100%;
    height: 100%;
  }

  :global(.highcharts-container) {
    background-color: transparent;
  }

  :global(.highcharts-background) {
    fill: transparent;
  }

  :global(.highcharts-title) {
    fill: #e0e0e0;
  }

  :global(.highcharts-axis-labels) {
    fill: #e0e0e0;
  }

  :global(.highcharts-axis-title) {
    fill: #e0e0e0;
  }

  :global(.highcharts-legend-item) {
    fill: #e0e0e0;
  }

  :global(.highcharts-button) {
    fill: #2a2a2a;
    stroke: #444;
  }

  :global(.highcharts-button text) {
    fill: #e0e0e0;
  }

  :global(.highcharts-button:hover) {
    fill: #3a3a3a;
  }

  :global(.highcharts-tooltip-box) {
    fill: rgba(0, 0, 0, 0.9);
    stroke: rgba(255, 255, 255, 0.2);
  }

  :global(.highcharts-tooltip text) {
    fill: #e0e0e0;
  }
</style>
