document.addEventListener('DOMContentLoaded', function() {
    
    function fmt(v) {
        if (v === undefined || v === null || isNaN(v)) return '–';
        return Number(v).toFixed(0);
    }

    function updatePosition() {
        fetch('/api/position')
        .then(res => res.json())
        .then(data => {
            const p = data.position || {};
            const m = data.motorCounts || {};

            document.getElementById('state-x').textContent = fmt(p.x);
            document.getElementById('state-y').textContent = fmt(p.y);
            document.getElementById('state-z').textContent = fmt(p.z);

            document.getElementById('state-phi').textContent = fmt(p.a*180/Math.PI);
            document.getElementById('state-theta').textContent = fmt(p.b*180/Math.PI);
            document.getElementById('state-psi').textContent = fmt(p.c*180/Math.PI);

            document.getElementById('state-e').textContent = fmt(m.e*180/Math.PI);
            

            
            /* Motor-Zustand */
            document.getElementById('motor-x').textContent = fmt(m.x);
            document.getElementById('motor-y').textContent = fmt(m.y*180/Math.PI);
            document.getElementById('motor-z').textContent = fmt(m.z*180/Math.PI);

            document.getElementById('motor-a').textContent = fmt(m.a*180/Math.PI);
            document.getElementById('motor-b').textContent = fmt(m.b*180/Math.PI);
            document.getElementById('motor-c').textContent = fmt(m.c*180/Math.PI);

            document.getElementById('motor-e').textContent = fmt(m.e);

        })
        .catch(err => console.error('Error fetching position:', err));
    }

    function updateStatus() {
        fetch('/api/status')
            .then(response => response.json())
            .then(data => {
                // WebClients
                const clientsUl = document.getElementById('clients');
                clientsUl.innerHTML = '';
                data.clients.forEach(client => {
                    const li = document.createElement('li');
                    li.textContent = client;
                    clientsUl.appendChild(li);
                });

                // Sender
                const sendersUl = document.getElementById('senderList');
                sendersUl.innerHTML = '';
                data.senders.forEach(sender => {
                    const li = document.createElement('li');
                    li.textContent = `${sender.name}: ${sender.status}`;
                    li.classList.add(sender.status.toLowerCase());
                    sendersUl.appendChild(li);
                });

                // Letzte Commands
                const commandsUl = document.getElementById('commandList');
                commandsUl.innerHTML = '';
                data.lastCommands.forEach(cmd => {
                    const li = document.createElement('li');
                    li.textContent = cmd;
                    commandsUl.appendChild(li);
                });

                // Letzte Pings
                const pingsUl = document.getElementById('pingList');
                pingsUl.innerHTML = '';
                data.lastPings.forEach(ping => {
                    const li = document.createElement('li');
                    li.textContent = ping;
                    pingsUl.appendChild(li);
                });
            })
            .catch(error => console.error('Error fetching status:', error));
    }


    updateStatus();
    updatePosition();

    setInterval(() => {
        updateStatus();
        updatePosition();
    }, 1000);

});

document.querySelectorAll('.section').forEach(sec => {
    const id = sec.dataset.id;
    const saved = localStorage.getItem('section_' + id);
    if (saved === 'collapsed') sec.classList.add('collapsed');

    sec.querySelector('h2').addEventListener('click', () => {
        sec.classList.toggle('collapsed');
        localStorage.setItem(
            'section_' + id,
            sec.classList.contains('collapsed') ? 'collapsed' : 'open'
        );
    });
});

/* Initial-Zustand 
['clients','pings'].forEach(id => {
    if (!localStorage.getItem('section_' + id))
        localStorage.setItem('section_' + id, 'collapsed');
});
*/