// app.js
import { API_BASE_URL } from "./config.js";

console.log('🔥 app.js loaded');

// Optional: set Ion token (if using Ion)
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjk0MDM3OC1kZDE1LTRhMjItODg3NC1iMjUzNmI1NzUwMjgiLCJpZCI6MzE2ODE3LCJpYXQiOjE3NTEyMzM5OTh9.UDLPRYrMOcLAjuCWAZa2f159W0bULWSMNv3iiQcAAP8';



// Create empty viewer with no base layer
const viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: false,
  baseLayerPicker: false,
  terrainProvider: new Cesium.EllipsoidTerrainProvider()
});

console.log('✅ Viewer created:', viewer);

// Create OSM imagery layer
const osmLayer = new Cesium.ImageryLayer(
  new Cesium.UrlTemplateImageryProvider({
    url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
    credit: "© OpenStreetMap contributors"
  })
);

// Add imagery layer manually
viewer.imageryLayers.add(osmLayer);

console.log('✅ OSM Layer Added:', osmLayer);
console.log('✅ Imagery Layers:', viewer.imageryLayers.length);



// Load CZML from FastAPI endpoint
fetch(`${API_BASE_URL}/czml/test`)  
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(czmlData => {
    // Load the CZML data into a Cesium data source
    const czmlSource = new Cesium.CzmlDataSource();
    czmlSource.load(czmlData).then(() => {
      viewer.dataSources.add(czmlSource);
      viewer.zoomTo(czmlSource);
    });
  })
  .catch(error => {
    console.error("Failed to load CZML:", error);
  });