<script>
  import { onMount } from 'svelte';
  import * as L from 'leaflet';
  import 'leaflet/dist/leaflet.css';

  /**
     * @type {{ removeLayer: (arg0: any) => void; setView: (arg0: number[], arg1: any) => void; getZoom: () => any; on: (arg0: string, arg1: (e: any) => void) => void; }}
     */
  let map;
  let mouseLat = 0;
  let mouseLng = 0;
  /**
     * @type {null}
     */
  let marker = null;

  let startPoint = 'Custom';
  let startHeight = 0;
  let startTime = '13:13';
  let startDate = new Date(2025, 2, 24);
  let ascentRate = 5;
  let burstAltitude = 30000;
  let flightProfile = 'Normal';
  let descentRate = 5;
  let forecastMode = 'Single';
  let inputLat = '56.3576';
  let inputLng = '39.8666';

  let showBurstCalculator = false;
  let payloadMass = 1500;
  let balloonMass = 1000;
  let desiredBurstAltitude = 33000;
  let desiredAscentRate = 2.33;

  let burstAltitudeResult = 33000;
  let timeToBurst = 236;
  let initialVolume = 2.66;
  let ascentRateResult = 2.33;
  let liftForce = 1733;
  let volumeLiters = 2662;
  let volumeCubicFeet = 94.0;

  const toggleBurstCalculator = () => {
    showBurstCalculator = !showBurstCalculator;
  };

  const calculateBurst = () => {
    // In a real app, you would implement actual calculations here
    // These are just placeholder values matching your image
    burstAltitudeResult = desiredBurstAltitude;
    timeToBurst = 236;
    initialVolume = 2.66;
    ascentRateResult = desiredAscentRate;
    liftForce = 1733;
    volumeLiters = 2662;
    volumeCubicFeet = 94.0;
  };

  const updateMapPosition = () => {
    const lat = parseFloat(inputLat);
    const lng = parseFloat(inputLng);
    
    if (isNaN(lat)) {
      alert("Please enter a valid latitude");
      return;
    }
    if (isNaN(lng)) {
      alert("Please enter a valid longitude");
      return;
    }
    if (lat < -90 || lat > 90) {
      alert("Latitude must be between -90 and 90");
      return;
    }
    if (lng < -180 || lng > 180) {
      alert("Longitude must be between -180 and 180");
      return;
    }
    
    // Remove existing marker if it exists
    if (marker) {
      map.removeLayer(marker);
    }
    
    // Create new marker
    marker = L.marker([lat, lng]).addTo(map)
      .bindPopup("Launch Point");
    
    // Center map on new coordinates
    map.setView([lat, lng], map.getZoom());
  };
  
  onMount(() => {
    map = L.map('map').setView([51.505, -0.09], 13);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    map.on('mousemove', (e) => {
      mouseLat = e.latlng.lat.toFixed(6);
      mouseLng = e.latlng.lng.toFixed(6);
    });

    marker = L.marker([56.3576, 39.8666]).addTo(map)
    .bindPopup(() => {
        return `
          <b>Launch Point</b><br>, Lat: ${marker.getLatLng().lat.toFixed(6)}<br>, Long: ${marker.getLatLng().lng.toFixed(6)}<br>
        `;
      });
  });
</script>

<div class="container-fluid position-relative h-100">
  <div id="map" class="w-100 h-100 position-absolute"></div>
  <div class="position-absolute top-0 end-0 bg-light p-2 rounded shadow-sm">
    Lat: {mouseLat}, Long: {mouseLng}
  </div>
</div>

