document.getElementById('lut-upload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.src = e.target.result;
            img.onload = function() {
                const lutCanvas = document.getElementById('lut-preview');
                const lutContext = lutCanvas.getContext('2d');
                lutCanvas.width = img.width;
                lutCanvas.height = img.height;
                lutContext.drawImage(img, 0, 0);

                const lutData = lutContext.getImageData(0, 0, lutCanvas.width, lutCanvas.height).data;
                const lutWidth = img.width;
                const lutHeight = img.height;
                const lutSize = Math.cbrt(lutWidth * lutHeight);

                const sampleImage = document.getElementById('sample-image');
                sampleImage.onload = function() {
                    applyLUTToSampleImage(lutData, lutWidth, lutHeight, lutSize);
                };

                if (sampleImage.complete) {
                    applyLUTToSampleImage(lutData, lutWidth, lutHeight, lutSize);
                }

                outputLUTAsJSCode(lutData, lutWidth, lutHeight, lutSize);
            };
        };
        reader.readAsDataURL(file);
    }
});

function applyLUTToSampleImage(lutData, lutWidth, lutHeight, lutSize) {
    const sampleImage = document.getElementById('sample-image');
    const outputCanvas = document.getElementById('sample-output');
    const outputContext = outputCanvas.getContext('2d');

    outputCanvas.width = sampleImage.width;
    outputCanvas.height = sampleImage.height;
    outputContext.drawImage(sampleImage, 0, 0);

    const imageData = outputContext.getImageData(0, 0, outputCanvas.width, outputCanvas.height);
    const pixels = imageData.data;

    for (let i = 0; i < pixels.length; i += 4) {
        const r = pixels[i];
        const g = pixels[i + 1];
        const b = pixels[i + 2];

        const lutX = Math.floor(r / 255 * (lutSize - 1));
        const lutY = Math.floor(g / 255 * (lutSize - 1));
        const lutZ = Math.floor(b / 255 * (lutSize - 1));

        const lutIndex = ((lutZ * lutSize + lutY) * lutSize + lutX) * 4;

        pixels[i] = lutData[lutIndex];
        pixels[i + 1] = lutData[lutIndex + 1];
        pixels[i + 2] = lutData[lutIndex + 2];
    }

    outputContext.putImageData(imageData, 0, 0);
}

function outputLUTAsJSCode(lutData, lutWidth, lutHeight, lutSize) {
    const lutCodeElement = document.getElementById('lut-code');
    let lutCode = 'const lut = [\n';

    for (let z = 0; z < lutSize; z++) {
        lutCode += '  [\n';
        for (let y = 0; y < lutSize; y++) {
            lutCode += '    [\n';
            for (let x = 0; x < lutSize; x++) {
                const index = ((z * lutSize + y) * lutSize + x) * 4;
                lutCode += `      { r: ${lutData[index]}, g: ${lutData[index + 1]}, b: ${lutData[index + 2]} },\n`;
            }
            lutCode += '    ],\n';
        }
        lutCode += '  ],\n';
    }

    lutCode += '];\n';
    lutCodeElement.textContent = lutCode;
}