/**
 * @returns {Promise<{server_ip: string, server_port: number}>}
 */
async function getServerConfig() {
    const response = await fetch('/api/ip');
    return await response.json();
}

async function getMediaStat() {
    const response = await fetch('/api/stats');
    return await response.json();
}

getServerConfig()
    .then(data => {
        const websocketIp = data.server_ip;
        const websocketPort = data.server_port;
        const ws = new WebSocket(`ws://${websocketIp}:${websocketPort}`);

        ws.onopen = function() {
            console.log("WebSocket ist geöffnet");
            ws.send(JSON.stringify({"data_message": "Server Adresse: " + websocketIp + ":" + websocketPort}));
        };

        ws.onmessage = function(messageEvent) {
            console.log(messageEvent.data);
        };

        ws.onclose = function() {
            console.log("WebSocket wurde geschlossen");
        };

        ws.onerror = function(errorEvent) {
            console.error("WebSocket-Fehler: ", errorEvent);
        };
    })
    .catch(error => {
        console.error('Error fetching settings:', error);
    });

getMediaStat()
    .then(data => {
        console.log("Antwort von /api/stats:", data); // Debug-Ausgabe

        if (!data || typeof data !== 'object' || !data.videos || typeof data.videos !== 'object') {
            throw new Error("Ungültiges Antwortformat oder fehlende 'videos'-Eigenschaft");
        }

        const stat_Container = document.getElementById('stat');

        Object.keys(data.videos).forEach(key => {
            const video = data.videos[key];
            const card = document.createElement('div');
            card.className = 'video-card';
            card.id = key

            card.innerHTML = `
                <h3 title="${video.source_file}">${video.source_file_name}</h3>
                <div class="actions">
                    <button>Löschen</button>
                </div>
                <div class="tooltip">
                    Quelle: ${video.source_file}<br>
                    Dauer: ${video.source_duration}<br>
                    Größe: ${video.source_size}<br>
                    FPS: ${video.source_frame_rate}<br>
                    Frames: ${video.source_frames_total}<br>
                    Start: ${video.process_start}<br>
                    Ende: ${video.process_end}<br>
                    Status: ${video.status}<br>
                    Zeit: ${video.process_time}<br>
                    Größe (Ziel): ${video.target_size}<br>
                    FPS (aktuell): ${video.stat_fps}<br>
                    Bitrate: ${video.stat_bitrate}<br>
                    Speed: ${video.stat_speed}
                </div>
            `;

            stat_Container.appendChild(card)
        });
    })
    .catch(error => {
        console.error('Fehler beim Abrufen der Medienstatistik:', error);
    });