// Initialize map layers
        const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors',
            maxNativeZoom: 19,
            maxZoom: 23
        });

        const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: '© Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community',
            maxNativeZoom: 18,
            maxZoom: 23
        });

        // Initialize map
        const map = L.map('map', {
            maxZoom: 23
        }).setView([0, 0], 2);
        osmLayer.addTo(map);

        let currentLayer = 'osm';
        let geojsonLayer = null;
        let labelsLayer = null;
        let currentGeojsonData = null;
        let featuresList = [];
        let showLabels = false;

        // Toggle map layer
        const mapToggle = document.getElementById('mapToggle');
        const mapTypeLabel = document.getElementById('mapTypeLabel');

        mapToggle.addEventListener('change', () => {
            if (mapToggle.checked) {
                // Switch to satellite
                map.removeLayer(osmLayer);
                satelliteLayer.addTo(map);
                mapTypeLabel.textContent = 'SAT';
                currentLayer = 'satellite';
            } else {
                // Switch to OSM
                map.removeLayer(satelliteLayer);
                osmLayer.addTo(map);
                mapTypeLabel.textContent = 'OSM';
                currentLayer = 'osm';
            }
        });

        // Toggle labels visibility
        const labelsToggle = document.getElementById('labelsToggle');
        labelsToggle.addEventListener('change', () => {
            showLabels = labelsToggle.checked;
            if (!labelsLayer) {
                console.warn('Labels layer not initialized');
                return;
            }
            
            if (showLabels) {
                labelsLayer.addTo(map);
                updateLabelsVisibility();
            } else {
                map.removeLayer(labelsLayer);
            }
        });

        // Elements
        const geojsonInput = document.getElementById('geojsonFile');
        const fileNameDisplay = document.getElementById('fileName');
        const errorMessage = document.getElementById('errorMessage');
        const successMessage = document.getElementById('successMessage');
        const statsSection = document.getElementById('statsSection');
        const featuresSection = document.getElementById('featuresSection');
        const propertiesSection = document.getElementById('propertiesSection');
        const propertiesContent = document.getElementById('propertiesContent');
        const featureCountEl = document.getElementById('featureCount');
        const geomTypeEl = document.getElementById('geomType');
        const boundsEl = document.getElementById('bounds');
        const featureLst = document.getElementById('featuresList');
        const clearBtn = document.getElementById('clearBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const featureModal = document.getElementById('featureModal');
        const modalTitle = document.getElementById('modalTitle');
        const modalBody = document.getElementById('modalBody');
        const summarySection = document.getElementById('summarySection');
        const tableSection = document.getElementById('tableSection');
        const clientNameEl = document.getElementById('clientName');
        const totalFieldsEl = document.getElementById('totalFields');
        const totalHectaresEl = document.getElementById('totalHectares');
        const totalAcresEl = document.getElementById('totalAcres');
        const featureSearch = document.getElementById('featureSearch');

        // Show message
        function showMessage(message, type = 'error') {
            const el = type === 'error' ? errorMessage : successMessage;
            el.textContent = message;
            el.classList.add('active');
            setTimeout(() => el.classList.remove('active'), 5000);
        }

        // Calculate area in square meters using Turf.js
        function getFeatureArea(feature) {
            try {
                if (!feature.geometry) return 0;
                
                const geomType = feature.geometry.type;
                
                if (geomType === 'Point') return 0;
                if (geomType === 'LineString' || geomType === 'MultiLineString') return 0;
                
                // Use Haversine formula for rough area calculation
                const coords = feature.geometry.coordinates;
                
                if (geomType === 'Polygon') {
                    return calculatePolygonArea(coords[0]);
                } else if (geomType === 'MultiPolygon') {
                    return coords.reduce((total, polygon) => total + calculatePolygonArea(polygon[0]), 0);
                }
            } catch (e) {
                console.warn('Error calculating area:', e);
                return 0;
            }
            return 0;
        }

        // Calculate polygon area using Shoelace formula
        function calculatePolygonArea(coords) {
            if (!coords || coords.length < 3) return 0;
            
            let area = 0;
            const R = 6371000; // Earth radius in meters
            
            for (let i = 0; i < coords.length - 1; i++) {
                const p1 = coords[i];
                const p2 = coords[i + 1];
                
                const lat1 = (p1[1] * Math.PI) / 180;
                const lat2 = (p2[1] * Math.PI) / 180;
                const dLng = ((p2[0] - p1[0]) * Math.PI) / 180;
                
                area += Math.sin(lat1) * Math.cos(lat1) * dLng;
                area += Math.sin(lat1) * Math.cos(lat2) * Math.sin(dLng);
            }
            
            area = Math.abs(area * R * R / 2);
            return area;
        }

        // Convert square meters to hectares and acres
        function convertArea(squareMeters) {
            const hectares = squareMeters / 10000;
            const acres = squareMeters / 4046.856;
            return { hectares, acres };
        }

        // Get first property key (field code)
        function getFirstPropertyValue(properties) {
            if (!properties) return '';
            const keys = Object.keys(properties);
            if (keys.length === 0) return '';
            return properties[keys[0]];
        }

        // Create labels layer from features
        function createLabelsLayer(features) {
            labelsLayer = L.featureGroup([]);
            
            // First pass: collect all label positions
            const labelPositions = [];
            features.forEach((feature, index) => {
                const props = feature.properties || {};
                const fieldCode = getFirstPropertyValue(props);
                const displayLabel = fieldCode || `Feature ${index + 1}`;
                
                if (feature.geometry && feature.geometry.type !== 'Point') {
                    // Get centroid for polygon features
                    const bounds = L.geoJSON(feature).getBounds();
                    const center = bounds.getCenter();
                    
                    labelPositions.push({
                        fieldName: displayLabel,
                        latlng: center,
                        originalLatlng: center,
                        iconAnchor: [0, 0],
                        isPoint: false
                    });
                } else if (feature.geometry && feature.geometry.type === 'Point') {
                    // For points, add label above the marker
                    const latlng = L.GeoJSON.coordsToLatLng(feature.geometry.coordinates);
                    labelPositions.push({
                        fieldName: displayLabel,
                        latlng: latlng,
                        originalLatlng: latlng,
                        iconAnchor: [0, 30],
                        isPoint: true
                    });
                }
            });
            
            // Create markers
            labelPositions.forEach((pos) => {
                const label = L.marker(pos.latlng, {
                    icon: L.divIcon({
                        className: 'field-label',
                        html: `<div style="
                            background: rgba(102, 126, 234, 0.9);
                            color: white;
                            padding: 4px 8px;
                            border-radius: 4px;
                            font-size: 14px;
                            font-weight: 600;
                            white-space: nowrap;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                            border: 2px solid white;
                            pointer-events: none;
                            text-align: center;
                            max-width: 200px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        ">${pos.fieldName}</div>`,
                        iconSize: [null, null],
                        iconAnchor: pos.iconAnchor
                    }),
                    interactive: false
                });
                labelsLayer.addLayer(label);
            });
        }

        // Update labels visibility based on zoom level
        function updateLabelsVisibility() {
            const zoomLevel = map.getZoom();
            const minZoomForLabels = 16; // Only show labels at zoom level 13 and above
            
            if (labelsLayer && showLabels) {
                if (zoomLevel >= minZoomForLabels) {
                    labelsLayer.eachLayer(layer => {
                        layer.setOpacity(1);
                    });
                } else {
                    labelsLayer.eachLayer(layer => {
                        layer.setOpacity(0);
                    });
                }
            }
        }

        // Handle file upload
        geojsonInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file) return;

            fileNameDisplay.textContent = `📄 ${file.name}`;
            fileNameDisplay.classList.add('active');

            const reader = new FileReader();
            reader.onload = (event) => {
                try {
                    const geojson = JSON.parse(event.target.result);
                    const success = loadGeojson(geojson, file.name);
                    if (success) {
                        showMessage('GeoJSON loaded successfully!', 'success');
                    }
                } catch (error) {
                    showMessage(`Error parsing file: ${error.message}`, 'error');
                }
            };
            reader.onerror = () => {
                showMessage('Error reading file', 'error');
            };
            reader.readAsText(file);
        });

        // Validate CRS
        function validateCRS(geojson) {
            // If no CRS is specified, assume WGS84 (default for GeoJSON)
            if (!geojson.crs) {
                return { valid: true, message: 'No CRS specified (default WGS84)' };
            }

            const crs = geojson.crs;
            let crsName = '';

            // Extract CRS name from different possible formats
            if (crs.properties && crs.properties.name) {
                crsName = crs.properties.name;
            } else if (typeof crs === 'string') {
                crsName = crs;
            }

            // Check if it's WGS84 (various possible names)
            const wgs84Variations = [
                'EPSG:4326',
                'epsg:4326',
                'urn:ogc:def:crs:EPSG::4326',
                'urn:ogc:def:crs:EPSG:4.3:4326',
                'WGS84',
                'wgs84',
                'urn:ogc:def:crs:OGC:1.3:CRS84'
            ];

            const isWGS84 = wgs84Variations.some(variant => 
                crsName.toUpperCase().includes(variant.toUpperCase())
            );

            if (isWGS84) {
                return { valid: true, message: 'CRS: WGS84' };
            } else {
                return { 
                    valid: false, 
                    message: `Non-supported CRS (${JSON.stringify(crs)})` 
                };
            }
        }

        // Load and display GeoJSON
        function loadGeojson(geojson, fileName) {
            // Validate CRS first
            const crsValidation = validateCRS(geojson);
            if (!crsValidation.valid) {
                showMessage(crsValidation.message, 'error');
                return false;
            }

            // Clear previous layer
            if (geojsonLayer) {
                map.removeLayer(geojsonLayer);
            }

            // Clear previous labels
            if (labelsLayer) {
                map.removeLayer(labelsLayer);
            }

            currentGeojsonData = geojson;
            featuresList = [];

            // Handle both FeatureCollection and individual features
            const features = geojson.type === 'FeatureCollection' 
                ? geojson.features 
                : [geojson];

            if (features.length === 0) {
                showMessage('GeoJSON contains no features', 'error');
                return false;
            }

            // Create layer with popups
            geojsonLayer = L.geoJSON(geojson, {
                onEachFeature: (feature, layer) => {
                    const index = featuresList.length;
                    featuresList.push({ feature, layer, index });

                    // Add click handler to open modal
                    layer.on('click', (e) => {
                        L.DomEvent.stopPropagation(e);
                        openFeatureModal(feature);
                        selectFeature(index);
                    });

                    // Hover effect
                    layer.on('mouseover', () => {
                        if (layer.setStyle) {
                            layer.setStyle({
                                weight: 3,
                                opacity: 1,
                                dashArray: ''
                            });
                        }
                    });

                    layer.on('mouseout', () => {
                        if (layer.setStyle) {
                            geojsonLayer.resetStyle(layer);
                        }
                    });
                },
                style: {
                    color: '#667eea',
                    weight: 2,
                    opacity: 0.7,
                    fillOpacity: 0.5
                },
                pointToLayer: (feature, latlng) => {
                    return L.circleMarker(latlng, {
                        radius: 8,
                        fillColor: '#667eea',
                        color: '#fff',
                        weight: 2,
                        opacity: 1,
                        fillOpacity: 0.8
                    });
                }
            }).addTo(map);

            // Create labels layer
            createLabelsLayer(features);
            
            // Fit bounds
            const bounds = geojsonLayer.getBounds();
            map.fitBounds(bounds, { padding: [50, 50] });

            // Update labels visibility based on zoom level
            updateLabelsVisibility();
            map.on('zoom', updateLabelsVisibility);

            // Update stats
            updateStats(geojson, features);

            // Display features list
            displayFeaturesList();

            // Build attribute table
            buildAttributeTable(features);

            // Calculate and display summary
            updateSummary(geojson, features);

            // Show/hide elements
            summarySection.style.display = 'block';
            statsSection.style.display = 'block';
            featuresSection.style.display = 'block';
            tableSection.style.display = 'block';
            downloadBtn.style.display = 'block';

            return true;
        }

        // Update statistics
        function updateStats(geojson, features) {
            featureCountEl.textContent = features.length;

            // Get geometry type
            const types = new Set();
            features.forEach(f => {
                if (f.geometry) {
                    types.add(f.geometry.type);
                }
            });
            geomTypeEl.textContent = Array.from(types).join(', ') || '-';

            // Get bounds
            const bounds = geojsonLayer.getBounds();
            const sw = bounds.getSouthWest();
            const ne = bounds.getNorthEast();
            boundsEl.textContent = `[${sw.lat.toFixed(2)}, ${sw.lng.toFixed(2)}] - [${ne.lat.toFixed(2)}, ${ne.lng.toFixed(2)}]`;
        }

        // Display features list
        function displayFeaturesList() {
            featureLst.innerHTML = '';
            featureSearch.value = '';
            
            featuresList.forEach((item, index) => {
                const div = document.createElement('div');
                div.className = 'feature-item';
                
                // Get first property value (field code)
                const props = item.feature.properties || {};
                const fieldCode = getFirstPropertyValue(props);
                const name = fieldCode || `Feature ${index + 1}`;
                
                div.textContent = name;
                div.dataset.index = index;
                
                div.addEventListener('click', () => selectFeature(index));
                featureLst.appendChild(div);
            });
        }

        // Select feature
        function selectFeature(index) {
            const item = featuresList[index];
            if (!item) {
                console.error('Feature not found at index:', index);
                return;
            }

            // Update feature list UI
            document.querySelectorAll('.feature-item').forEach((el, i) => {
                el.classList.toggle('active', i === index);
            });

            // Display properties in sidebar
            displayProperties(item.feature);

            // Open modal with properties
            openFeatureModal(item.feature);

            // Zoom to feature on map
            setTimeout(() => {
                try {
                    if (item.feature.geometry.type === 'Point') {
                        const latlng = item.layer.getLatLng();
                        map.setView(latlng, 14);
                    } else {
                        const bounds = L.geoJSON(item.feature).getBounds();
                        map.fitBounds(bounds, { padding: [100, 100] });
                    }
                } catch (e) {
                    console.error('Error zooming to feature:', e);
                }
            }, 100);

            // Update map styling
            if (item.layer.setStyle) {
                item.layer.setStyle({
                    weight: 3,
                    opacity: 1
                });
            }
        }

        // Display properties
        function displayProperties(feature) {
            propertiesSection.classList.add('active');
            propertiesContent.innerHTML = '';

            const props = feature.properties || {};
            if (Object.keys(props).length === 0) {
                propertiesContent.innerHTML = '<div class="no-data">No properties</div>';
                return;
            }

            Object.entries(props).forEach(([key, value]) => {
                const row = document.createElement('div');
                row.className = 'property-row';
                
                const keyEl = document.createElement('div');
                keyEl.className = 'property-key';
                keyEl.textContent = key;
                
                const valueEl = document.createElement('div');
                valueEl.className = 'property-value';
                valueEl.textContent = typeof value === 'object' 
                    ? JSON.stringify(value, null, 2) 
                    : value;
                
                row.appendChild(keyEl);
                row.appendChild(valueEl);
                propertiesContent.appendChild(row);
            });
        }

        // Build attribute table
        function buildAttributeTable(features) {
            const tableHeader = document.getElementById('tableHeader');
            const tableBody = document.getElementById('tableBody');
            
            tableHeader.innerHTML = '';
            tableBody.innerHTML = '';
            
            if (features.length === 0) return;
            
            // Collect all unique property keys
            const allKeys = new Set();
            features.forEach(f => {
                if (f.properties) {
                    Object.keys(f.properties).forEach(key => allKeys.add(key));
                }
            });
            
            // Add area columns
            allKeys.add('Area (ha)');
            allKeys.add('Area (acres)');
            
            // Create header
            const headerKeys = Array.from(allKeys);
            headerKeys.forEach(key => {
                const th = document.createElement('th');
                th.textContent = key;
                tableHeader.appendChild(th);
            });
            
            // Create rows
            features.forEach((feature, idx) => {
                const row = document.createElement('tr');
                row.style.cursor = 'pointer';
                row.addEventListener('click', () => selectFeature(idx));
                row.addEventListener('mouseover', () => row.style.backgroundColor = '#f0f0f0');
                row.addEventListener('mouseout', () => row.style.backgroundColor = '');
                
                const props = feature.properties || {};
                const areaM2 = getFeatureArea(feature);
                const { hectares, acres } = convertArea(areaM2);
                
                headerKeys.forEach(key => {
                    const td = document.createElement('td');
                    if (key === 'Area (ha)') {
                        td.textContent = hectares.toFixed(2);
                    } else if (key === 'Area (acres)') {
                        td.textContent = acres.toFixed(2);
                    } else {
                        td.textContent = props[key] !== undefined ? props[key] : '-';
                    }
                    row.appendChild(td);
                });
                
                tableBody.appendChild(row);
            });
        }

        // Update summary section
        function updateSummary(geojson, features) {
            // Try to get client name from GeoJSON properties or filename
            let clientName = 'Unknown Project';
            if (geojson.name) {
                clientName = geojson.name;
            } else if (geojson.properties && geojson.properties.name) {
                clientName = geojson.properties.name;
            }
            
            // Calculate totals
            let totalHa = 0;
            let totalAc = 0;
            
            features.forEach(feature => {
                const areaM2 = getFeatureArea(feature);
                const { hectares, acres } = convertArea(areaM2);
                totalHa += hectares;
                totalAc += acres;
            });
            
            // Update UI
            clientNameEl.textContent = clientName;
            totalFieldsEl.textContent = features.length;
            totalHectaresEl.textContent = totalHa.toFixed(2);
            totalAcresEl.textContent = totalAc.toFixed(2);
        }

        // Open feature modal
        function openFeatureModal(feature) {
            const props = feature.properties || {};
            const featureName = props.name || props.id || 'Feature Details';
            
            modalTitle.textContent = featureName;
            modalBody.innerHTML = '';

            if (Object.keys(props).length === 0) {
                modalBody.innerHTML = '<div class="modal-empty">No properties available</div>';
                featureModal.classList.add('active');
                return;
            }

            Object.entries(props).forEach(([key, value]) => {
                const propDiv = document.createElement('div');
                propDiv.className = 'modal-property';
                
                const keyEl = document.createElement('div');
                keyEl.className = 'modal-property-key';
                keyEl.textContent = key;
                
                const valueEl = document.createElement('div');
                valueEl.className = 'modal-property-value';
                valueEl.textContent = typeof value === 'object' 
                    ? JSON.stringify(value, null, 2) 
                    : value;
                
                propDiv.appendChild(keyEl);
                propDiv.appendChild(valueEl);
                modalBody.appendChild(propDiv);
            });

            featureModal.classList.add('active');
        }

        // Close feature modal
        function closeFeatureModal() {
            featureModal.classList.remove('active');
        }

        // Close modal when clicking outside
        featureModal.addEventListener('click', (e) => {
            if (e.target === featureModal) {
                closeFeatureModal();
            }
        });

        // Close modal with Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                closeFeatureModal();
            }
        });

        // Clear all
        clearBtn.addEventListener('click', () => {
            if (confirm('Are you sure you want to clear all data?')) {
                if (geojsonLayer) {
                    map.removeLayer(geojsonLayer);
                    geojsonLayer = null;
                }
                if (labelsLayer) {
                    map.removeLayer(labelsLayer);
                    labelsLayer = null;
                }
                currentGeojsonData = null;
                featuresList = [];
                geojsonInput.value = '';
                fileNameDisplay.textContent = '';
                fileNameDisplay.classList.remove('active');
                summarySection.style.display = 'none';
                statsSection.style.display = 'none';
                tableSection.style.display = 'none';
                featuresSection.style.display = 'none';
                downloadBtn.style.display = 'none';
                propertiesSection.classList.remove('active');
                propertiesContent.innerHTML = '<div class="no-data">Select a feature to view properties</div>';
                map.setView([0, 0], 2);
            }
        });

        // Download
        downloadBtn.addEventListener('click', () => {
            if (!currentGeojsonData) return;

            const dataStr = JSON.stringify(currentGeojsonData, null, 2);
            const dataBlob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(dataBlob);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'geojson-export.geojson';
            link.click();
            URL.revokeObjectURL(url);
            showMessage('GeoJSON downloaded!', 'success');
        });

        // Search features
        featureSearch.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            const items = document.querySelectorAll('.feature-item');
            
            items.forEach(item => {
                const text = item.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });