import * as THREE from 'three';
import { OrbitControls } from "./three/addons/controls/OrbitControls.js";
import { GLTFLoader } from './three/addons/loaders/GLTFLoader.js';

import { Sky } from './three/addons/objects/Sky.js';

var avion;


const loader = new GLTFLoader();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
const clock=new THREE.Clock();


var time=0;
var camera_speed=.05;
var target={x:2,y:2,z:2};
var camera_offset={x:100,y:10,z:100};
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 0.5;
const camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 0.1, 1000 );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
var requestID;
	let sky, sun;


//scene.add( cube );

const light = new THREE.PointLight( 0xffffff, 1000 );
scene.add(light);
light.position.set( 0, 10, 10 );

function initSky() {

	// Add Sky
	sky = new Sky();
	sky.scale.setScalar(450000);
	scene.add(sky);

	sun = new THREE.Vector3();

	/// GUI

	const effectController = {
		turbidity: 10,
		rayleigh: 3,
		mieCoefficient: 0.005,
		mieDirectionalG: 0.7,
		elevation: 2,
		azimuth: 180,
		exposure: renderer.toneMappingExposure
	};

}

function init() {
	scene.background = new THREE.Color(0x45b4d0);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// Cargar el modelo del avión
	loader.load('./4.glb', function(gltf) {
		console.log("Avión cargado.");
		avion = gltf.scene; // Asigna correctamente a 'avion'
		avion.scale.set(10, 10, 10);
		avion.position.set(-52, 0, -200); // Simplificado para posición
		scene.add(avion);


		// Ahora que el avión está cargado, habilita las interacciones
		document.getElementById("1").onclick = function() {

				renderer.setAnimationLoop(showQuestion); };
		//document.getElementById("2").onclick = function() { renderer.setAnimationLoop(animate2); };
		//document.getElementById("3").onclick = function() { renderer.setAnimationLoop(animate3); };

	}, undefined, function(error) {
		console.error("Error al cargar el modelo del avión: ", error);
	});

	// Configuración de los controles de órbita
	const controls = new OrbitControls(camera, renderer.domElement);
	controls.addEventListener("change", render); // Si no hay bucle de animación
	controls.minDistance = 5;
	controls.maxDistance = 200;
	controls.target.set(0, 0, -200);
	controls.update();

	// Evento para ajustar el renderizado al cambiar el tamaño de la ventana
	window.addEventListener("resize", onWindowResize);

	// Posicionamiento inicial de la cámara
	camera.position.set(70,10,-200);
	camera.lookAt(-52,10,-200);

	// Ayudante para visualizar ejes (opcional)
	const helper = new THREE.AxesHelper(50);
	scene.add(helper);

	// Inicialmente renderizar la escena
	render();
}





function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

  render();
}

function render() {
  renderer.render(scene, camera);
}

function createSceneFloor() {
	var longitud =500;
	var geometry = new THREE.PlaneGeometry( 50, longitud, 1, 1 );
	// change floor color
	var material = new THREE.MeshBasicMaterial({color:0xcccccc});
	var floor = new THREE.Mesh(geometry, material)
	floor.material.side = THREE.DoubleSide
	floor.rotation.x = 90 * Math.PI / 180

	var geometry2 = new THREE.PlaneGeometry( 50000, 50000, 1, 1 );
	// change floor color
	var material2 = new THREE.MeshBasicMaterial({color:0x00ff00});
	var floor2 = new THREE.Mesh(geometry2, material2)
	floor2.material.side = THREE.DoubleSide
	floor2.rotation.x = 90 * Math.PI / 180
	floor2.position.y = -1



	var g1 = new THREE.BoxGeometry( 1, 1, 1 );
	var m1 = new THREE.MeshBasicMaterial( { color: 0xdbfc03 } );

	var g2 = new THREE.BoxGeometry( 1, 1, 2 );
	var m2 = new THREE.MeshBasicMaterial( { color: 0xffffff } );


	var g3 = new THREE.BoxGeometry( 10, 10, 20 );
	var m3 = new THREE.MeshBasicMaterial( { color: 0xffffff } );
	for(var i=0-longitud/2;i< longitud/2;i=i+10 ){

		var pl  = new THREE.Mesh( g1, m1 );
		pl.position.set( -25, 0, i);
		scene.add(pl);
		var p2  = new THREE.Mesh( g1, m1 );
		p2.position.set( 25, 0, i);
		scene.add(p2);
		var p3  = new THREE.Mesh( g2, m2 );
		p3.position.set( 0, 0, i);
		scene.add(p3);



  }
	scene.add(floor)
	scene.add(floor2)




}
function preguntasUI(){
	document.getElementById("iconopreguntas").style.display ="block";

}


function showQuestion() {


	document.getElementById("questionContainer").style.display = "block";
	document.getElementById("1").style.display = "none";
	preguntasUI();
	window.submitAnswer = submitAnswer;



}

function stopanimation() {


}

let rotationAngle = 0;
const maxRotationAngle = Math.PI / 12; // 15 grados en radianes
const rotationSpeed = Math.PI / 180 / 4; // 0.25 grados por frame (más lento)
let rotationTime = 0;
const maxRotationTime = 5; // 5 segundos
let resetRotation = false;
function animate1() {
	if (haChocado) {
		return; // Si ha chocado, detenemos la animación.
	}



	clock.getDelta();
	time = clock.elapsedTime.toFixed(2);

	var avion = scene.children[scene.children.length-1];
	avion.position.y += .7;
	avion.position.z += .5;
	// Rotación durante el despegue
	// Rotación durante el despegue
	if (rotationTime < maxRotationTime) {
		if (rotationAngle < maxRotationAngle) {
			rotationAngle += rotationSpeed;
		}
		rotationTime += clock.getDelta();
		avion.rotation.x = -rotationAngle; // Rotar hacia arriba
	} else if (!resetRotation) {
		// Regresar a la posición original después de un tiempo
		rotationAngle -= rotationSpeed;
		if (rotationAngle <= 0) {
			rotationAngle = 0;
			resetRotation = true; // Marcar que hemos regresado a la posición original
		}
		avion.rotation.x = -rotationAngle; // Regresar a la posición original
	}




	// Actualización de la posición de la cámara y la luz
	camera.position.x = avion.position.x + camera_offset.x * Math.sin(time * .2);
	camera.position.y = avion.position.y + 5;
	camera.position.z = avion.position.z + camera_offset.z * Math.cos(time * .2) ;

	light.position.x = -10 + 30 * Math.sin(time * camera_speed);
	light.position.y = avion.position.y + 5;
	light.position.z = avion.position.z + 30 * Math.cos(time * camera_speed);



	camera.updateProjectionMatrix();
	camera.lookAt(avion.position.x, avion.position.y, avion.position.z );

	render();
}
let errores = 0;

function submitAnswer(isCorrect) {
	const resultContainer = document.getElementById('resultContainer');
	const imagenError = document.getElementById('imagen-error');

	if (resultContainer) {
		if (isCorrect) {
			manejarRespuesta(true, preguntaActualIndex);
			imagenError.style.display = 'none'; // Ocultar la imagen de error si la respuesta es correcta
		} else {
			errores++;
			manejarRespuesta(false, preguntaActualIndex);
			imagenError.style.display = 'block'; // Mostrar la imagen de error si la respuesta es incorrecta
			setTimeout(() => {
				imagenError.style.display = 'none'; // Ocultar la imagen de error después de un tiempo
			}, 2000);


		}



		if (preguntasMostradas.length === interprete_preguntas.length) {
			// Todas las preguntas han sido mostradas, ahora evaluamos los errores

				renderer.setAnimationLoop(animate1); // 2 segundos de animate1
				setTimeout(() => {
					if (errores > 2) {imagenError.style.display = 'block';
						animate2();


					}
				}, 2000);
			// Espera 2 segundos adicionales para animate2 o mostrarMensajeCanvas

		}

		resultContainer.style.display = 'block';
		actualizarTextoRestartContainer();

	}

	aleatorizar();

}



function actualizarTextoRestartContainer() {
	const restartContainer = document.getElementById('restartContainer');
	const restartButton = document.getElementById('restartButton');

	if (errores > 2) {
		restartButton.innerText = '¡Vuelo fallido!';

		console.log("1");
	}
	if (errores <= 2) {
		restartButton.innerText = '¡Vuelo exitoso!';

	}
}


let haChocado = false; // Corrige el nombre de la variable aquí
let descendAngle = 0;
const maxDescendAngle = Math.PI / 6; // 30 grados en radianes
const descendSpeed = Math.PI / 180 / 2; // 0.5 grados por frame (más lento)
let descendTime = 0;
const maxDescendTime = 3;
function animate2() {
	const delta = clock.getDelta();
	time = clock.elapsedTime.toFixed(2);
	if (descendTime < maxDescendTime) {
		if (descendAngle < maxDescendAngle) {
			descendAngle += descendSpeed;
		}
		descendTime += delta;
		avion.rotation.x = descendAngle; // Rotar hacia abajo
	}
	if (haChocado) {
		return;
	}

	const velocidadDeCaida = 1.2;
	avion.position.y -= velocidadDeCaida;

	if (avion.position.y <= -0.5) {
		console.log("El avión se estrello.");
		haChocado = true;

		// Este es solo un ejemplo genérico; ajusta según la lógica de tu aplicación
		crearExplosion(avion.position.clone(), 5);
		stopanimation();

		// Asegúrate de que esta función esté definida correctamente
		mostrarMensajeCanvas();
	}

	requestAnimationFrame(animate2); // Continúa la animación si el avión aún no ha tocado el suelo
	render();
}




document.addEventListener('DOMContentLoaded', () => {
	document.getElementById('restartButton').addEventListener('click', function() {
		// Recargar la página
		window.location.reload();
	});
});
let particulasSistema;
let velocidadesParticulas = [];

function crearExplosion(posicion, escala) {
	const particulas = 100000; // Número de partículas
	const geometria = new THREE.BufferGeometry();
	const posiciones = new Float32Array(particulas * 3); // x, y, z para cada partícula
	const material = new THREE.PointsMaterial({ size: 1.2, color: 0xff0000 }); // Ajusta el tamaño para visibilidad
	avion.visible = false;
	velocidadesParticulas = []; // Reinicia el arreglo de velocidades

	for (let i = 0; i < particulas; i++) {
		// Define posición inicial
		posiciones[i * 3 + 1] = avion.position.x;
		posiciones[i * 3 + 1] = avion.position.y;
		posiciones[i * 3 + 2] = avion.position.z;

		// Almacena una velocidad inicial para cada partícula
		velocidadesParticulas.push(new THREE.Vector3(
			(Math.random() - 0.5) * escala,
			(Math.random() - 0.5) * escala,
			(Math.random() - 0.5) * escala
		));
	}

	geometria.setAttribute('position', new THREE.BufferAttribute(posiciones, 3));
	particulasSistema = new THREE.Points(geometria, material);
	scene.add(particulasSistema);
}
function actualizarParticulas() {
	if (!particulasSistema || velocidadesParticulas.length === 0) return;

	const posiciones = particulasSistema.geometry.attributes.position.array;

	for (let i = 0; i < velocidadesParticulas.length; i++) {
		posiciones[i * 3] += velocidadesParticulas[i].x;
		posiciones[i * 3 + 1] += velocidadesParticulas[i].y;
		posiciones[i * 3 + 2] += velocidadesParticulas[i].z;
	}

	particulasSistema.geometry.attributes.position.needsUpdate = true;
}

function animate() {
	requestAnimationFrame(animate);

	actualizarParticulas(); // Actualiza la posición de las partículas

	renderer.render(scene, camera);
}

animate();

init();
initSky();

createSceneFloor();
render();
//}