import { countriesData, getColorByPenetration, getRegionColor } from './data/countries-data.js';
import { citiesData, getCityRadius, getCityColor, getConnections } from './data/cities-data.js';

// Mapbox access token
mapboxgl.accessToken = 'pk.eyJ1IjoibGludXhpc2Nvb2wiLCJhIjoiY2w3ajM1MnliMDV4NDNvb2J5c3V5dzRxZyJ9.wJukH5hVSiO74GM_VSJR3Q';

// Initialize map with globe projection
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v11',
  projection: 'globe',
  center: [20, 20],
  zoom: 1.5
});

// Layer state management
const layerState = {
  countries: true,
  cities: true,
  connections: true,
  labels: true
};

// Add atmosphere styling
map.on('style.load', () => {
  map.setFog({
    color: 'rgb(186, 210, 235)',
    'high-color': 'rgb(36, 92, 223)',
    'horizon-blend': 0.02,
    'space-color': 'rgb(11, 11, 25)',
    'star-intensity': 0.6
  });
});

// Load and display data
map.on('load', () => {
  // Add country data source
  map.addSource('countries', {
    type: 'geojson',
    data: countriesData
  });

  // Add cities data source
  map.addSource('cities', {
    type: 'geojson',
    data: citiesData
  });

  // Add connections data source
  const connections = getConnections();
  map.addSource('connections', {
    type: 'geojson',
    data: connections
  });

  // Layer 1: Country fill layer (choropleth) - Internet penetration
  map.addLayer({
    id: 'country-fills',
    type: 'circle',
    source: 'countries',
    paint: {
      'circle-radius': [
        'interpolate',
        ['linear'],
        ['zoom'],
        1, ['/', ['get', 'population'], 2000000],
        5, ['/', ['get', 'population'], 500000]
      ],
      'circle-color': [
        'interpolate',
        ['linear'],
        ['get', 'internetPenetration'],
        0, '#cc0000',
        30, '#ff3300',
        40, '#ff6600',
        50, '#ff9900',
        60, '#ffcc00',
        70, '#33cc33',
        80, '#00b300',
        90, '#004d00'
      ],
      'circle-opacity': 0.7,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#ffffff',
      'circle-stroke-opacity': 0.3
    }
  });

  // Layer 2: Tech hub circles - sized by importance
  map.addLayer({
    id: 'tech-hubs',
    type: 'circle',
    source: 'cities',
    paint: {
      'circle-radius': [
        'interpolate',
        ['linear'],
        ['get', 'importance'],
        45, 4,
        60, 6,
        75, 9,
        90, 13,
        100, 18
      ],
      'circle-color': [
        'match',
        ['get', 'type'],
        'Internet Exchange', '#ff6b6b',
        'Tech Hub', '#4ecdc4',
        '#95e1d3'
      ],
      'circle-opacity': 0.85,
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ffffff',
      'circle-blur': 0.2
    }
  });

  // Layer 3: Connection lines between major hubs
  map.addLayer({
    id: 'hub-connections',
    type: 'line',
    source: 'connections',
    layout: {
      'line-join': 'round',
      'line-cap': 'round'
    },
    paint: {
      'line-color': '#00d4ff',
      'line-width': [
        'interpolate',
        ['linear'],
        ['get', 'strength'],
        400, 0.5,
        600, 1,
        800, 1.5,
        1000, 2
      ],
      'line-opacity': 0.4,
      'line-gradient': [
        'interpolate',
        ['linear'],
        ['line-progress'],
        0, '#00d4ff',
        0.5, '#00ffaa',
        1, '#00d4ff'
      ]
    }
  });

  // Layer 4: City labels for top tech hubs
  map.addLayer({
    id: 'city-labels',
    type: 'symbol',
    source: 'cities',
    filter: ['>=', ['get', 'importance'], 75],
    layout: {
      'text-field': ['get', 'city'],
      'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
      'text-size': [
        'interpolate',
        ['linear'],
        ['get', 'importance'],
        75, 10,
        90, 12,
        100, 14
      ],
      'text-offset': [0, 1.5],
      'text-anchor': 'top'
    },
    paint: {
      'text-color': '#ffffff',
      'text-halo-color': '#000000',
      'text-halo-width': 1.5
    }
  });

  // Add interactivity
  setupInteractivity();

  // Initialize UI controls
  setupUIControls();

  // Add legend
  createLegend();

  // Add info panel
  createInfoPanel();

  // Rotate globe
  let userInteracting = false;
  const spinGlobe = () => {
    if (!userInteracting) {
      const center = map.getCenter();
      center.lng += 0.05;
      map.easeTo({ center, duration: 1000, easing: t => t });
    }
  };

  map.on('mousedown', () => { userInteracting = true; });
  map.on('mouseup', () => { userInteracting = false; });
  map.on('dragend', () => { userInteracting = false; });
  map.on('pitchend', () => { userInteracting = false; });
  map.on('rotateend', () => { userInteracting = false; });

  setInterval(spinGlobe, 1000);
});

// Setup interactivity
function setupInteractivity() {
  // Change cursor on hover
  map.on('mouseenter', 'country-fills', () => {
    map.getCanvas().style.cursor = 'pointer';
  });

  map.on('mouseleave', 'country-fills', () => {
    map.getCanvas().style.cursor = '';
  });

  map.on('mouseenter', 'tech-hubs', () => {
    map.getCanvas().style.cursor = 'pointer';
  });

  map.on('mouseleave', 'tech-hubs', () => {
    map.getCanvas().style.cursor = '';
  });

  // Click on countries
  map.on('click', 'country-fills', (e) => {
    const properties = e.features[0].properties;

    new mapboxgl.Popup()
      .setLngLat(e.lngLat)
      .setHTML(`
        <div style="padding: 10px;">
          <h3 style="margin: 0 0 10px 0; color: #333;">${properties.name}</h3>
          <p style="margin: 5px 0;"><strong>Internet Penetration:</strong> ${properties.internetPenetration}%</p>
          <p style="margin: 5px 0;"><strong>Digital Index:</strong> ${properties.digitalIndex}</p>
          <p style="margin: 5px 0;"><strong>Region:</strong> ${properties.region}</p>
          <p style="margin: 5px 0;"><strong>Population:</strong> ${(properties.population / 1000000).toFixed(1)}M</p>
        </div>
      `)
      .addTo(map);
  });

  // Click on cities
  map.on('click', 'tech-hubs', (e) => {
    const properties = e.features[0].properties;

    new mapboxgl.Popup()
      .setLngLat(e.lngLat)
      .setHTML(`
        <div style="padding: 10px;">
          <h3 style="margin: 0 0 10px 0; color: #333;">${properties.city}</h3>
          <p style="margin: 5px 0;"><strong>Type:</strong> ${properties.type}</p>
          <p style="margin: 5px 0;"><strong>Importance Score:</strong> ${properties.importance}</p>
          <p style="margin: 5px 0;"><strong>Connections:</strong> ${properties.connections}</p>
          <p style="margin: 5px 0;"><strong>Data Centers:</strong> ${properties.datacenters}</p>
        </div>
      `)
      .addTo(map);
  });
}

// Setup UI controls
function setupUIControls() {
  // Layer toggles
  document.getElementById('toggle-countries').addEventListener('change', (e) => {
    layerState.countries = e.target.checked;
    map.setLayoutProperty('country-fills', 'visibility', e.target.checked ? 'visible' : 'none');
  });

  document.getElementById('toggle-cities').addEventListener('change', (e) => {
    layerState.cities = e.target.checked;
    map.setLayoutProperty('tech-hubs', 'visibility', e.target.checked ? 'visible' : 'none');
  });

  document.getElementById('toggle-connections').addEventListener('change', (e) => {
    layerState.connections = e.target.checked;
    map.setLayoutProperty('hub-connections', 'visibility', e.target.checked ? 'visible' : 'none');
  });

  document.getElementById('toggle-labels').addEventListener('change', (e) => {
    layerState.labels = e.target.checked;
    map.setLayoutProperty('city-labels', 'visibility', e.target.checked ? 'visible' : 'none');
  });

  // Region filter
  document.getElementById('region-filter').addEventListener('change', (e) => {
    const region = e.target.value;

    if (region === 'all') {
      map.setFilter('country-fills', null);
      map.setFilter('tech-hubs', null);
    } else {
      map.setFilter('country-fills', ['==', ['get', 'region'], region]);

      // For cities, we need to join with country data to filter by region
      const regionCountries = countriesData.features
        .filter(f => f.properties.region === region)
        .map(f => f.properties.country);

      map.setFilter('tech-hubs', ['in', ['get', 'country'], ['literal', regionCountries]]);
    }
  });

  // Metric filter
  document.getElementById('metric-filter').addEventListener('change', (e) => {
    const metric = e.target.value;

    if (metric === 'penetration') {
      map.setPaintProperty('country-fills', 'circle-color', [
        'interpolate',
        ['linear'],
        ['get', 'internetPenetration'],
        0, '#cc0000',
        30, '#ff3300',
        40, '#ff6600',
        50, '#ff9900',
        60, '#ffcc00',
        70, '#33cc33',
        80, '#00b300',
        90, '#004d00'
      ]);
    } else if (metric === 'digital-index') {
      map.setPaintProperty('country-fills', 'circle-color', [
        'interpolate',
        ['linear'],
        ['get', 'digitalIndex'],
        0, '#1a1a1a',
        25, '#4d4d4d',
        50, '#808080',
        75, '#b3b3b3',
        100, '#e6e6e6'
      ]);
    }

    updateLegend(metric);
  });

  // Opacity controls
  document.getElementById('country-opacity').addEventListener('input', (e) => {
    const opacity = parseFloat(e.target.value);
    map.setPaintProperty('country-fills', 'circle-opacity', opacity);
    document.getElementById('country-opacity-value').textContent = Math.round(opacity * 100) + '%';
  });

  document.getElementById('city-opacity').addEventListener('input', (e) => {
    const opacity = parseFloat(e.target.value);
    map.setPaintProperty('tech-hubs', 'circle-opacity', opacity);
    document.getElementById('city-opacity-value').textContent = Math.round(opacity * 100) + '%';
  });

  document.getElementById('connection-opacity').addEventListener('input', (e) => {
    const opacity = parseFloat(e.target.value);
    map.setPaintProperty('hub-connections', 'line-opacity', opacity);
    document.getElementById('connection-opacity-value').textContent = Math.round(opacity * 100) + '%';
  });
}

// Create legend
function createLegend() {
  const legend = document.getElementById('legend');
  legend.innerHTML = `
    <h4 style="margin: 0 0 10px 0;">Internet Penetration</h4>
    <div style="display: flex; flex-direction: column; gap: 5px;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #004d00; border-radius: 50%;"></div>
        <span>90-100%</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #00b300; border-radius: 50%;"></div>
        <span>80-90%</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #33cc33; border-radius: 50%;"></div>
        <span>70-80%</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #ffcc00; border-radius: 50%;"></div>
        <span>60-70%</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #ff9900; border-radius: 50%;"></div>
        <span>50-60%</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #ff6600; border-radius: 50%;"></div>
        <span>40-50%</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #ff3300; border-radius: 50%;"></div>
        <span>30-40%</span>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 20px; height: 20px; background: #cc0000; border-radius: 50%;"></div>
        <span>0-30%</span>
      </div>
    </div>
    <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
      <h4 style="margin: 0 0 10px 0;">Tech Hubs</h4>
      <div style="display: flex; flex-direction: column; gap: 5px;">
        <div style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 20px; height: 20px; background: #4ecdc4; border-radius: 50%;"></div>
          <span>Tech Hub</span>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 20px; height: 20px; background: #ff6b6b; border-radius: 50%;"></div>
          <span>Internet Exchange</span>
        </div>
      </div>
    </div>
    <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd;">
      <h4 style="margin: 0 0 10px 0;">Connections</h4>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 40px; height: 2px; background: linear-gradient(90deg, #00d4ff, #00ffaa);"></div>
        <span>Hub Links</span>
      </div>
    </div>
  `;
}

// Update legend based on metric
function updateLegend(metric) {
  const legend = document.getElementById('legend');

  if (metric === 'digital-index') {
    legend.innerHTML = `
      <h4 style="margin: 0 0 10px 0;">Digital Infrastructure Index</h4>
      <div style="display: flex; flex-direction: column; gap: 5px;">
        <div style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 20px; height: 20px; background: #e6e6e6; border-radius: 50%;"></div>
          <span>75-100</span>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 20px; height: 20px; background: #b3b3b3; border-radius: 50%;"></div>
          <span>50-75</span>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 20px; height: 20px; background: #808080; border-radius: 50%;"></div>
          <span>25-50</span>
        </div>
        <div style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 20px; height: 20px; background: #4d4d4d; border-radius: 50%;"></div>
          <span>0-25</span>
        </div>
      </div>
      <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
        <h4 style="margin: 0 0 10px 0;">Tech Hubs</h4>
        <div style="display: flex; flex-direction: column; gap: 5px;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <div style="width: 20px; height: 20px; background: #4ecdc4; border-radius: 50%;"></div>
            <span>Tech Hub</span>
          </div>
          <div style="display: flex; align-items: center; gap: 8px;">
            <div style="width: 20px; height: 20px; background: #ff6b6b; border-radius: 50%;"></div>
            <span>Internet Exchange</span>
          </div>
        </div>
      </div>
      <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd;">
        <h4 style="margin: 0 0 10px 0;">Connections</h4>
        <div style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 40px; height: 2px; background: linear-gradient(90deg, #00d4ff, #00ffaa);"></div>
          <span>Hub Links</span>
        </div>
      </div>
    `;
  } else {
    createLegend();
  }
}

// Create info panel
function createInfoPanel() {
  const info = document.getElementById('info');

  // Calculate statistics
  const totalCountries = countriesData.features.length;
  const avgPenetration = (countriesData.features.reduce((sum, f) =>
    sum + f.properties.internetPenetration, 0) / totalCountries).toFixed(1);
  const totalCities = citiesData.features.length;
  const topHubs = citiesData.features.filter(f => f.properties.importance >= 90).length;
  const connections = getConnections().features.length;

  info.innerHTML = `
    <h4 style="margin: 0 0 10px 0;">Global Statistics</h4>
    <div style="display: flex; flex-direction: column; gap: 8px; font-size: 13px;">
      <div><strong>Countries:</strong> ${totalCountries}</div>
      <div><strong>Avg. Internet Penetration:</strong> ${avgPenetration}%</div>
      <div><strong>Tech Hubs:</strong> ${totalCities}</div>
      <div><strong>Tier 1 Hubs:</strong> ${topHubs}</div>
      <div><strong>International Links:</strong> ${connections}</div>
    </div>
  `;
}
