// Initialize scene, camera, renderer
let scene, camera, renderer, controls;
let raycaster, mouse;
let celestialObjects = [];
let infoBox = document.getElementById('info-box');

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.screenSpacePanning = false;

    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    camera.position.z = 100;

    // Create celestial objects
    createStars();
    createPlanets();

    // Add ambient light
    const light = new THREE.AmbientLight(0x404040);
    scene.add(light);

    // Add directional light
    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.position.set(1, 1, 1).normalize();
    scene.add(dirLight);

    // Event listener for mouse click
    window.addEventListener('click', onMouseClick, false);

    // Start the rendering loop
    animate();
}

function createStars() {
    const geometry = new THREE.SphereGeometry(0.5, 32, 32);
    const material = new THREE.MeshBasicMaterial({ color: 0x888888 });

    // Add a few stars (just for demo, this can be expanded)
    for (let i = 0; i < 1000; i++) {
        const star = new THREE.Mesh(geometry, material);
        star.position.x = Math.random() * 200 - 100;
        star.position.y = Math.random() * 200 - 100;
        star.position.z = Math.random() * 200 - 100;
        celestialObjects.push(star);
        scene.add(star);
    }
}

function createPlanets() {
    const geometry = new THREE.SphereGeometry(2, 32, 32);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

    // Add planets (with clickable tags)
    let planet = new THREE.Mesh(geometry, material);
    planet.position.set(20, 20, 0);
    planet.name = 'Planet X';
    celestialObjects.push(planet);
    scene.add(planet);
}

function onMouseClick(event) {
    // Normalize mouse coordinates (-1 to 1)
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.update();
    raycaster.setFromCamera(mouse, camera);

    // Find intersections with celestial objects
    const intersects = raycaster.intersectObjects(celestialObjects);

    if (intersects.length > 0) {
        const selectedObject = intersects[0].object;

        // Show info box with details about the clicked object
        displayInfo(selectedObject);
    }
}

function displayInfo(object) {
    let infoContent = '';
    if (object.name === 'Planet X') {
        infoContent = `
            <h3>Planet X</h3>
            <p>Planet X is a hypothetical planet beyond Neptune. It is theorized to explain gravitational anomalies in the outer solar system.</p>
        `;
    }

    infoBox.innerHTML = infoContent;
    infoBox.style.display = 'block';
}

// Render and animate the scene
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

// Initialize the 3D cosmos
init();