/**
 * TypeScript Example for Bench3D
 * 
 * This example demonstrates how to use Bench3D with full TypeScript support.
 * 
 * NOTE: This file uses relative imports for development. In a real project,
 * after building and installing the package, you would import like:
 * 
 *   import { Bench3D, Project, Cube } from 'bench3d';
 * 
 * Or use namespace imports:
 * 
 *   import * as Bench3D from 'bench3d';
 */

// Relative imports for development (before package is built/published)
import { Bench3D, Bench3DOptions } from '../src/index';
import { Project, ProjectOptions } from '../src/index';
import { Cube, CubeData } from '../src/index';
import { Mesh, MeshData } from '../src/index';
import { Texture, TextureData } from '../src/index';
import { Animation, AnimationData } from '../src/index';
import { Vector3 } from '../src/index';
import { moveElements, rotateElements, scaleElements } from '../src/index';
import { extrudeFaces, loopCut, bevelEdges } from '../src/index';
import { GLTFExporter, GLTFExportOptions } from '../src/index';
import { GLTFImporter, GLTFImportOptions } from '../src/index';

// Example 1: Basic setup with TypeScript types
function basicExample() {
	const canvas = document.getElementById('my-canvas') as HTMLCanvasElement;
	
	const options: Bench3DOptions = {
		canvas: canvas,
		onUpdate: (event) => {
			console.log('Update event:', event.type, event.data);
		}
	};

	const engine = new Bench3D(options);
	const project = engine.createProject({
		name: 'My Project',
		texture_width: 16,
		texture_height: 16
	} as ProjectOptions);

	return { engine, project };
}

// Example 2: Creating geometry with type safety
function createGeometry(project: Project) {
	// Create a cube with type-safe data
	const cubeData: CubeData = {
		name: 'My Cube',
		size: [16, 16, 16],
		origin: [0, 0, 0],
		rotation: [0, 0, 0],
		from: [-8, 0, -8],
		to: [8, 16, 8],
	};

	const cube: Cube = project.addCube(cubeData);

	// Create a mesh with type-safe data
	const meshData: MeshData = {
		name: 'My Mesh',
		origin: [0, 0, 0],
		rotation: [0, 0, 0],
	};

	const mesh: Mesh = project.addMesh(meshData);

	return { cube, mesh };
}

// Example 3: Transform operations with type safety
function transformExample(project: Project) {
	const elements = project.selected_elements;
	
	if (elements.length > 0) {
		// Move with type-safe Vector3
		const offset: Vector3 = [10, 0, 0];
		moveElements(elements, offset);

		// Rotate with type-safe Vector3
		const rotation: Vector3 = [0, 45, 0];
		rotateElements(elements, rotation, [0, 0, 0]);

		// Scale with type-safe Vector3
		const scale: Vector3 = [1.5, 1.5, 1.5];
		scaleElements(elements, scale, [0, 0, 0]);
	}
}

// Example 4: Mesh operations with type safety
function meshOperationsExample(mesh: Mesh) {
	// Get face keys
	const faceKeys = Object.keys(mesh.faces);

	if (faceKeys.length > 0) {
		// Extrude faces
		const extrudedFaces = extrudeFaces(mesh, faceKeys.slice(0, 1), {
			distance: 2,
			createSideFaces: true
		});

		// Loop cut
		if (faceKeys.length >= 2) {
			const edges = getAllEdges(mesh);
			if (edges.length >= 2) {
				loopCut(mesh, edges[0][0], edges[0][1], 1);
			}
		}

		// Bevel edges
		const edges: Array<[string, string]> = [
			['vertex1', 'vertex2'],
			['vertex2', 'vertex3']
		];
		bevelEdges(mesh, edges, {
			amount: 0.1,
			segments: 1
		});
	}
}

// Example 5: Import/Export with type safety
async function importExportExample(project: Project) {
	// Export to GLTF
	const exporter = new GLTFExporter();
	const exportOptions: GLTFExportOptions = {
		scale: 1,
		binary: false,
		embed_textures: true,
		export_animations: true
	};

	const gltfData = exporter.export(project, exportOptions);
	console.log('Exported GLTF:', gltfData);

	// Import from GLTF
	const importer = new GLTFImporter();
	const importOptions: GLTFImportOptions = {
		scale: 1,
		importAnimations: true,
		importTextures: true
	};

	// Assuming we have GLTF data
	const gltfJson = {}; // Your GLTF data here
	await importer.import(gltfJson, project, importOptions);
}

// Example 6: Animation with type safety
function animationExample(project: Project) {
	const animationData: AnimationData = {
		name: 'My Animation',
		length: 5.0,
		loop: 'loop',
		animators: {}
	};

	const animation: Animation = new Animation(animationData);
	project.animations.push(animation);

	// Access animation properties with type safety
	console.log('Animation name:', animation.name);
	console.log('Animation length:', animation.length);
	console.log('Animation loop:', animation.loop);
}

// Example 7: Texture management with type safety
function textureExample(project: Project) {
	const textureData: TextureData = {
		name: 'My Texture',
		source: 'data:image/png;base64,...',
		width: 64,
		height: 64,
		uv_width: 16,
		uv_height: 16
	};

	const texture: Texture = project.addTexture(textureData);
	project.selectTexture(texture);

	// Access texture properties with type safety
	console.log('Texture name:', texture.name);
	console.log('Texture size:', texture.width, 'x', texture.height);
}

// Helper function
function getAllEdges(mesh: Mesh): Array<[string, string]> {
	const edges: Array<[string, string]> = [];
	const edgeSet = new Set<string>();

	for (const faceKey in mesh.faces) {
		const face = mesh.faces[faceKey];
		if (!face) continue;
		const verts = face.vertices;
		for (let i = 0; i < verts.length; i++) {
			const next = verts[(i + 1) % verts.length];
			const edgeKey = verts[i] < next ? `${verts[i]}-${next}` : `${next}-${verts[i]}`;
			if (!edgeSet.has(edgeKey)) {
				edgeSet.add(edgeKey);
				edges.push([verts[i], next]);
			}
		}
	}

	return edges;
}

// Example 8: Using with React (TypeScript)
/*
import { useBench3D, useProject } from 'bench3d-react';
import { Bench3D } from 'bench3d';
import { Project } from 'bench3d/core';

function MyComponent() {
  const { engine, project, isReady } = useBench3D();
  const { selectedElements, addCube } = useProject(project);

  useEffect(() => {
    if (isReady && project) {
      const cube = addCube({ size: [16, 16, 16] });
      console.log('Created cube:', cube);
    }
  }, [isReady, project]);

  return <div>Selected: {selectedElements.length}</div>;
}
*/

// Example 9: Using with Vue (TypeScript)
/*
import { useBench3D, useProject } from 'bench3d-vue';
import { Ref } from 'vue';
import { Bench3D } from 'bench3d';
import { Project } from 'bench3d/core';

export default {
  setup() {
    const { engine, project, isReady } = useBench3D();
    const { selectedElements, addCube } = useProject(project as Ref<Project | null>);

    onMounted(() => {
      if (isReady.value && project.value) {
        const cube = addCube({ size: [16, 16, 16] });
        console.log('Created cube:', cube);
      }
    });

    return { selectedElements };
  }
};
*/