const gltfFileUrl = 'https://webgpulab.xbdev.net/var/resources/gltf/Bee/Bee.glb';
const gltfPath = 'https://webgpulab.xbdev.net/var/resources/gltf/';


class glTFLoader {
    async load(url, gltfPath) {
        try {
            const response = await fetch(url);
            const arrayBuffer = await response.arrayBuffer();

            let gltf;
            if (this.isBinaryGLTF(arrayBuffer)) {
                gltf = this.parseGLB(arrayBuffer);  // Parse GLB as a binary format
                gltf.gltfPath = gltfPath || ''; // No external path needed for `.glb`
            } else {
                const textDecoder = new TextDecoder();
                const jsonString = textDecoder.decode(arrayBuffer);
                gltf = JSON.parse(jsonString);
                gltf.gltfPath = gltfPath || this.getBasePath(url); // Infer base path for `.gltf`
            }

            const parsedData = await this.parseGLTF(gltf); // Parse the content (same for both)
            return parsedData;
        } catch (error) {
            console.error('Error loading GLTF/GLB file:', error);
            throw error;
        }
    }

    isBinaryGLTF(arrayBuffer) {
        const magic = new TextDecoder().decode(arrayBuffer.slice(0, 4));
        return magic === 'glTF';
    }

    parseGLB(arrayBuffer) {
          console.log('parseGLB');
        const dataView = new DataView(arrayBuffer);

        // Header: Magic (4 bytes) + Version (4 bytes) + Length (4 bytes)
        const magic = dataView.getUint32(0, true);
        const version = dataView.getUint32(4, true);
        const length = dataView.getUint32(8, true);

        if (magic !== 0x46546C67) { // "glTF" in ASCII
            throw new Error('Invalid GLB file magic.');
        }
        if (version !== 2) {
            throw new Error('Unsupported GLB version.');
        }

        let offset = 12;
        let jsonChunk, binChunk;

        // Iterate through the chunks in the GLB file
        while (offset < length) {
            const chunkLength = dataView.getUint32(offset, true);
            const chunkType = dataView.getUint32(offset + 4, true);
            const chunkData = arrayBuffer.slice(offset + 8, offset + 8 + chunkLength);

            if (chunkType === 0x4E4F534A) { // "JSON" in ASCII
                const textDecoder = new TextDecoder();
                jsonChunk = JSON.parse(textDecoder.decode(chunkData));
            } else if (chunkType === 0x004E4942) { // "BIN" in ASCII
                binChunk = chunkData;
            }

            offset += 8 + chunkLength;
        }

        if (!jsonChunk) {
            throw new Error('Missing JSON chunk in GLB file.');
        }

        if (binChunk) {
            jsonChunk.buffers[0].binary = binChunk; // Attach binary data directly to buffers
        }

        return jsonChunk;  // Return parsed JSON, now with binary buffers attached
    }

    async parseGLTF(gltf) {
          console.log('parseGLTF');
      
        const parsedData = {
            buffers: await this.loadBuffers(gltf),
            bufferViews: gltf.bufferViews,
            accessors: gltf.accessors,
            meshes: gltf.meshes,
            nodes: gltf.nodes,
            materials: gltf.materials,
            textures: gltf.textures,
            images: gltf.images,
            animations: gltf.animations,
        };

          console.log('gltf.meshes:', gltf.meshes );
      
        this.extractMeshData(parsedData);
        this.extractAnimations(parsedData);
        this.extractTextures(parsedData);

        return parsedData;
    }

    async loadBuffers(gltf) {
        const bufferPromises = gltf.buffers.map((buffer, index) => {
            if (buffer.binary) {
                // Directly use binary data for GLB
                return Promise.resolve(buffer.binary);
            } else if (buffer.uri) {
                console.log('loading bin:', gltf.gltfPath + buffer.uri);
                return fetch(gltf.gltfPath + buffer.uri).then(res => res.arrayBuffer());
            } else {
                throw new Error(`Buffer ${index} is missing both "binary" and "uri".`);
            }
        });
        return await Promise.all(bufferPromises);
    }

    extractMeshData(parsedData) {
        parsedData.meshes.forEach(mesh => {

            mesh.primitives.forEach(primitive => {
                const positionAccessorIndex = primitive.attributes.POSITION;
                const positionAccessor = parsedData.accessors[positionAccessorIndex];
              
              
              
              const positionBufferView = parsedData.bufferViews[positionAccessor.bufferView];
              
              console.log('here');
              
              const positionBuffer = parsedData.buffers[positionBufferView.buffer];

              console.log('here2');
              
              console.log('positionBufferView.byteOffset:', positionBufferView.byteOffset );
              console.log('positionAccessor.byteOffset:', positionAccessor.byteOffset );
              console.log('positionAccessor.count:', positionAccessor.count );
              console.log('positionAccessor.type:', positionAccessor.type );
              console.log('positionBuffer:', positionBuffer );
              
              const positions = new Float32Array(
                    positionBuffer,
                    positionBufferView.byteOffset + (positionAccessor.byteOffset || 0),
                    positionAccessor.count * (positionAccessor.type === 'VEC3' ? 3 : 1)
              );
              
              console.log('here3');
              
                primitive.positions = positions;

                if (primitive.indices !== undefined) {
                    const indexAccessor = parsedData.accessors[primitive.indices];
                    const indexBufferView = parsedData.bufferViews[indexAccessor.bufferView];
                    const indexBuffer = parsedData.buffers[indexBufferView.buffer];

                    const indices = new Uint16Array(
                        indexBuffer,
                        indexBufferView.byteOffset + (indexAccessor.byteOffset || 0),
                        indexAccessor.count
                    );
                    primitive.indices = indices;
                }

                if (primitive.attributes.NORMAL !== undefined) {
                    const normalAccessorIndex = primitive.attributes.NORMAL;
                    const normalAccessor = parsedData.accessors[normalAccessorIndex];
                    const normalBufferView = parsedData.bufferViews[normalAccessor.bufferView];
                    const normalBuffer = parsedData.buffers[normalBufferView.buffer];

                    const normals = new Float32Array(
                        normalBuffer,
                        normalBufferView.byteOffset + (normalAccessor.byteOffset || 0),
                        normalAccessor.count * (normalAccessor.type === 'VEC3' ? 3 : 1)
                    );
                    primitive.normals = normals;
                }

                if (primitive.attributes.TEXCOORD_0 !== undefined) {
                    const texCoordAccessorIndex = primitive.attributes.TEXCOORD_0;
                    const texCoordAccessor = parsedData.accessors[texCoordAccessorIndex];
                    const texCoordBufferView = parsedData.bufferViews[texCoordAccessor.bufferView];
                    const texCoordBuffer = parsedData.buffers[texCoordBufferView.buffer];

                    const texCoords = new Float32Array(
                        texCoordBuffer,
                        texCoordBufferView.byteOffset + (texCoordAccessor.byteOffset || 0),
                        texCoordAccessor.count * (texCoordAccessor.type === 'VEC2' ? 2 : 1)
                    );
                    primitive.texCoords = texCoords;
                }
            });
        });
    }

    extractAnimations(parsedData) {
        if (parsedData.animations) {
            parsedData.animations.forEach(animation => {
                animation.samplers.forEach(sampler => {
                    const inputAccessor = parsedData.accessors[sampler.input];
                    const inputBufferView = parsedData.bufferViews[inputAccessor.bufferView];
                    const inputBuffer = parsedData.buffers[inputBufferView.buffer];

                    sampler.inputData = new Float32Array(
                        inputBuffer,
                        inputBufferView.byteOffset + (inputAccessor.byteOffset || 0),
                        inputAccessor.count
                    );

                    const outputAccessor = parsedData.accessors[sampler.output];
                    const outputBufferView = parsedData.bufferViews[outputAccessor.bufferView];
                    const outputBuffer = parsedData.buffers[outputBufferView.buffer];

                    sampler.outputData = new Float32Array(
                        outputBuffer,
                        outputBufferView.byteOffset + (outputAccessor.byteOffset || 0),
                        outputAccessor.count * (outputAccessor.type === 'VEC3' ? 3 : 1)
                    );
                });
            });
        }
    }

    extractTextures(parsedData) {
        if (parsedData.textures) {
            parsedData.textures.forEach(texture => {
                if (texture.source !== undefined) {
                    const image = parsedData.images[texture.source];
                    texture.imageUri = image.uri;
                }
            });
        }
    }
}

// Function to display statistics
function displayStats(parsedData) {
    
    const stats = {
        numberOfMeshes: parsedData.meshes ? parsedData.meshes.length : 0,
        numberOfNodes: parsedData.nodes ? parsedData.nodes.length : 0,
        numberOfMaterials: parsedData.materials ? parsedData.materials.length : 0,
        numberOfTextures: parsedData.textures ? parsedData.textures.length : 0,
        numberOfAnimations: parsedData.animations ? parsedData.animations.length : 0,
    };

    let details = `
        Number of Meshes: ${stats.numberOfMeshes}<br>
        Number of Nodes: ${stats.numberOfNodes}<br>
        Number of Materials: ${stats.numberOfMaterials}<br>
        Number of Textures: ${stats.numberOfTextures}<br>
        Number of Animations: ${stats.numberOfAnimations}<br>
        <h2>Mesh Details:</h2>
    `;

    parsedData.meshes.forEach((mesh, meshIndex) => {
        details += `Mesh ${meshIndex} - Name: ${mesh.name || 'Unnamed'}<br>`;
        mesh.primitives.forEach((primitive, primitiveIndex) => {
            const verticesCount = primitive.positions ? primitive.positions.length / 3 : 0;
            const indicesCount = primitive.indices ? primitive.indices.length : 0;
            details += `
                ${' '.repeat(8)}Primitive ${primitiveIndex}:<br>
                ${' '.repeat(16)}Number of Vertices: ${verticesCount}<br>
                ${' '.repeat(16)}Number of Indices: ${indicesCount}<br>
            `;
        });
    });
  
    const statsDiv = document.createElement('div');
    document.body.appendChild( statsDiv );
      statsDiv.innerHTML = details;
}

let div = document.createElement('div');
document.body.appendChild( div );
div.innerHTML = `
Vanilla glTF loader/parser in native JavaScript<br><br>

File: ${gltfFileUrl}<br><br>
`;

const loader = new glTFLoader();


try {
    const parsedData = await loader.load(gltfFileUrl, gltfPath);
  
    displayStats(parsedData);

} catch (error) {
    console.error('An error occurred:', error);
}