let ws = new WebSocket("ws://127.0.0.1:8000/ws");
let videoQueue = {};  // Hier speichern wir alle laufenden Videos

ws.onmessage = function(event) {
    try {
        let message = JSON.parse(event.data);

        // Falls das Video noch nicht existiert, erstelle ein neues Element
        if (!videoQueue[message.id]) {
            videoQueue[message.id] = createVideoElement(message.id, message.source, message.target, message.path);
        }

        // Update der UI
        updateVideoElement(message.id, message);
    } catch (e) {
        console.error("Fehler beim Parsen der WebSocket-Nachricht:", e, event.data);
    }
};

function createVideoElement(id, source, target, path) {
    let container = document.createElement("div");
    container.className = "video";
    container.id = id;

    container.innerHTML = `
        <div class="video-header">${source}&nbsp;&nbsp;&nbsp;&nbsp;➝&nbsp;&nbsp;&nbsp;&nbsp;${target}</div>
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        <div class="video-info">
            <div><span class="path">${path}</span></div>
            <table class="table_video_info">
                <tr>
                    <th><img src="/webs/animation-32.png" class="icons"></th><th class="label"><div title="Anzahl Frames"><span class="frame">0</span> Anz</div></th>
                    <th><img src="/webs/fps-32.png" class="icons"></th><th class="label"><div title="Frames / Sekunde"><span class="fps">0</span> fps</div></th>
                    <th><img src="/webs/q-24.png" class="icons"></th><th class="label"><div title="Quantizer"><span class="q">0 </span> Q</div></th>
                </tr>
                <tr>
                    <th><img src="/webs/ssd-30.png" class="icons"></th><th class="label"><div title="Dateigröße"><span class="size">0 </span> MB</div></th>
                    <th><img src="/webs/bitrate-30.png" class="icons"></th><th class="label"><div title="Bitrate"><span class="bitrate">0 </span> Mb/s</div></th>
                    <th><img src="/webs/speed-32.png" class="icons"></th><th class="label"><div title="Speed"><span class="speed">0</span> x</div></th>
                </tr>
                <tr>
                    <th></th><th></th>
                    <th></th><th></th>
                    <th></th><th><div class="loader"><span class="finished"></span></div></th>
                </tr>
            </table>
        </div>
    `;

    document.getElementById("videos").appendChild(container);
    return container;
}

function updateVideoElement(id, data) {
    let container = document.getElementById(id);
    if (!container) return;

    container.querySelector(".frame").textContent = data.frame || '---';
    container.querySelector(".fps").textContent = data.fps || '---';
    container.querySelector(".q").textContent = data.q || '---';
    container.querySelector(".size").textContent = data.size || '---';
    container.querySelector(".bitrate").textContent = data.bitrate || '---';
    container.querySelector(".speed").textContent = data.speed || '---';

    let progressBar = container.querySelector(".progress-bar");
    let progress = data.loading;  // Annahme: `loading` kommt als Zahl von 0 bis 100
    progressBar.style.width = progress + "%"

    if (data.finished) {
        progressBar.style.background = "#4caf50";
        container.querySelector(".finished").textContent = "Fertig";
    } else {
        progressBar.style.background = "linear-gradient(90deg, #4caf50, #00c853)";
        container.querySelector(".finished").textContent = "Läuft";
    }
}