// This is the core JavaScript for the Spectrogram Editor.
// It handles file loading (.spec), visualization, tool interaction, and saving.

// --- Global Variables ---
let currentSpecData = null; // Stores the parsed spectrogram data
let dctSize = 512; // Default DCT size, read from header

// --- File Handling ---
const specFileInput = document.getElementById('specFileInput');
specFileInput.addEventListener('change', handleFileSelect);

async function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) {
        return;
    }

    try {
        const buffer = await file.arrayBuffer();
        const dataView = new DataView(buffer);

        // Parse SPEC header
        const header = {
            magic: String.fromCharCode(...new Uint8Array(buffer.slice(0, 4))),
            version: dataView.getInt32(4, true),
            dct_size: dataView.getInt32(8, true),
            num_frames: dataView.getInt32(12, true)
        };

        if (header.magic !== "SPEC" || header.version !== 1) {
            console.error("Invalid SPEC file format.");
            alert("Invalid SPEC file format. Please load a valid .spec file.");
            return;
        }

        dctSize = header.dct_size;
        const dataStart = 16;
        const numBytes = header.num_frames * header.dct_size * sizeof(float);
        const spectralDataFloat = new Float32Array(buffer, dataStart, header.num_frames * header.dct_size);

        currentSpecData = {
            header: header,
            data: spectralDataFloat
        };

        console.log("Loaded SPEC file:", header);
        drawSpectrogram(currentSpecData);

    } catch (error) {
        console.error("Error loading SPEC file:", error);
        alert("Failed to load SPEC file. Check console for details.");
    }
}

// --- Spectrogram Visualization ---
const canvas = document.getElementById('spectrogramCanvas');
const ctx = canvas.getContext('2d');

function drawSpectrogram(specData) {
    if (!specData || !specData.data) {
        console.warn("No spectrogram data to draw.");
        return;
    }

    const width = canvas.width = window.innerWidth * 0.7; // Example dimensions
    const height = canvas.height = 400; // Example dimensions

    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, width, height);

    const numFrames = specData.header.num_frames;
    const binsPerFrame = specData.data.length / numFrames;

    if (numFrames === 0 || binsPerFrame === 0) {
        console.warn("Spectrogram has no frames or invalid data.");
        return;
    }

    // Simplified visualization: draw a few lines to represent frames
    const frameWidth = width / numFrames;
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 1;
    ctx.beginPath();
    
    // Draw a simplified representation of the first frame
    const frameIndex = 0;
    const frameDataStart = frameIndex * dctSize;
    const maxVal = 1.0; // Assume normalization or known range for now

    for (let i = 0; i < dctSize; ++i) {
        const value = specData.data[frameDataStart + i];
        const x = (i / dctSize) * width;
        const y = height - (Math.abs(value) / maxVal) * height * 0.5; // Simplified scaling

        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    ctx.stroke();
}

// --- Tool Interactions ---
const lineToolButton = document.getElementById('lineTool');
const ellipseToolButton = document.getElementById('ellipseTool');
const noiseToolButton = document.getElementById('noiseTool');

lineToolButton.addEventListener('click', () => console.log('Line tool selected'));
ellipseToolButton.addEventListener('click', () => console.log('Ellipse tool selected'));
noiseToolButton.addEventListener('click', () => console.log('Noise tool selected'));

// TODO: Implement canvas event listeners for drawing shapes
// TODO: Implement shape parameter controls
// TODO: Implement save/load JSON
// TODO: Implement .spec export

// Initial setup for canvas size (can be updated on window resize)
window.addEventListener('resize', () => {
    // Re-draw or re-initialize canvas size if needed
    if (currentSpecData) {
        drawSpectrogram(currentSpecData);
    }
});