// Sortiere die Tabelle nach Adresse (addr) beim Laden der Seite
document.addEventListener('DOMContentLoaded', function() {
    // Darkmode-Status aus localStorage übernehmen
    if (localStorage.getItem('darkmode') === 'true') {
        document.body.classList.add('darkmode');
    } else {
        document.body.classList.remove('darkmode');
    }
    const tableBody = document.getElementById('tableBody');
    if (tableBody) {
        // Extrahiere alle Zeilen und deren addr
        const rows = Array.from(tableBody.querySelectorAll('tr'));
        rows.sort((a, b) => {
            const addrA = parseInt(a.querySelector("input[data-field='addr']")?.value || '0', 10);
            const addrB = parseInt(b.querySelector("input[data-field='addr']")?.value || '0', 10);
            return addrA - addrB;
        });
        // Füge sortierte Zeilen wieder ein
        rows.forEach(row => tableBody.appendChild(row));
    }
});
function addRow() {
    const tableBody = document.getElementById('tableBody');
    const rowCount = tableBody.querySelectorAll('tr').length;
    
    const newRow = document.createElement('tr');
    newRow.setAttribute('data-row', rowCount);
    if (typeof tableId !== 'undefined' && tableId === 'modbus_coils') {
        newRow.innerHTML = `
            <td><input type='text' class='text-input' data-field='bezeichnung' value='' /></td>
            <td><input type='number' class='text-input' data-field='adresse' value='' /></td>
            <td>
                <label class='switch'>
                    <input type='checkbox' class='bool-input' data-field='write' />
                    <span class='slider'></span>
                </label>
            </td>
            <td>
                <label class='switch'>
                    <input type='checkbox' class='bool-input' data-field='mqtt' />
                    <span class='slider'></span>
                </label>
            </td>
            <td>
                <label class='switch'>
                    <input type='checkbox' class='bool-input' data-field='influxdb' />
                    <span class='slider'></span>
                </label>
            </td>
            <td><input type='text' class='text-input' data-field='comment' value='' /></td>
            <td>
                <button class="delete-btn" onclick="deleteRow(this)">🗑️</button>
            </td>
        `;
    } else {
        newRow.innerHTML = `
            <td><input type='text' class='text-input' data-field='bezeichnung' value='' /></td>
            <td><input type='text' class='text-input' data-field='adresse' value='' /></td>
            <td><input type='text' class='text-input' data-field='type' value='' /></td>
            <td><input type='text' class='text-input' data-field='faktor' value='1.0' /></td>
            <td>
                <label class='switch'>
                    <input type='checkbox' class='bool-input' data-field='mqtt' />
                    <span class='slider'></span>
                </label>
            </td>
            <td>
                <label class='switch'>
                    <input type='checkbox' class='bool-input' data-field='influxdb' />
                    <span class='slider'></span>
                </label>
            </td>
            <td>
                <button class="delete-btn" onclick="deleteRow(this)">🗑️</button>
            </td>
        `;
    }
    
    tableBody.appendChild(newRow);
}


function deleteRow(button) {
    const row = button.closest('tr');
    if (confirm('Möchten Sie diese Zeile wirklich löschen?')) {
        row.remove();
        updateRowIndices();
    }
}

function updateRowIndices() {
    const rows = document.querySelectorAll('#tableBody tr');
    rows.forEach((row, index) => {
        row.setAttribute('data-row', index);
    });
}

async function saveTable() {
    const rows = [];
    const tableRows = document.querySelectorAll('#tableBody tr');
    tableRows.forEach((row) => {
        const key = row.querySelector("input[data-field='bezeichnung']")?.value.trim() || row.querySelector("input[data-field='key']")?.value.trim();
        if (!key) return; // leere Zeilen überspringen
        const addr = parseInt(row.querySelector("input[data-field='addr']")?.value || row.querySelector("input[data-field='adresse']")?.value || '0', 10);
        const mqtt = row.querySelector("input[data-field='mqtt']")?.checked || false;
        const influxdb = row.querySelector("input[data-field='influxdb']")?.checked || false;
        let value = {};
        if (typeof tableId !== 'undefined' && tableId === 'modbus_coils') {
            const write = row.querySelector("input[data-field='write']")?.checked || false;
            const comment = row.querySelector("input[data-field='comment']")?.value || null;
            value = {
                addr: addr,
                write: write,
                mqtt: mqtt,
                influxdb: influxdb,
                comment: comment
            };
        } else {
            const rtype = row.querySelector("input[data-field='type']")?.value || null;
            const factor = parseFloat(row.querySelector("input[data-field='factor']")?.value || row.querySelector("input[data-field='faktor']")?.value || '1.0');
            const comment = row.querySelector("input[data-field='comment']")?.value || null;
            value = {
                addr: addr,
                rtype: rtype,
                factor: factor,
                mqtt: mqtt,
                influxdb: influxdb,
                comment: comment
            };
        }
        const obj = {};
        obj[key] = value;
        rows.push(obj);
    });
    
    try {
        const response = await fetch('/api/save', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ 
                table_id: tableId,
                rows: rows 
            })
        });
        
        const messageDiv = document.getElementById('message');
        if (response.ok) {
            messageDiv.className = 'message success';
            messageDiv.textContent = '✓ Erfolgreich gespeichert!';
        } else {
            messageDiv.className = 'message error';
            messageDiv.textContent = '✗ Fehler beim Speichern!';
        }
        
        setTimeout(() => {
            messageDiv.style.display = 'none';
        }, 3000);
    } catch (error) {
        const messageDiv = document.getElementById('message');
        messageDiv.className = 'message error';
        messageDiv.textContent = '✗ Verbindungsfehler!';
    }
}