im trying to create a realistic gravity sim in 2d for browser of solar system but this code is broken and not working can you fix and make a great sim please?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Solar System Simulation</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
        #stats {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
<canvas id="solarSystemCanvas"></canvas>
<div id="stats"></div>
<script>
    const canvas = document.getElementById('solarSystemCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const G = 6.67430e-11; // Gravitational constant
    const AU = 1.496e+11; // Astronomical Unit in meters

    // Sun Properties
    const sun = { 
        x: canvas.width / 2, 
        y: canvas.height / 2, 
        radius: 30, 
        mass: 1.989e30, // kg (mass of the Sun)
        color: 'yellow' 
    };

    // Planet Properties (mass, distance in AU, radius in pixels, color)
    const planets = [
        { name: "Mercury", mass: 3.301e23, distance: 0.39 * AU, radius: 5, color: 'gray', orbit: [] },
        { name: "Venus", mass: 4.867e24, distance: 0.72 * AU, radius: 8, color: 'orange', orbit: [] },
        { name: "Earth", mass: 5.972e24, distance: AU, radius: 10, color: 'blue', orbit: [] },
        { name: "Mars", mass: 6.417e23, distance: 1.52 * AU, radius: 7, color: 'red', orbit: [] },
        { name: "Jupiter", mass: 1.898e27, distance: 5.2 * AU, radius: 15, color: 'orange', orbit: [] },
        { name: "Saturn", mass: 5.683e26, distance: 9.58 * AU, radius: 12, color: 'gold', orbit: [] },
        { name: "Uranus", mass: 8.681e25, distance: 19.22 * AU, radius: 11, color: 'lightblue', orbit: [] },
        { name: "Neptune", mass: 1.024e26, distance: 30.07 * AU, radius: 10, color: 'darkblue', orbit: [] },
    ];

    // Initialize planets
    planets.forEach(planet => {
        planet.angle = Math.random() * Math.PI * 2; // Random starting angle
        planet.orbitSpeed = Math.sqrt(G * sun.mass / planet.distance); // Orbital speed based on Kepler's laws
        planet.selected = false; // To track selection
    });

    let scale = 0.000000005; // Scale factor for zooming
    let time = 0; // Simulation time

    function drawSun() {
        ctx.beginPath();
        ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
        ctx.fillStyle = sun.color;
        ctx.fill();
        ctx.closePath();
    }

    function drawOrbit(planet) {
        ctx.beginPath();
        ctx.arc(sun.x, sun.y, planet.distance * scale, 0, Math.PI * 2);
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; // Orbit line color
        ctx.stroke();
        ctx.closePath();
    }

    function drawPlanets() {
        planets.forEach(planet => {
            // Calculate the planet's position based on its angle
            planet.x = sun.x + (planet.distance * scale) * Math.cos(planet.angle);
            planet.y = sun.y + (planet.distance * scale) * Math.sin(planet.angle);
            
            drawOrbit(planet); // Draw the orbit line
            
            ctx.beginPath();
            ctx.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2);
            ctx.fillStyle = planet.color;
            ctx.fill();
            ctx.closePath();

            // Update angle based on orbital speed
            planet.angle += (planet.orbitSpeed / 10000); // Adjust for frame rate and slow down
        });
    }

    function drawStats() {
        const selectedPlanet = planets.find(p => p.selected);
        const statsDiv = document.getElementById('stats');
        if (selectedPlanet) {
            const velocity = selectedPlanet.orbitSpeed.toFixed(2);
            const gravity = (G * sun.mass) / Math.pow(selectedPlanet.distance, 2);
            const gravityDisplay = gravity.toFixed(2);
            statsDiv.innerHTML = `
                <strong>${selectedPlanet.name}</strong><br>
                Coordinates: (${selectedPlanet.x.toFixed(2)}, ${selectedPlanet.y.toFixed(2)})<br>
                Orbital Speed: ${velocity} m/s<br>
                Gravitational Pull: ${gravityDisplay} m/s²
            `;
        } else {
            statsDiv.innerHTML = 'Select a planet to see stats.';
        }
    }

    canvas.addEventListener('click', (event) => {
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        planets.forEach(planet => {
            const dx = planet.x - mouseX;
            const dy = planet.y - mouseY;
            if (Math.sqrt(dx * dx + dy * dy) < planet.radius) {
                planet.selected = true;
            } else {
                planet.selected = false;
            }
        });
    });

    // Zoom functionality
    canvas.addEventListener('wheel', (event) => {
        event.preventDefault();
        if (event.deltaY < 0) {
            scale *= 1.1; // Zoom in
        } else {
            scale *= 0.9; // Zoom out
        }
    });

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'black'; // Background color
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        drawSun();
        drawPlanets();
        drawStats();
        requestAnimationFrame(animate);
    }

    animate();
</script>
</body>
</html>