function initializeGlobe() {
    console.log('Cesium is defined, initializing globe.');
    // Set your Cesium Ion default access token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTY0ZTQ1Yi0zYmYxLTQ5MjItODdkOS05ZDY0ZGRjYjQwM2QiLCJpZCI6MjA5ODgwLCJpYXQiOjE3MTM4MTY3OTB9.A-3Jt_G0K81s-A-XLpT2bn5aY2H3s-n2p-2jYf-i-g';

    try {
        console.log('Initializing Cesium Viewer');
        // Initialize a Cesium Viewer with a map
        const viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: new Cesium.OpenStreetMapImageryProvider({
                url : 'https://a.tile.openstreetmap.org/'
            }),
            animation: false,
            baseLayerPicker: false,
            fullscreenButton: false,
            geocoder: false,
            homeButton: false,
            infoBox: true,
            sceneModePicker: false,
            selectionIndicator: false,
            timeline: false,
            navigationHelpButton: false,
            scene3DOnly: true
        });
        viewer.scene.globe.depthTestAgainstTerrain = false;
        console.log('Cesium Viewer initialized successfully');

        

        // Function to load wildfire data
        const loadWildfireData = async () => {
            try {
                console.log('Fetching wildfire data...');
                const response = await fetch('api/wildfires.php');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const geojsonData = await response.json();
                console.log('Wildfire data fetched successfully.');

                const wildfireDataSource = new Cesium.GeoJsonDataSource();
                await wildfireDataSource.load(geojsonData, {
                    stroke: Cesium.Color.RED,
                    fill: Cesium.Color.RED.withAlpha(0.5),
                    strokeWidth: 2
                });
                
                viewer.dataSources.add(wildfireDataSource);
                console.log('Wildfire data source added to viewer.');

            } catch (error) {
                console.error('Error loading wildfire data:', error);
                // This catch block prevents the globe from crashing if the API fails.
            }
        };

        // Function to load hurricane data
        const loadHurricaneData = async () => {
            try {
                console.log('Fetching hurricane data...');
                // Use KmlDataSource for the KML data from the hurricanes API
                const hurricaneDataSource = await Cesium.KmlDataSource.load('api/hurricanes.php', {
                    camera: viewer.camera,
                    canvas: viewer.canvas
                });
                await viewer.dataSources.add(hurricaneDataSource);
                console.log('Hurricane data source added to viewer.');
            } catch (error) {
                console.error('Error loading hurricane data:', error);
            }
        };

        // Function to load GFS data
        const loadGfsData = async () => {
            try {
                console.log('Fetching GFS data...');
                const response = await fetch('api/gfs.php');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const geojsonData = await response.json();
                console.log('GFS data fetched successfully.');

                const gfsDataSource = new Cesium.GeoJsonDataSource();
                await gfsDataSource.load(geojsonData, {
                    stroke: Cesium.Color.BLUE.withAlpha(0.3),
                    fill: Cesium.Color.BLUE.withAlpha(0.3),
                    strokeWidth: 1
                });

                // Simple heatmap-like styling for GFS points
                gfsDataSource.entities.values.forEach(entity => {
                    const value = entity.properties.value.getValue();
                    const color = Cesium.Color.fromHsl(0.6 - (value - 100000) / 2000 * 0.5, 1.0, 0.5).withAlpha(0.5);
                    entity.point = new Cesium.PointGraphics({
                        color: color,
                        pixelSize: 5
                    });
                });

                viewer.dataSources.add(gfsDataSource);
                console.log('GFS data source added to viewer.');

            } catch (error) {
                console.error('Error loading GFS data:', error);
            }
        };

        // Load all data sources
        loadWildfireData();
        // loadHurricaneData();
        // loadGfsData();

    } catch (error) {
        console.error('A critical error occurred while initializing the Cesium viewer:', error);
        const cesiumContainer = document.getElementById('cesiumContainer');
        cesiumContainer.innerHTML = '<div class="alert alert-danger">Error: Could not load the 3D scene. Please check the console for details.</div>';
    }
}

function waitForCesium() {
    if (typeof Cesium !== 'undefined') {
        initializeGlobe();
    } else {
        console.log('Waiting for Cesium to load...');
        setTimeout(waitForCesium, 100);
    }
}

document.addEventListener('DOMContentLoaded', waitForCesium);