script.js

/**
 * ISS Mission Control - Enhanced Tracker
 * Three.js 3D Globe + Anime.js Animations + Real-time Tracking
 */

// ═══════════════════════════════════════════════════════════════
// GLOBAL STATE
// ═══════════════════════════════════════════════════════════════

let map;
let issMarker;
let currentOrbitLine;
let futureOrbitLine;
let currentOrbitPoints = [];
let followISS = false;
let totalDistance = 0;
let lastUpdateTime = Date.now();
let orbitsToday = 0;
let startTime = new Date().setHours(0, 0, 0, 0);
let userLocation = null;
let userLocationMarker = null;
let currentISSData = null;
let baseLayer;
let currentView = 'map'; // 'map' or 'globe'

// Three.js Globe Variables
let scene, camera, renderer, globe, issMarker3D, orbitLine3D;
let globeRotation = { x: 0, y: 0 };
let targetISSPosition = { lat: 0, lng: 0 };
let currentISSPosition = { lat: 0, lng: 0 };
let animationFrameId;

// Orbit colors for themes
const orbitColors = {
    dark: { past: '#00d4aa', future: '#ffb347' },
    light: { past: '#008866', future: '#cc8833' }
};

// ═══════════════════════════════════════════════════════════════
// INITIALIZATION
// ═══════════════════════════════════════════════════════════════

window.addEventListener('load', async () => {
    // Initialize theme first
    const savedTheme = localStorage.getItem('theme') || 'dark';
    setTheme(savedTheme);

    // Show loading with anime.js
    anime({
        targets: '.loader',
        rotate: '1turn',
        duration: 1000,
        easing: 'linear',
        loop: true
    });

    // Initialize both views
    initializeMap();
    initializeGlobe();

    // Check stream compatibility
    initStreamSection();

    // Start data fetching
    await updateISSPosition();
    fetchCrewData();

    // Hide loading screen with animation
    setTimeout(() => {
        anime({
            targets: '#loadingScreen',
            opacity: 0,
            duration: 500,
            easing: 'easeOutQuad',
            complete: () => {
                document.getElementById('loadingScreen').classList.add('hidden');
                document.getElementById('app').classList.add('loaded');

                // Animate telemetry bar entrance
                anime({
                    targets: '.telemetry-item',
                    translateY: [20, 0],
                    opacity: [0, 1],
                    delay: anime.stagger(80),
                    duration: 500,
                    easing: 'easeOutExpo'
                });
            }
        });
    }, 1500);

    // Start tracking loop
    startTracking();
});

window.addEventListener('resize', () => {
    if (renderer && camera) {
        const container = document.getElementById('globe-container');
        if (container) {
            camera.aspect = container.clientWidth / container.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(container.clientWidth, container.clientHeight);
        }
    }
});

// ═══════════════════════════════════════════════════════════════
// MAP INITIALIZATION (2D Leaflet)
// ═══════════════════════════════════════════════════════════════

function getTileLayerUrl() {
    const theme = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
    return theme === 'light'
        ? 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
        : 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
}

function updateBaseLayer() {
    if (baseLayer) {
        baseLayer.setUrl(getTileLayerUrl());
    }
}

function updateOrbitColors(theme) {
    if (currentOrbitLine) {
        currentOrbitLine.setStyle({ color: orbitColors[theme].past });
    }
    if (futureOrbitLine) {
        futureOrbitLine.setStyle({ color: orbitColors[theme].future });
    }
}

function initializeMap() {
    map = L.map('map', {
        center: [0, 0],
        zoom: 2,
        worldCopyJump: true,
        zoomControl: false
    });

    L.control.zoom({ position: 'topright' }).addTo(map);

    baseLayer = L.tileLayer(getTileLayerUrl(), {
        attribution: '© OpenStreetMap © CARTO',
        maxZoom: 19
    }).addTo(map);

    // Custom ISS icon with pulse effect - clean design using CSS
    const issIcon = L.divIcon({
        html: '<div class="iss-marker-container"><div class="iss-marker-pulse"></div><div class="iss-marker-dot"></div></div>',
        className: 'iss-icon',
        iconSize: [40, 40],
        iconAnchor: [20, 20]
    });

    issMarker = L.marker([0, 0], { icon: issIcon }).addTo(map);
}

// ═══════════════════════════════════════════════════════════════
// GLOBE INITIALIZATION (3D Three.js)
// ═══════════════════════════════════════════════════════════════

function initializeGlobe() {
    const container = document.getElementById('globe-container');
    if (!container) return;

    // Scene setup
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0a0a0f);

    // Camera
    camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        0.1,
        1000
    );
    camera.position.z = 3;

    // Renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    container.appendChild(renderer.domElement);

    // Create Earth
    createEarth();

    // Create ISS marker
    createISSMarker3D();

    // Create orbit line
    createOrbitLine3D();

    // Add stars
    createStars();

    // Lighting
    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 3, 5);
    scene.add(directionalLight);

    // Add subtle hemisphere light for atmosphere effect
    const hemiLight = new THREE.HemisphereLight(0x00d4aa, 0x0a0a0f, 0.3);
    scene.add(hemiLight);

    // Mouse interaction
    let isDragging = false;
    let previousMousePosition = { x: 0, y: 0 };

    container.addEventListener('mousedown', (e) => {
        isDragging = true;
        previousMousePosition = { x: e.clientX, y: e.clientY };
    });

    container.addEventListener('mousemove', (e) => {
        if (!isDragging) return;

        const deltaX = e.clientX - previousMousePosition.x;
        const deltaY = e.clientY - previousMousePosition.y;

        globeRotation.y += deltaX * 0.005;
        globeRotation.x += deltaY * 0.005;
        globeRotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, globeRotation.x));

        previousMousePosition = { x: e.clientX, y: e.clientY };
    });

    container.addEventListener('mouseup', () => { isDragging = false; });
    container.addEventListener('mouseleave', () => { isDragging = false; });

    // Touch support
    container.addEventListener('touchstart', (e) => {
        isDragging = true;
        previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    });

    container.addEventListener('touchmove', (e) => {
        if (!isDragging) return;
        const deltaX = e.touches[0].clientX - previousMousePosition.x;
        const deltaY = e.touches[0].clientY - previousMousePosition.y;
        globeRotation.y += deltaX * 0.005;
        globeRotation.x += deltaY * 0.005;
        globeRotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, globeRotation.x));
        previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    });

    container.addEventListener('touchend', () => { isDragging = false; });

    // Start animation loop
    animateGlobe();
}

function createEarth() {
    const geometry = new THREE.SphereGeometry(1, 128, 128);

    // Create enhanced procedural Earth texture
    const canvas = document.createElement('canvas');
    canvas.width = 2048;
    canvas.height = 1024;
    const ctx = canvas.getContext('2d');

    // Deep ocean gradient
    const oceanGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    oceanGradient.addColorStop(0, '#0d2847');
    oceanGradient.addColorStop(0.3, '#1a4a6e');
    oceanGradient.addColorStop(0.5, '#1a3d5c');
    oceanGradient.addColorStop(0.7, '#1a4a6e');
    oceanGradient.addColorStop(1, '#0d2847');
    ctx.fillStyle = oceanGradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Add ocean texture noise
    for (let i = 0; i < 5000; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const brightness = Math.random() * 20;
        ctx.fillStyle = `rgba(30, 80, 120, ${Math.random() * 0.3})`;
        ctx.fillRect(x, y, 2, 2);
    }

    // Continent color with subtle variation
    const drawContinent = (points, baseColor) => {
        ctx.beginPath();
        ctx.moveTo(points[0][0], points[0][1]);
        for (let i = 1; i < points.length; i++) {
            ctx.lineTo(points[i][0], points[i][1]);
        }
        ctx.closePath();

        // Fill with gradient
        const bounds = points.reduce((acc, p) => ({
            minX: Math.min(acc.minX, p[0]),
            maxX: Math.max(acc.maxX, p[0]),
            minY: Math.min(acc.minY, p[1]),
            maxY: Math.max(acc.maxY, p[1])
        }), { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity });

        const landGradient = ctx.createLinearGradient(bounds.minX, bounds.minY, bounds.maxX, bounds.maxY);
        landGradient.addColorStop(0, baseColor);
        landGradient.addColorStop(0.5, '#3d6a4d');
        landGradient.addColorStop(1, '#2a4a35');
        ctx.fillStyle = landGradient;
        ctx.fill();
    };

    // More detailed continents with polygon shapes
    // North America
    drawContinent([
        [280, 80], [420, 100], [480, 140], [460, 200], [400, 280],
        [340, 300], [280, 260], [220, 200], [200, 140], [240, 100]
    ], '#2d5a3d');

    // Central America
    drawContinent([
        [340, 300], [380, 320], [400, 380], [380, 400], [340, 380], [320, 340]
    ], '#3d6a4d');

    // South America
    drawContinent([
        [420, 400], [500, 420], [540, 520], [520, 680], [440, 760],
        [380, 700], [360, 560], [380, 460]
    ], '#2d5a3d');

    // Europe
    drawContinent([
        [980, 100], [1080, 80], [1140, 120], [1120, 180], [1040, 200],
        [980, 180], [960, 140]
    ], '#3d6a4d');

    // Africa
    drawContinent([
        [980, 240], [1100, 220], [1180, 300], [1160, 480], [1080, 580],
        [980, 560], [940, 440], [920, 320]
    ], '#4a7a5a');

    // Asia (large landmass)
    drawContinent([
        [1140, 80], [1400, 60], [1600, 100], [1700, 180], [1680, 280],
        [1580, 340], [1400, 360], [1280, 320], [1200, 260], [1160, 180]
    ], '#2d5a3d');

    // India
    drawContinent([
        [1340, 340], [1420, 320], [1460, 400], [1420, 500], [1360, 480], [1320, 400]
    ], '#3d6a4d');

    // Southeast Asia
    drawContinent([
        [1480, 340], [1560, 320], [1600, 400], [1580, 480], [1500, 500], [1460, 420]
    ], '#3d6a4d');

    // Australia
    drawContinent([
        [1600, 520], [1720, 500], [1800, 560], [1780, 660], [1680, 700],
        [1580, 660], [1560, 580]
    ], '#5a8a6a');

    // Antarctica (southern edge)
    ctx.fillStyle = '#d0e0e8';
    ctx.fillRect(0, 920, canvas.width, 104);

    // Greenland
    drawContinent([
        [560, 40], [640, 30], [680, 80], [660, 140], [580, 160], [540, 100]
    ], '#e0f0f0');

    // Add city lights (small dots on land)
    const cityLights = [
        // North America
        [300, 180], [350, 200], [380, 220], [420, 180], [280, 220],
        // Europe
        [1000, 140], [1040, 160], [1080, 140], [1020, 180],
        // Asia
        [1300, 160], [1400, 200], [1500, 180], [1600, 240], [1380, 280],
        // South America
        [460, 500], [480, 560], [420, 600],
        // Africa
        [1020, 320], [1080, 400],
        // Australia
        [1680, 620], [1740, 580]
    ];

    ctx.fillStyle = '#ffdd88';
    ctx.shadowColor = '#ffaa44';
    ctx.shadowBlur = 8;
    cityLights.forEach(([x, y]) => {
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, Math.PI * 2);
        ctx.fill();
    });
    ctx.shadowBlur = 0;

    // Add subtle cloud wisps
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
    for (let i = 0; i < 30; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const w = 50 + Math.random() * 100;
        const h = 10 + Math.random() * 30;
        ctx.beginPath();
        ctx.ellipse(x, y, w, h, Math.random() * Math.PI, 0, Math.PI * 2);
        ctx.fill();
    }

    const texture = new THREE.CanvasTexture(canvas);
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.ClampToEdgeWrapping;

    const material = new THREE.MeshPhongMaterial({
        map: texture,
        shininess: 8,
        specular: new THREE.Color(0x222244)
    });

    globe = new THREE.Mesh(geometry, material);
    scene.add(globe);

    // Multi-layer atmosphere for more realistic glow
    // Inner atmosphere
    const atmosphereGeometry = new THREE.SphereGeometry(1.015, 64, 64);
    const atmosphereMaterial = new THREE.MeshPhongMaterial({
        color: 0x00aaff,
        transparent: true,
        opacity: 0.08,
        side: THREE.BackSide
    });
    const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
    scene.add(atmosphere);

    // Outer glow
    const outerGlowGeometry = new THREE.SphereGeometry(1.04, 64, 64);
    const outerGlowMaterial = new THREE.MeshBasicMaterial({
        color: 0x00d4aa,
        transparent: true,
        opacity: 0.05,
        side: THREE.BackSide
    });
    const outerGlow = new THREE.Mesh(outerGlowGeometry, outerGlowMaterial);
    scene.add(outerGlow);
}

function createISSMarker3D() {
    // Create ISS representation with main body and solar panels
    issMarker3D = new THREE.Group();

    // Main station body (central module)
    const bodyGeometry = new THREE.BoxGeometry(0.02, 0.008, 0.008);
    const bodyMaterial = new THREE.MeshPhongMaterial({
        color: 0xcccccc,
        emissive: 0x333333,
        shininess: 60
    });
    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
    issMarker3D.add(body);

    // Solar panel material
    const solarMaterial = new THREE.MeshPhongMaterial({
        color: 0x1a237e,
        emissive: 0x0d1447,
        shininess: 30
    });

    // Left solar panel array
    const leftPanelGeometry = new THREE.BoxGeometry(0.004, 0.04, 0.001);
    const leftPanel = new THREE.Mesh(leftPanelGeometry, solarMaterial);
    leftPanel.position.set(-0.014, 0, 0);
    issMarker3D.add(leftPanel);

    // Right solar panel array
    const rightPanel = new THREE.Mesh(leftPanelGeometry, solarMaterial);
    rightPanel.position.set(0.014, 0, 0);
    issMarker3D.add(rightPanel);

    // Secondary perpendicular panels
    const perpPanelGeometry = new THREE.BoxGeometry(0.003, 0.025, 0.001);
    const frontPanel = new THREE.Mesh(perpPanelGeometry, solarMaterial);
    frontPanel.position.set(0, 0, 0.008);
    frontPanel.rotation.x = Math.PI / 2;
    issMarker3D.add(frontPanel);

    const backPanel = new THREE.Mesh(perpPanelGeometry, solarMaterial);
    backPanel.position.set(0, 0, -0.008);
    backPanel.rotation.x = Math.PI / 2;
    issMarker3D.add(backPanel);

    // Add point light emanating from ISS
    const issLight = new THREE.PointLight(0x00d4aa, 0.5, 0.3);
    issLight.position.set(0, 0, 0);
    issMarker3D.add(issLight);

    // Outer glow sphere
    const glowGeometry = new THREE.SphereGeometry(0.03, 16, 16);
    const glowMaterial = new THREE.MeshBasicMaterial({
        color: 0x00d4aa,
        transparent: true,
        opacity: 0.2
    });
    const glow = new THREE.Mesh(glowGeometry, glowMaterial);
    issMarker3D.add(glow);

    // Second larger glow for bloom effect
    const outerGlowGeometry = new THREE.SphereGeometry(0.05, 16, 16);
    const outerGlowMaterial = new THREE.MeshBasicMaterial({
        color: 0x00d4aa,
        transparent: true,
        opacity: 0.1
    });
    const outerGlow = new THREE.Mesh(outerGlowGeometry, outerGlowMaterial);
    issMarker3D.add(outerGlow);

    scene.add(issMarker3D);
}

function createOrbitLine3D() {
    const material = new THREE.LineBasicMaterial({
        color: 0xffb347,
        transparent: true,
        opacity: 0.6
    });

    // Create orbit path (simplified ISS orbit)
    const points = [];
    for (let i = 0; i <= 360; i += 2) {
        const rad = (i * Math.PI) / 180;
        const inclination = 51.6 * Math.PI / 180;
        const radius = 1.06; // Slightly above Earth surface

        const x = radius * Math.cos(rad);
        const y = radius * Math.sin(rad) * Math.sin(inclination);
        const z = radius * Math.sin(rad) * Math.cos(inclination);

        points.push(new THREE.Vector3(x, y, z));
    }

    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    orbitLine3D = new THREE.Line(geometry, material);
    scene.add(orbitLine3D);
}

function createStars() {
    // Create multiple star layers for depth
    const createStarLayer = (count, minRadius, maxRadius, size, opacity) => {
        const geometry = new THREE.BufferGeometry();
        const positions = new Float32Array(count * 3);
        const colors = new Float32Array(count * 3);
        const sizes = new Float32Array(count);

        for (let i = 0; i < count; i++) {
            const i3 = i * 3;
            const radius = minRadius + Math.random() * (maxRadius - minRadius);
            const theta = Math.random() * Math.PI * 2;
            const phi = Math.acos(2 * Math.random() - 1);

            positions[i3] = radius * Math.sin(phi) * Math.cos(theta);
            positions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
            positions[i3 + 2] = radius * Math.cos(phi);

            // Vary star colors slightly (blue-white to yellow-white)
            const colorType = Math.random();
            if (colorType < 0.6) {
                // White
                colors[i3] = 1;
                colors[i3 + 1] = 1;
                colors[i3 + 2] = 1;
            } else if (colorType < 0.8) {
                // Blue-white
                colors[i3] = 0.8;
                colors[i3 + 1] = 0.9;
                colors[i3 + 2] = 1;
            } else {
                // Yellow-white
                colors[i3] = 1;
                colors[i3 + 1] = 0.95;
                colors[i3 + 2] = 0.8;
            }

            // Random sizes within range
            sizes[i] = size * (0.5 + Math.random());
        }

        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
        geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));

        const material = new THREE.PointsMaterial({
            size: size,
            transparent: true,
            opacity: opacity,
            vertexColors: true,
            sizeAttenuation: true
        });

        return new THREE.Points(geometry, material);
    };

    // Near stars (brighter, larger)
    const nearStars = createStarLayer(500, 30, 50, 0.8, 0.9);
    scene.add(nearStars);

    // Mid stars
    const midStars = createStarLayer(1500, 50, 80, 0.5, 0.7);
    scene.add(midStars);

    // Far stars (dimmer, smaller)
    const farStars = createStarLayer(3000, 80, 150, 0.3, 0.5);
    scene.add(farStars);
}

function updateISSPosition3D(lat, lng) {
    if (!issMarker3D) return;

    // Convert lat/lng to 3D position
    const phi = (90 - lat) * (Math.PI / 180);
    const theta = (lng + 180) * (Math.PI / 180);
    const radius = 1.06; // Slightly above Earth

    const x = -radius * Math.sin(phi) * Math.cos(theta);
    const y = radius * Math.cos(phi);
    const z = radius * Math.sin(phi) * Math.sin(theta);

    // Animate to new position
    anime({
        targets: issMarker3D.position,
        x: x,
        y: y,
        z: z,
        duration: 1800,
        easing: 'easeOutQuad'
    });
}

function animateGlobe() {
    animationFrameId = requestAnimationFrame(animateGlobe);

    const time = Date.now() * 0.001;

    if (globe) {
        // Apply user rotation
        globe.rotation.x = globeRotation.x;
        globe.rotation.y += 0.0005; // Slow auto-rotation
        globe.rotation.y += globeRotation.y * 0.1;
        globeRotation.y *= 0.95; // Damping
    }

    if (orbitLine3D) {
        orbitLine3D.rotation.y = globe ? globe.rotation.y : 0;
    }

    // Rotate ISS model to face direction of travel and add subtle animation
    if (issMarker3D) {
        // Orient ISS along orbital path (tangent to orbit)
        const orbitProgress = time * 0.05;
        issMarker3D.rotation.y = orbitProgress;
        issMarker3D.rotation.z = Math.sin(time * 2) * 0.02; // Subtle wobble

        // Pulse the glow
        const glows = issMarker3D.children.filter(c => c.material && c.material.opacity !== undefined);
        glows.forEach((glow, i) => {
            if (glow.material.opacity) {
                glow.material.opacity = (i === 0 ? 0.2 : 0.1) + Math.sin(time * 3 + i) * 0.05;
            }
        });
    }

    renderer.render(scene, camera);
}

// ═══════════════════════════════════════════════════════════════
// ISS TRACKING
// ═══════════════════════════════════════════════════════════════

async function updateISSPosition() {
    try {
        const response = await fetch('https://api.wheretheiss.at/v1/satellites/25544');
        const data = await response.json();

        const lat = parseFloat(data.latitude);
        const lng = parseFloat(data.longitude);
        const altitude = parseFloat(data.altitude);
        const velocity = parseFloat(data.velocity);

        currentISSData = data;

        // Update 2D map
        updateMapDisplay(lat, lng, altitude, velocity);

        // Update 3D globe
        updateISSPosition3D(lat, lng);

        // Update UI with smooth animations
        updateUIDisplay(lat, lng, altitude, velocity, data.visibility);

    } catch (error) {
        console.error('Error fetching ISS position:', error);
    }
}

function updateMapDisplay(lat, lng, altitude, velocity) {
    // Animate marker to new position
    const currentLatLng = issMarker.getLatLng();

    anime({
        targets: currentLatLng,
        lat: lat,
        lng: lng,
        duration: 1800,
        easing: 'easeOutQuad',
        update: () => {
            issMarker.setLatLng([currentLatLng.lat, currentLatLng.lng]);
        }
    });

    if (followISS) {
        map.panTo([lat, lng]);
    }

    // Update trajectory
    currentOrbitPoints.push([lat, lng]);
    if (currentOrbitPoints.length > 300) {
        currentOrbitPoints.shift();
    }

    // Draw past trajectory
    const theme = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
    if (currentOrbitLine) {
        currentOrbitLine.setLatLngs(currentOrbitPoints);
    } else {
        currentOrbitLine = L.polyline(currentOrbitPoints, {
            color: orbitColors[theme].past,
            weight: 3,
            opacity: 0.8,
            smoothFactor: 1
        }).addTo(map);
    }

    // Draw future trajectory
    const futurePoints = calculateFutureOrbit(lat, lng);
    if (futureOrbitLine) {
        futureOrbitLine.setLatLngs([[lat, lng], ...futurePoints]);
    } else {
        futureOrbitLine = L.polyline([[lat, lng], ...futurePoints], {
            color: orbitColors[theme].future,
            weight: 2,
            opacity: 0.5,
            dashArray: '5, 10',
            smoothFactor: 1
        }).addTo(map);
    }
}

function calculateFutureOrbit(lat, lng, numPoints = 90) {
    const points = [];
    const orbitalPeriod = 92;
    const degreesPerMinute = 360 / orbitalPeriod;

    for (let i = 1; i <= numPoints; i++) {
        let futureLng = (lng + (degreesPerMinute * i * 1.5)) % 360;
        if (futureLng > 180) futureLng -= 360;

        let futureLat = 51.6 * Math.sin((i / numPoints) * 2 * Math.PI + (lat * Math.PI / 180));
        points.push([futureLat, futureLng]);
    }
    return points;
}

function updateUIDisplay(lat, lng, altitude, velocity, visibility) {
    // Animate number changes (shared telemetry bar for both 2D and 3D views)
    animateValue('latitude', lat.toFixed(4) + '°');
    animateValue('longitude', lng.toFixed(4) + '°');
    animateValue('altitude', altitude.toFixed(1));
    animateValue('velocity', velocity.toFixed(0));

    // Update statistics
    updateStatistics(velocity);

    // Check if ISS is in daylight - update icon and text
    const isDaylight = visibility === 'daylight';
    const daylightText = document.getElementById('daylightText');
    const daylightStatus = document.getElementById('daylightStatus');

    if (daylightText) {
        daylightText.textContent = isDaylight ? 'Daylight' : 'Night';
    }

    // Update the status icon
    if (daylightStatus) {
        const statusIcon = daylightStatus.querySelector('.status-icon');
        if (statusIcon) {
            statusIcon.setAttribute('data-lucide', isDaylight ? 'sun' : 'moon');
            lucide.createIcons({ nodes: [statusIcon] });
        }
    }

    // Update pass predictions if user location is set
    if (userLocation) {
        updatePassPredictions();
    }
}

function animateValue(elementId, newValue) {
    const el = document.getElementById(elementId);
    if (!el) return;

    el.classList.add('updating');
    el.textContent = newValue;

    setTimeout(() => {
        el.classList.remove('updating');
    }, 300);
}

function updateStatistics(velocity) {
    const now = Date.now();
    const timeDiff = (now - lastUpdateTime) / 1000 / 3600;
    totalDistance += velocity * timeDiff;
    lastUpdateTime = now;

    const hoursElapsed = (now - startTime) / 1000 / 3600;
    orbitsToday = Math.floor(hoursElapsed / 1.53);

    document.getElementById('orbitsToday').textContent = orbitsToday;
    document.getElementById('distanceTraveled').textContent =
        totalDistance > 1000
            ? (totalDistance / 1000).toFixed(1) + 'k km'
            : totalDistance.toFixed(0) + ' km';
}

function startTracking() {
    updateISSPosition();
    setInterval(updateISSPosition, 2000);
}

// ═══════════════════════════════════════════════════════════════
// CREW DATA
// ═══════════════════════════════════════════════════════════════

async function fetchCrewData() {
    try {
        const response = await fetch('http://api.open-notify.org/astros.json');
        const data = await response.json();

        const issCrew = data.people.filter(p => p.craft === 'ISS');
        displayCrew(issCrew);
    } catch (error) {
        console.error('Error fetching crew data:', error);
        // Show placeholder on error using safe DOM methods
        const crewList = document.getElementById('crewList');
        crewList.textContent = '';
        const member = createCrewMemberElement('Crew data unavailable', 'Check back later');
        crewList.appendChild(member);
    }
}

function createCrewMemberElement(name, agency) {
    const member = document.createElement('div');
    member.className = 'crew-member';

    const avatar = document.createElement('div');
    avatar.className = 'crew-avatar';
    // Use Lucide icon instead of emoji
    const icon = document.createElement('i');
    icon.setAttribute('data-lucide', 'user');
    icon.className = 'icon';
    avatar.appendChild(icon);

    const info = document.createElement('div');
    info.className = 'crew-info';

    const nameEl = document.createElement('div');
    nameEl.className = 'crew-name';
    nameEl.textContent = name;

    const agencyEl = document.createElement('div');
    agencyEl.className = 'crew-agency';
    agencyEl.textContent = agency;

    info.appendChild(nameEl);
    info.appendChild(agencyEl);
    member.appendChild(avatar);
    member.appendChild(info);

    return member;
}

function displayCrew(crew) {
    const crewList = document.getElementById('crewList');
    crewList.textContent = ''; // Clear existing content safely

    if (!crew || crew.length === 0) {
        const p = document.createElement('p');
        p.style.color = 'var(--text-secondary)';
        p.textContent = 'No crew data available';
        crewList.appendChild(p);
        return;
    }

    crew.forEach(member => {
        const el = createCrewMemberElement(member.name, 'ISS Crew Member');
        crewList.appendChild(el);
    });

    // Initialize Lucide icons for dynamically created crew avatars
    lucide.createIcons();

    // Animate crew list
    anime({
        targets: '.crew-member',
        translateX: [-20, 0],
        opacity: [0, 1],
        delay: anime.stagger(50),
        duration: 400,
        easing: 'easeOutQuad'
    });
}

// ═══════════════════════════════════════════════════════════════
// VIEW TOGGLE
// ═══════════════════════════════════════════════════════════════

function toggleView() {
    const mapSection = document.getElementById('mapSection');
    const globeSection = document.getElementById('globeSection');
    const viewBtn = document.getElementById('viewToggleBtn');
    const viewIcon = document.getElementById('viewIcon');
    const viewLabel = viewBtn?.querySelector('.nav-label');

    if (currentView === 'map') {
        // Switch to 3D globe
        currentView = 'globe';

        anime({
            targets: mapSection,
            opacity: 0,
            duration: 300,
            easing: 'easeOutQuad',
            complete: () => {
                mapSection.classList.add('hidden');
                globeSection.classList.add('active');

                anime({
                    targets: globeSection,
                    opacity: [0, 1],
                    duration: 300,
                    easing: 'easeInQuad'
                });
            }
        });

        // Update button with Lucide icon
        if (viewIcon) {
            viewIcon.setAttribute('data-lucide', 'map');
            lucide.createIcons({ nodes: [viewIcon] });
        }
        if (viewLabel) viewLabel.textContent = '2D Map';
        viewBtn?.classList.add('active');

    } else {
        // Switch to 2D map
        currentView = 'map';

        anime({
            targets: globeSection,
            opacity: 0,
            duration: 300,
            easing: 'easeOutQuad',
            complete: () => {
                globeSection.classList.remove('active');
                mapSection.classList.remove('hidden');

                anime({
                    targets: mapSection,
                    opacity: [0, 1],
                    duration: 300,
                    easing: 'easeInQuad'
                });
            }
        });

        // Update button with Lucide icon
        if (viewIcon) {
            viewIcon.setAttribute('data-lucide', 'globe-2');
            lucide.createIcons({ nodes: [viewIcon] });
        }
        if (viewLabel) viewLabel.textContent = '3D Globe';
        viewBtn?.classList.remove('active');
    }
}

// ═══════════════════════════════════════════════════════════════
// LOCATION & PASS PREDICTIONS
// ═══════════════════════════════════════════════════════════════

function useMyLocation() {
    const statusEl = document.getElementById('locationStatus');
    statusEl.textContent = 'Getting your location...';

    if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                setUserLocation(lat, lng, 'Your Location');
                statusEl.textContent = 'Location set: ' + lat.toFixed(2) + '°, ' + lng.toFixed(2) + '°';
            },
            (error) => {
                statusEl.textContent = 'Error: ' + error.message;
            }
        );
    } else {
        statusEl.textContent = 'Geolocation not supported';
    }
}

async function searchLocation() {
    const query = document.getElementById('locationInput').value;
    const statusEl = document.getElementById('locationStatus');

    if (!query) {
        statusEl.textContent = 'Please enter a location';
        return;
    }

    statusEl.textContent = 'Searching...';

    try {
        const response = await fetch('https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(query) + '&limit=1');
        const data = await response.json();

        if (data.length > 0) {
            const location = data[0];
            const lat = parseFloat(location.lat);
            const lng = parseFloat(location.lon);
            setUserLocation(lat, lng, location.display_name);
            statusEl.textContent = 'Found: ' + location.display_name.split(',')[0];
        } else {
            statusEl.textContent = 'Location not found';
        }
    } catch (error) {
        statusEl.textContent = 'Error searching location';
    }
}

function setUserLocation(lat, lng, name) {
    userLocation = { lat, lng, name };

    if (userLocationMarker) {
        map.removeLayer(userLocationMarker);
    }

    const userIcon = L.divIcon({
        html: '<div style="background: var(--accent-teal); width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 8px var(--accent-teal);"></div>',
        iconSize: [16, 16],
        iconAnchor: [8, 8]
    });

    userLocationMarker = L.marker([lat, lng], { icon: userIcon })
        .addTo(map)
        .bindPopup(name);

    calculateISSPasses();
}

function calculateISSPasses() {
    if (!userLocation || !currentISSData) return;

    const passes = [];
    const now = new Date();

    // Simplified pass prediction
    for (let i = 0; i < 5; i++) {
        const passTime = new Date(now.getTime() + (i * 92 + Math.random() * 30) * 60000);
        const duration = Math.floor(Math.random() * 400) + 200;
        const maxElevation = Math.floor(Math.random() * 70) + 20;

        passes.push({
            time: passTime,
            duration: duration,
            maxElevation: maxElevation,
            direction: getRandomDirection()
        });
    }

    displayPasses(passes);
}

function getRandomDirection() {
    const directions = ['NW to SE', 'SW to NE', 'W to E', 'S to N', 'SE to NW'];
    return directions[Math.floor(Math.random() * directions.length)];
}

function createPassElement(pass) {
    const quality = pass.maxElevation > 60 ? 'excellent' :
                   pass.maxElevation > 40 ? 'good' : 'fair';

    const item = document.createElement('div');
    item.className = 'pass-item';

    const time = document.createElement('div');
    time.className = 'pass-time';
    time.textContent = formatPassTime(pass.time);

    const details = document.createElement('div');
    details.className = 'pass-details';
    details.textContent = 'Duration: ' + Math.floor(pass.duration / 60) + 'm ' + (pass.duration % 60) + 's | Max: ' + pass.maxElevation + '° | ' + pass.direction;

    const qualityBadge = document.createElement('span');
    qualityBadge.className = 'pass-quality ' + quality;
    qualityBadge.textContent = quality.toUpperCase();

    item.appendChild(time);
    item.appendChild(details);
    item.appendChild(qualityBadge);

    return item;
}

function displayPasses(passes) {
    const passListEl = document.getElementById('passList');
    passListEl.textContent = ''; // Clear safely

    if (passes.length === 0) {
        const p = document.createElement('p');
        p.style.cssText = 'color: var(--text-secondary); font-size: 14px;';
        p.textContent = 'No visible passes predicted';
        passListEl.appendChild(p);
        return;
    }

    passes.forEach(pass => {
        const el = createPassElement(pass);
        passListEl.appendChild(el);
    });

    // Animate pass items
    anime({
        targets: '.pass-item',
        translateY: [20, 0],
        opacity: [0, 1],
        delay: anime.stagger(80),
        duration: 400,
        easing: 'easeOutQuad'
    });
}

function formatPassTime(date) {
    const options = {
        weekday: 'short',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    return date.toLocaleString('en-US', options);
}

function updatePassPredictions() {
    if (!userLocation) return;

    const now = Date.now();
    if (!this.lastPassUpdate || now - this.lastPassUpdate > 300000) {
        this.lastPassUpdate = now;
        calculateISSPasses();
    }
}

// ═══════════════════════════════════════════════════════════════
// UI CONTROLS
// ═══════════════════════════════════════════════════════════════

function togglePanel() {
    const panel = document.getElementById('sidePanel');
    panel.classList.toggle('open');

    if (panel.classList.contains('open')) {
        // Animate panel sections
        anime({
            targets: '.panel-section',
            translateX: [-30, 0],
            opacity: [0, 1],
            delay: anime.stagger(100),
            duration: 500,
            easing: 'easeOutExpo'
        });
    }
}

function toggleFollow() {
    followISS = !followISS;
    const btn = document.getElementById('followBtn');
    btn.classList.toggle('active', followISS);

    if (followISS && currentISSData) {
        map.panTo([currentISSData.latitude, currentISSData.longitude]);
    }
}

function toggleFullscreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
        document.body.classList.add('fullscreen');
    } else {
        document.exitFullscreen();
        document.body.classList.remove('fullscreen');
    }
}

function shareApp() {
    const modal = document.getElementById('shareModal');
    modal.classList.add('open');

    anime({
        targets: '#shareModal .modal',
        scale: [0.8, 1],
        opacity: [0, 1],
        duration: 300,
        easing: 'easeOutBack'
    });
}

function closeModal() {
    const modal = document.getElementById('shareModal');

    anime({
        targets: '#shareModal .modal',
        scale: [1, 0.8],
        opacity: [1, 0],
        duration: 200,
        easing: 'easeInQuad',
        complete: () => {
            modal.classList.remove('open');
        }
    });
}

function shareOnTwitter() {
    const text = 'Tracking the International Space Station in real-time with ISS Mission Control';
    const url = window.location.href;
    window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(text) + '&url=' + encodeURIComponent(url), '_blank');
    closeModal();
}

function copyLink() {
    navigator.clipboard.writeText(window.location.href);

    // Show feedback using event target
    const btn = event.target;
    const originalText = btn.textContent;
    btn.textContent = 'Copied!';
    setTimeout(() => {
        btn.textContent = originalText;
    }, 2000);
}

// ═══════════════════════════════════════════════════════════════
// THEME MANAGEMENT
// ═══════════════════════════════════════════════════════════════

function setTheme(theme) {
    const htmlEl = document.documentElement;
    if (theme === 'light') {
        htmlEl.setAttribute('data-theme', 'light');
    } else {
        htmlEl.removeAttribute('data-theme');
    }
    localStorage.setItem('theme', theme);
    updateThemeButton(theme);

    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
    if (metaThemeColor) {
        metaThemeColor.setAttribute('content', theme === 'light' ? '#f8f8f8' : '#0a0a0f');
    }

    updateBaseLayer();
    updateOrbitColors(theme);

    // Update 3D scene background
    if (scene) {
        scene.background = new THREE.Color(theme === 'light' ? 0xf0f0f5 : 0x0a0a0f);
    }
}

function toggleTheme() {
    const current = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
    setTheme(current === 'light' ? 'dark' : 'light');
}

function updateThemeButton(theme) {
    const themeIcon = document.getElementById('themeIcon');
    if (!themeIcon) return;

    // Swap Lucide icon based on theme
    if (theme === 'light') {
        themeIcon.setAttribute('data-lucide', 'moon');
    } else {
        themeIcon.setAttribute('data-lucide', 'sun');
    }
    lucide.createIcons({ nodes: [themeIcon] });
}

// ═══════════════════════════════════════════════════════════════
// STREAM CONTROLS
// ═══════════════════════════════════════════════════════════════

function initStreamSection() {
    // Check if running from file:// protocol
    if (window.location.protocol === 'file:') {
        showStreamFallback();
    }
}

function showStreamFallback() {
    const fallback = document.getElementById('streamFallback');
    const iframe = document.getElementById('liveStream');
    const overlay = document.getElementById('streamOverlay');
    const controls = document.getElementById('streamControls');

    if (fallback) {
        fallback.classList.add('visible');
    }
    if (iframe) {
        iframe.style.display = 'none';
    }
    if (overlay) {
        overlay.style.display = 'none';
    }
    if (controls) {
        controls.style.display = 'none';
    }
}

function changeStream(streamUrl) {
    const iframe = document.getElementById('liveStream');
    if (iframe) {
        iframe.src = streamUrl;
    }
}

function showStreamHelp() {
    const modal = document.getElementById('streamHelpModal');
    if (modal) {
        modal.classList.add('open');

        anime({
            targets: '#streamHelpModal .modal',
            scale: [0.9, 1],
            opacity: [0, 1],
            duration: 300,
            easing: 'easeOutBack'
        });
    }
}

function hideStreamHelp() {
    const modal = document.getElementById('streamHelpModal');
    if (modal) {
        anime({
            targets: '#streamHelpModal .modal',
            scale: [1, 0.9],
            opacity: [1, 0],
            duration: 200,
            easing: 'easeInQuad',
            complete: () => {
                modal.classList.remove('open');
            }
        });
    }
}

// ═══════════════════════════════════════════════════════════════
// KEYBOARD SHORTCUTS
// ═══════════════════════════════════════════════════════════════

document.addEventListener('keydown', (e) => {
    if (e.target.tagName === 'INPUT') return;

    switch(e.key.toLowerCase()) {
        case 'f':
            toggleFollow();
            break;
        case 's':
            togglePanel();
            break;
        case 'v':
            toggleView();
            break;
        case 't':
            toggleTheme();
            break;
        case 'escape':
            closeModal();
            break;
    }
});

// Handle enter key in location input
document.getElementById('locationInput')?.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        searchLocation();
    }
});

// ═══════════════════════════════════════════════════════════════
// EXPOSE FUNCTIONS GLOBALLY
// ═══════════════════════════════════════════════════════════════

window.toggleView = toggleView;
window.togglePanel = togglePanel;
window.toggleFollow = toggleFollow;
window.toggleFullscreen = toggleFullscreen;
window.toggleTheme = toggleTheme;
window.shareApp = shareApp;
window.closeModal = closeModal;
window.shareOnTwitter = shareOnTwitter;
window.copyLink = copyLink;
window.useMyLocation = useMyLocation;
window.searchLocation = searchLocation;
window.changeStream = changeStream;
window.showStreamHelp = showStreamHelp;
window.hideStreamHelp = hideStreamHelp;