/*
 * JavaScript Baseline: Simple Pixel Inversion Example
 * Illustrates a common image manipulation task directly in JavaScript.
 * This function processes an ImageData object, inverting its pixel colors.
 */

function invertImagePixelsJS(imageData) {
    const data = imageData.data; // Uint8ClampedArray representing pixel data [R, G, B, A, ...]
    const numPixels = data.length / 4;

    // Iterate through each pixel to invert its RGB values
    for (let i = 0; i < numPixels; i++) {
        const offset = i * 4;
        data[offset] = 255 - data[offset];     // Red
        data[offset + 1] = 255 - data[offset + 1]; // Green
        data[offset + 2] = 255 - data[offset + 2]; // Blue
        // Alpha channel (data[offset + 3]) remains unchanged for inversion
    }
    return imageData; // Return the modified ImageData
}

// How to use it:
// 1. Get image data from a canvas context:
//    const canvas = document.createElement('canvas');
//    const ctx = canvas.getContext('2d');
//    // Ensure image is loaded and drawn onto canvas first
//    ctx.drawImage(imageElement, 0, 0);
//    const originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// 2. Process the image data:
//    const invertedImageData = invertImagePixelsJS(originalImageData);

// 3. Put the modified data back onto the canvas:
//    ctx.putImageData(invertedImageData, 0, 0);

console.log("JavaScript image inversion function defined. Ready for benchmarking.");

/*
 * WebAssembly (Wasm) Example: Grayscale Conversion (Conceptual C/C++ and JS Glue Code)
 * This illustrates how to write a simple image processing function in C/C++ and
 * then interact with it from JavaScript after compilation to Wasm.
 *
 * Part 1: C/C++ Source (e.g., `grayscale.c`)
 * Compile this with Emscripten: `emcc grayscale.c -o grayscale.js -s EXPORTED_FUNCTIONS='["_grayscaleImage"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1`
 * The '-s MODULARIZE=1' is important for clean module loading.
 */

/*
#include <stdint.h>
#include <stdlib.h>

// Function to convert an image buffer to grayscale
// Expects a buffer of RGBA pixels (e.g., from canvas getImageData)
// This function operates directly on the provided memory buffer.
void grayscaleImage(uint8_t* rgbaBuffer, int width, int height) {
    int numPixels = width * height;
    for (int i = 0; i < numPixels; i++) {
        int offset = i * 4; // Each pixel has 4 components: R, G, B, A

        // Calculate grayscale value using a common luminance formula
        uint8_t r = rgbaBuffer[offset];
        uint8_t g = rgbaBuffer[offset + 1];
        uint8_t b = rgbaBuffer[offset + 2];

        uint8_t gray = (uint8_t)(0.299 * r + 0.587 * g + 0.114 * b);

        // Set RGB components to the calculated grayscale value
        rgbaBuffer[offset] = gray;
        rgbaBuffer[offset + 1] = gray;
        rgbaBuffer[offset + 2] = gray;
        // Alpha channel (rgbaBuffer[offset + 3]) remains unchanged
    }
}
*/

/*
 * Part 2: JavaScript Glue Code for Loading and Interacting with Wasm
 * This code loads the compiled Wasm module and passes image data to it.
 */

async function processImageWithWasm(imageData) {
    // Load the Wasm module generated by Emscripten
    const module = await import('./grayscale.js'); // Assuming grayscale.js is in the same directory
    const instance = await module.default(); // Initialize the Emscripten module

    const data = imageData.data; // The Uint8ClampedArray from canvas
    const dataLength = data.length;

    // 1. Allocate memory in Wasm for the image data
    // This ensures Wasm operates on its own memory, avoiding direct JS-Wasm ArrayBuffer sharing if not using SharedArrayBuffer
    const WasmBufferPointer = instance._malloc(dataLength); // Allocate memory in Wasm's linear memory

    // 2. Copy image data from JS to Wasm memory
    // Access Wasm's memory directly via instance.HEAPU8 (Uint8Array view of Wasm memory)
    instance.HEAPU8.set(data, WasmBufferPointer);

    // 3. Call the Wasm function
    // Pass the pointer to the allocated Wasm memory and image dimensions
    instance._grayscaleImage(WasmBufferPointer, imageData.width, imageData.height);

    // 4. Copy processed data back from Wasm memory to JS ImageData
    // Create a new Uint8ClampedArray from the Wasm memory segment
    const processedData = new Uint8ClampedArray(
        instance.HEAPU8.buffer,
        WasmBufferPointer,
        dataLength
    );
    imageData.data.set(processedData); // Overwrite original ImageData.data with processed data

    // 5. Free the allocated Wasm memory
    instance._free(WasmBufferPointer);

    return imageData; // Return the modified ImageData object
}

// Example usage:
// async function runWasmGrayscale() {
//     // Assume 'originalImageData' is available from a canvas, similar to the JS example
//     const processedImageData = await processImageWithWasm(originalImageData);
//     // Then put processedImageData back to canvas
//     ctx.putImageData(processedImageData, 0, 0);
// }
// runWasmGrayscale();

console.log("WebAssembly integration example defined. Requires prior C/C++ compilation via Emscripten.");

/*
 * Benchmarking Utility Example
 * Provides a reusable function to measure the execution time of a given function.
 * This allows direct comparison between JavaScript and WebAssembly implementations.
 */

async function benchmarkFunction(name, func, ...args) {
    const start = performance.now(); // High-resolution timestamp
    console.log(`\n--- Benchmarking '${name}' ---`);
    
    // Execute the function, handling potential asynchronous operations
    let result;
    try {
        result = await func(...args);
    } catch (error) {
        console.error(`Error during '${name}' execution:`, error);
        return {
            name,
            timeMs: NaN,
            error: error.message
        };
    }

    const end = performance.now();
    const timeMs = end - start;

    console.log(`'${name}' completed in: ${timeMs.toFixed(2)} ms`);
    return {
        name,
        timeMs,
        result
    };
}

/*
// Example Usage:

// 1. Prepare dummy ImageData for testing (e.g., 1920x1080 resolution)
const testWidth = 1920;
const testHeight = 1080;
const dummyImageData = new ImageData(testWidth, testHeight);
// Fill with some data, e.g., random pixels or a simple pattern
for (let i = 0; i < dummyImageData.data.length; i++) {
    dummyImageData.data[i] = Math.floor(Math.random() * 256);
}

// 2. Define your JavaScript and Wasm functions (from previous parts)
//    function invertImagePixelsJS(imageData) { ... }
//    async function processImageWithWasm(imageData) { ... }

// 3. Run benchmarks
async function runAllBenchmarks() {
    console.log("Starting performance benchmarks...");

    // Create deep copies of imageData for each benchmark run to ensure isolated tests
    const jsImageDataCopy = new ImageData(new Uint8ClampedArray(dummyImageData.data), testWidth, testHeight);
    const wasmImageDataCopy = new ImageData(new Uint8ClampedArray(dummyImageData.data), testWidth, testHeight);

    const jsResult = await benchmarkFunction('JavaScript Pixel Inversion', invertImagePixelsJS, jsImageDataCopy);
    const wasmResult = await benchmarkFunction('WebAssembly Grayscale', processImageWithWasm, wasmImageDataCopy);

    console.log("\n--- Benchmark Summary ---");
    console.log(`JS Inversion: ${jsResult.timeMs.toFixed(2)} ms`);
    console.log(`Wasm Grayscale: ${wasmResult.timeMs.toFixed(2)} ms`);

    // Further analysis: compare times, determine efficiency ratios
    if (wasmResult.timeMs < jsResult.timeMs) {
        console.log(`Wasm was ${(jsResult.timeMs / wasmResult.timeMs).toFixed(2)}x faster than JS for its respective task.`);
    } else {
        console.log(`JS was ${(wasmResult.timeMs / jsResult.timeMs).toFixed(2)}x faster than Wasm for its respective task.`);
    }
}

runAllBenchmarks();
*/
console.log("Benchmarking utility defined. Use it to compare JS and Wasm image processing functions.");

/*
 * Strategic Integration Example: Orchestrating Wasm in a Web Worker
 * This demonstrates a common pattern for offloading heavy Wasm computations
 * to a separate thread, keeping the main UI thread responsive.
 *
 * Part 1: main.js (Main Thread)
 */

// main.js
const worker = new Worker('imageProcessor.js'); // Create a Web Worker instance

// Function to send image data to the worker and await results
async function processImageOffThread(imageData) {
    return new Promise((resolve, reject) => {
        // Set up a one-time listener for the worker's response
        worker.onmessage = (event) => {
            const processedImageData = event.data; // Worker sends back processed ImageData
            resolve(processedImageData);
        };
        worker.onerror = (error) => {
            reject(error);
        };

        // Transfer the ImageData.data ArrayBuffer to the worker
        // Using Transferable objects (the underlying ArrayBuffer) avoids copying.
        worker.postMessage(imageData, [imageData.data.buffer]);
    });
}

// Example usage from main thread:
// async function runOffThreadProcessing() {
//     // Assume 'originalImageData' is available
//     console.log("Sending image to worker for processing...");
//     const processedData = await processImageOffThread(originalImageData);
//     console.log("Image processed by worker, received back on main thread.");
//     // Update canvas with processedData
//     ctx.putImageData(processedData, 0, 0);
// }
// runOffThreadProcessing();

/*
 * Part 2: imageProcessor.js (Web Worker Thread)
 * This worker script loads the Wasm module and performs the actual processing.
 */

/*
// imageProcessor.js

// Import the Wasm glue code module within the worker
// This assumes 'grayscale.js' and 'grayscale.wasm' are accessible to the worker.
let wasmModuleInstance; // Store the initialized Wasm module

// Asynchronously load and initialize the Wasm module once
const initWasm = async () => {
    if (!wasmModuleInstance) {
        const module = await import('./grayscale.js');
        wasmModuleInstance = await module.default();
    }
    return wasmModuleInstance;
};

// Listen for messages from the main thread
onmessage = async (event) => {
    const originalImageData = event.data; // Received ImageData from main thread
    const data = originalImageData.data;
    const dataLength = data.length;

    const instance = await initWasm(); // Ensure Wasm is loaded and initialized

    // Allocate memory in Wasm for the image data
    const WasmBufferPointer = instance._malloc(dataLength);
    instance.HEAPU8.set(data, WasmBufferPointer); // Copy data to Wasm memory

    // Call the Wasm grayscale function
    instance._grayscaleImage(WasmBufferPointer, originalImageData.width, originalImageData.height);

    // Create a new ImageData object from the Wasm memory for transfer back
    // This will create a new ArrayBuffer that can be transferred.
    const processedDataBuffer = new Uint8ClampedArray(
        instance.HEAPU8.buffer,
        WasmBufferPointer,
        dataLength
    );
    
    // Create new ImageData object to send back
    const processedImageData = new ImageData(processedDataBuffer, originalImageData.width, originalImageData.height);

    instance._free(WasmBufferPointer); // Free Wasm memory

    // Send the processed ImageData back to the main thread
    // Transfer the underlying ArrayBuffer for efficiency.
    postMessage(processedImageData, [processedImageData.data.buffer]);
};
*/

console.log("Web Worker and Wasm integration example defined. Requires separate main.js and imageProcessor.js files.");