function addRow() {
    const tableBody = document.getElementById('tableBody');
    const rowCount = tableBody.querySelectorAll('tr').length;
    
    const newRow = document.createElement('tr');
    newRow.setAttribute('data-row', rowCount);
    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 bezeichnung = row.querySelector("input[data-field='bezeichnung']").value;
        const adresse = row.querySelector("input[data-field='adresse']").value;
        const type = row.querySelector("input[data-field='type']").value;
        const faktor = row.querySelector("input[data-field='faktor']").value;
        const mqtt = row.querySelector("input[data-field='mqtt']").checked;
        const influxdb = row.querySelector("input[data-field='influxdb']").checked;
        
        rows.push({
            bezeichnung,
            adresse,
            type,
            faktor,
            mqtt,
            influxdb
        });
    });
    
    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!';
    }
}