console.log("LCARS SYSTEM ONLINE");

// Helper for screen logging (Debug mode disabled)
function logToScreen(msg) {
    // console.log(msg); 
}

console.log("System Initialized");

// Check if Socket.IO library is loaded
if (typeof io === 'undefined') {
    console.error("ERROR: Socket.IO library NOT loaded (io is undefined).");
} else {
    initSocket();
}

function initSocket() {
    // Connect to ioBroker
    const socket = io('http://10.0.1.122:8084');
    window.lcarsSocket = socket; // Expose for click handlers

    // Variables to monitor
    const sensors = [
        'alias.0.Hintergasse.Energie.ELECTRIC_POWER',
        'alias.0.Hintergasse.Energie.CONSUMPTION',
        'javascript.0.Variablen.Tagesverbrauch_Gas',
        'javascript.0.Variablen.Tagesverbrauch_H2O',
        'javascript.0.Wetterstation.Aussentemperatur',
        'javascript.0.Wetterstation.Aussenfeuchtigkeit',
        'javascript.0.Wetterstation.Innentemperatur',
        'javascript.0.Wetterstation.Innenfeuchtigkeit',
        'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET',
        'alias.0.Wohnzimmer.Terrassentür.SET',
        'alias.0.Wohnzimmer.Fenster.SET',
        'alias.0.Wohnzimmer.Lader.SET',
        'alias.0.Wohnzimmer.TV.SET',
        'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.ELECTRIC_POWER',
        'alias.0.Wohnzimmer.Terrassentür.ELECTRIC_POWER',
        'alias.0.Wohnzimmer.Fenster.ELECTRIC_POWER',
        'alias.0.Wohnzimmer.Lader.ELECTRIC_POWER',
        'alias.0.Wohnzimmer.TV.Power',
        'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET',
        'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET',
        'alias.0.Wohnzimmer.Markise.SET'
    ];

    socket.on('connect', () => {
        console.log('Connected to 10.0.1.122');
        const statusEl = document.querySelector('.lcars-status');
        if (statusEl) {
            statusEl.innerText = "LINK ESTABLISHED";
            statusEl.style.color = "var(--lcars-orange)";
        }

        // Subscription Loop
        sensors.forEach(varName => {
            socket.emit('subscribe', varName);
            socket.emit('subscribeStates', varName);

            // Initial Fetch
            socket.emit('getStates', varName, (err, states) => {
                if (err) {
                    console.error(`GetStates Error for ${varName}: ${err}`);
                } else {
                    if (states && states[varName]) {
                        updateSensor(varName, states[varName]);
                    }
                }
            });
        });
    });

    socket.on('disconnect', () => {
        console.log('Disconnected');
        const statusEl = document.querySelector('.lcars-status');
        if (statusEl) {
            statusEl.innerText = "LINK OFFLINE";
            statusEl.style.color = "var(--lcars-red)";
        }
    });

    socket.on('stateChange', (id, state) => {
        updateSensor(id, state);
    });
}

// Generic update function
function updateSensor(id, state) {
    if (!state) return;
    const value = state.val;

    // Power (Watt)
    if (id === 'alias.0.Hintergasse.Energie.ELECTRIC_POWER') {
        const el = document.getElementById('val-power');
        const block = document.getElementById('sensor-power');

        if (el) {
            el.innerText = value + " W";
        }
        if (block) {
            block.style.backgroundColor = 'var(--lcars-red)';
            block.style.color = 'black';
        }
    }

    // Consumption (kWh)
    if (id === 'alias.0.Hintergasse.Energie.CONSUMPTION') {
        const el = document.getElementById('val-consumption');
        const block = document.getElementById('sensor-consumption');

        if (el) {
            // Convert to kWh (divide by 1000) and round to 1 decimal
            const formattedValue = (value / 1000).toFixed(1);
            el.innerText = formattedValue + " kWh";
        }
        if (block) {
            const kwh = value / 1000;
            if (kwh < 5) {
                block.style.backgroundColor = 'var(--lcars-green)';
            } else {
                block.style.backgroundColor = 'var(--lcars-red)';
            }
            block.style.color = 'black';
        }
    }

    // Gas Monitoring
    if (id === 'javascript.0.Variablen.Tagesverbrauch_Gas') {
        const el = document.getElementById('val-gas');
        const block = document.getElementById('sensor-gas');

        if (el) {
            // Assuming m³ for gas
            el.innerText = value + " m³";
        }
        if (block) {
            block.style.backgroundColor = 'var(--lcars-yellow)';
            block.style.color = 'black';
        }
    }

    // Water Monitoring
    if (id === 'javascript.0.Variablen.Tagesverbrauch_H2O') {
        const el = document.getElementById('val-water');
        const block = document.getElementById('sensor-water');

        if (el) {
            // Assuming m³ for water
            el.innerText = value + " m³";
        }
        if (block) {
            block.style.backgroundColor = 'var(--lcars-blue)';
            block.style.color = 'black';
        }
    }

    // Temperature (Outer)
    if (id === 'javascript.0.Wetterstation.Aussentemperatur') {
        const el = document.getElementById('val-temp');
        if (el) el.innerText = value + " °C";
    }

    // Humidity (Outer)
    if (id === 'javascript.0.Wetterstation.Aussenfeuchtigkeit') {
        const el = document.getElementById('val-humidity');
        if (el) el.innerText = value + " %";
    }

    // Temperature (Inner)
    if (id === 'javascript.0.Wetterstation.Innentemperatur') {
        const el = document.getElementById('val-inner-temp');
        if (el) el.innerText = value + " °C";
    }

    // Humidity (Inner)
    if (id === 'javascript.0.Wetterstation.Innenfeuchtigkeit') {
        const el = document.getElementById('val-inner-humidity');
        if (el) el.innerText = value + " %";
    }

    // Update global state for toggle buttons
    if (id === 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET') {
        window.treeState = value;
        // Visual feedback on button
        const btn = document.getElementById('btn-tree');
        if (btn) {
            if (value) {
                btn.classList.remove('lcars-orange', 'lcars-red');
                btn.classList.add('lcars-green'); // Active
                btn.style.backgroundColor = 'var(--lcars-green)';
            } else {
                btn.classList.remove('lcars-green', 'lcars-orange');
                btn.classList.add('lcars-red'); // Inactive
                btn.style.backgroundColor = 'var(--lcars-red)';
            }
        }
    }

    // Terrace Door Toggle State
    if (id === 'alias.0.Wohnzimmer.Terrassentür.SET') {
        window.terraceState = value;
        const btn = document.getElementById('btn-terrace');
        if (btn) {
            if (value) {
                btn.classList.remove('lcars-blue', 'lcars-red');
                btn.classList.add('lcars-green');
                btn.style.backgroundColor = 'var(--lcars-green)';
            } else {
                btn.classList.remove('lcars-green', 'lcars-blue');
                btn.classList.add('lcars-red');
                btn.style.backgroundColor = 'var(--lcars-red)';
            }
        }
    }

    // Window Toggle State
    if (id === 'alias.0.Wohnzimmer.Fenster.SET') {
        window.windowState = value;
        const btn = document.getElementById('btn-window');
        if (btn) {
            if (value) {
                btn.classList.remove('lcars-red', 'lcars-blue', 'lcars-orange');
                btn.classList.add('lcars-green');
                btn.style.backgroundColor = 'var(--lcars-green)';
            } else {
                btn.classList.remove('lcars-green', 'lcars-blue', 'lcars-orange');
                btn.classList.add('lcars-red');
                btn.style.backgroundColor = 'var(--lcars-red)';
            }
        }
    }

    // Charger Toggle State
    if (id === 'alias.0.Wohnzimmer.Lader.SET') {
        window.chargerState = value;
        const btn = document.getElementById('btn-charger');
        if (btn) {
            if (value) {
                btn.classList.remove('lcars-pale-orange', 'lcars-red', 'lcars-green'); // Clean up initial classes
                btn.classList.add('lcars-green');
                btn.style.backgroundColor = 'var(--lcars-green)';
            } else {
                btn.classList.remove('lcars-green', 'lcars-pale-orange');
                btn.classList.add('lcars-red');
                btn.style.backgroundColor = 'var(--lcars-red)';
            }
        }
    }

    // TV Toggle State
    if (id === 'alias.0.Wohnzimmer.TV.SET') {
        window.tvState = value;
        const btn = document.getElementById('btn-tv');
        if (btn) {
            if (value) {
                btn.classList.remove('lcars-purple', 'lcars-red', 'lcars-green');
                btn.classList.add('lcars-green');
                btn.style.backgroundColor = 'var(--lcars-green)';
            } else {
                btn.classList.remove('lcars-green', 'lcars-purple');
                btn.classList.add('lcars-red');
                btn.style.backgroundColor = 'var(--lcars-red)';
            }
        }
    }

    // Power Updates for Mode Buttons
    if (id === 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.ELECTRIC_POWER') {
        const el = document.getElementById('val-tree-power');
        if (el) el.innerText = value + " W";
    }
    if (id === 'alias.0.Wohnzimmer.Terrassentür.ELECTRIC_POWER') {
        const el = document.getElementById('val-terrace-power');
        if (el) el.innerText = value + " W";
    }
    if (id === 'alias.0.Wohnzimmer.Fenster.ELECTRIC_POWER') {
        const el = document.getElementById('val-window-power');
        if (el) el.innerText = value + " W";
    }
    if (id === 'alias.0.Wohnzimmer.Lader.ELECTRIC_POWER') {
        const el = document.getElementById('val-charger-power');
        if (el) el.innerText = value + " W";
    }
    if (id === 'alias.0.Wohnzimmer.TV.Power') {
        const el = document.getElementById('val-tv-power');
        if (el) el.innerText = value + " W";
    }

    // Rollo Update
    if (id === 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET') {
        const slider = document.getElementById('range-rollo');
        const display = document.getElementById('val-rollo');
        if (slider) {
            // Apply only if not currently being dragged (simple check: document.activeElement)
            if (document.activeElement !== slider) {
                slider.value = value;
            }
        }
        if (display) {
            display.innerText = value + "%";
        }
    }

    // Rollo Terrassentuer Update
    if (id === 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET') {
        const slider = document.getElementById('range-rollo-2');
        const display = document.getElementById('val-rollo-2');
        if (slider) {
            if (document.activeElement !== slider) {
                slider.value = value;
            }
        }
        if (display) {
            display.innerText = value + "%";
        }
    }

    // Markise Update
    if (id === 'alias.0.Wohnzimmer.Markise.SET') {
        const slider = document.getElementById('range-rollo-3');
        const display = document.getElementById('val-rollo-3');
        if (slider) {
            if (document.activeElement !== slider) {
                slider.value = value;
            }
        }
        if (display) {
            display.innerText = value + "%";
        }
    }
}

// Button interactions
document.addEventListener('click', (e) => {
    // Tree Toggle
    if (e.target.id === 'btn-tree') {
        // Toggle state
        const newState = window.treeState ? 0 : 1;

        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET', { val: newState, ack: false });
        }
    }

    // Terrace Door Toggle
    if (e.target.id === 'btn-terrace') {
        // Toggle state
        const newState = window.terraceState ? 0 : 1;
        console.log(`Toggling Terrace to: ${newState}`);

        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Terrassentür.SET', { val: newState, ack: false });
        }
    }

    // Window Toggle
    if (e.target.id === 'btn-window') {
        // Toggle state
        const newState = window.windowState ? 0 : 1;
        console.log(`Toggling Window to: ${newState}`);

        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Fenster.SET', { val: newState, ack: false });
        }
    }

    // Charger Toggle
    if (e.target.id === 'btn-charger') {
        // Toggle state
        const newState = window.chargerState ? 0 : 1;
        console.log(`Toggling Charger to: ${newState}`);

        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Lader.SET', { val: newState, ack: false });
        }
    }

    // TV Toggle
    if (e.target.id === 'btn-tv') {
        // Toggle state
        const newState = window.tvState ? 0 : 1;
        console.log(`Toggling TV to: ${newState}`);

        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.TV.SET', { val: newState, ack: false });
        }
    }

    // --- Rollo 1 (Fenster) Control ---
    if (e.target.id === 'btn-rollo-down') {
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: 0, ack: false });
    }
    if (e.target.id === 'btn-rollo-up') {
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: 100, ack: false });
    }
    if (e.target.id === 'btn-rollo-stop') {
        console.log("Stopping Rollo Wohnzimmer");
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.STOP', { val: true, ack: false });
    }

    // --- Rollo 2 (Terrassentür) Control ---
    if (e.target.id === 'btn-rollo-2-down') {
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: 0, ack: false });
    }
    if (e.target.id === 'btn-rollo-2-up') {
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: 100, ack: false });
    }
    if (e.target.id === 'btn-rollo-2-stop') {
        console.log("Stopping Rollo Terrassentuer");
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.STOP', { val: true, ack: false });
    }

    // --- Rollo 3 (Markise) Control ---
    if (e.target.id === 'btn-rollo-3-down') {
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: 0, ack: false });
    }
    if (e.target.id === 'btn-rollo-3-up') {
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: 100, ack: false });
    }
    if (e.target.id === 'btn-rollo-3-stop') {
        console.log("Stopping Markise");
        if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.STOP', { val: true, ack: false });
    }

});

// Slider Interaction (outside click listener to support dragging)
document.addEventListener('input', (e) => {
    if (e.target.id === 'range-rollo') {
        const val = e.target.value;
        const display = document.getElementById('val-rollo');
        if (display) display.innerText = val + "%";
    }
    if (e.target.id === 'range-rollo-2') {
        const val = e.target.value;
        const display = document.getElementById('val-rollo-2');
        if (display) display.innerText = val + "%";
    }
    if (e.target.id === 'range-rollo-3') {
        const val = e.target.value;
        const display = document.getElementById('val-rollo-3');
        if (display) display.innerText = val + "%";
    }
});

document.addEventListener('change', (e) => {
    if (e.target.id === 'range-rollo') {
        const val = parseInt(e.target.value);
        console.log(`Setting Rollo to: ${val}`);
        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: val, ack: false });
        }
    }
    if (e.target.id === 'range-rollo-2') {
        const val = parseInt(e.target.value);
        console.log(`Setting Rollo Terrassentuer to: ${val}`);
        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: val, ack: false });
        }
    }
    if (e.target.id === 'range-rollo-3') {
        const val = parseInt(e.target.value);
        console.log(`Setting Markise to: ${val}`);
        if (window.lcarsSocket) {
            window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: val, ack: false });
        }
    }
});