document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM fully loaded and parsed');
    // 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 without a base imagery provider.
        const viewer = new Cesium.Viewer('cesiumContainer', {
            animation: false,
            baseLayerPicker: true,
            fullscreenButton: false,
            geocoder: false,
            homeButton: false,
            infoBox: true,
            sceneModePicker: false,
            selectionIndicator: false,
            timeline: false,
            navigationHelpButton: false,
            scene3DOnly: true,
            imageryProvider: Cesium.createWorldImagery(),
            terrainProvider: Cesium.createWorldTerrain(),
        });
        viewer.scene.globe.depthTestAgainstTerrain = false;
        console.log('Cesium Viewer initialized successfully');

        // Load political boundaries from GeoJSON
        const politicalBoundaries = Cesium.GeoJsonDataSource.load('https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson', {
            stroke: Cesium.Color.BLACK,
            fill: Cesium.Color.BEIGE.withAlpha(0.5),
            strokeWidth: 1,
        });

        politicalBoundaries.then(function(dataSource) {
            viewer.dataSources.add(dataSource);
            console.log('Political boundaries loaded.');
        }).catch(function(error){
            console.error('Error loading political boundaries:', error);
        });


        // 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.');

                geojsonData.features.forEach(feature => {
                    if (feature.geometry && feature.geometry.coordinates) {
                        try {
                            viewer.entities.add({
                                polygon: {
                                    hierarchy: new Cesium.PolygonHierarchy(
                                        Cesium.Cartesian3.fromDegreesArray(feature.geometry.coordinates[0].flat())
                                    ),
                                    material: Cesium.Color.RED.withAlpha(0.5),
                                    outline: true,
                                    outlineColor: Cesium.Color.RED,
                                    outlineWidth: 2
                                }
                            });
                        } catch (e) {
                            console.error('Error processing wildfire feature:', feature, e);
                        }
                    }
                });
                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.
            }
        };

        // Load all data sources
        loadWildfireData();

    } 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>';
    }
});