document.addEventListener('DOMContentLoaded', () => {
    // --- CONFIGURATION ---
    const SOCKET_URL = "http://192.168.1.12:5000";
    const API_BASE = "http://192.168.1.12:5000/api";

    // --- DOM ELEMENT REFERENCES ---
    const stationNameEl = document.getElementById('station-name');
    const stationLocationEl = document.getElementById('station-location');
    const deviceIdEl = document.getElementById('device-id');
    const productIdEl = document.getElementById('product-id');
    const lastUpdateEl = document.getElementById('last-update-status');
    const connChip = document.getElementById('connection-status-chip');
    const requestLogArea = document.getElementById('request-log-area');
    const eventLogArea = document.getElementById('event-log-area');
    const clearReqBtn = document.getElementById('clear-req');
    const clearEvtBtn = document.getElementById('clear-evt');
    const clearAllBtn = document.getElementById('clear-all');
    const refreshBtn = document.getElementById('refreshBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const logoutBtn = document.getElementById('logout-btn');
    const resetBtn = document.getElementById('station-reset-btn');

    // --- STATE ---
    let selectedStation = null;
    let socket;
    let statusPollingInterval;

    // --- HELPER FUNCTIONS ---
    const prependLog = (textarea, data) => {
        if (!textarea) return;
        const timestamp = new Date().toLocaleTimeString();
        const formattedJson = JSON.stringify(data, null, 2);
        const newLog = `[${timestamp}]\n${formattedJson}\n\n---------------------------------\n\n`;
        textarea.value = newLog + textarea.value;
    };
    
    const sendCommand = (command, data = null) => {
        if (!selectedStation || !socket || !socket.connected) {
            console.error(`Cannot send command '${command}', not connected.`);
            return;
        }
        const payload = { station_id: selectedStation.id, command: command, data: data };
        socket.emit('rpc_request', payload);
    };

    const checkStationStatus = async () => {
        if (!selectedStation) return;
        try {
            const response = await fetch(`${API_BASE}/stations`);
            if (!response.ok) return;
            const stations = await response.json();
            const thisStation = stations.find(s => s.id === selectedStation.id);
            if (thisStation) {
                stationNameEl.textContent = thisStation.name;
                stationLocationEl.textContent = thisStation.location;
                if (thisStation.status === 'Online') {
                    connChip.innerHTML = `<span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulseDot"></span> Online`;
                    connChip.className = 'cham_chip cham_chip-emerald';
                } else {
                    connChip.innerHTML = `<span class="h-2 w-2 rounded-full bg-rose-500"></span> Offline`;
                    connChip.className = 'cham_chip cham_chip-rose';
                }
            }
        } catch (error) { console.error("Failed to fetch station status:", error); }
    };
    
    // --- INITIALIZATION ---
    try {
        selectedStation = JSON.parse(localStorage.getItem('selected_station'));
        if (!selectedStation || !selectedStation.id) {
            throw new Error('No station selected. Please go back to the selection page.');
        }
        deviceIdEl.textContent = selectedStation.id;
        productIdEl.textContent = selectedStation.product_id;
    } catch (e) {
        document.body.innerHTML = `<div class="text-center p-8 text-rose-400">${e.message}<a href="./station_selection.html" class="underline ml-2">Go Back</a></div>`;
        return;
    }

    // --- SOCKET.IO CONNECTION ---
    socket = io(SOCKET_URL);
    socket.on('connect', () => {
        console.log("Connected to WebSocket for logs.");
        socket.emit('join_station_room', { station_id: selectedStation.id });
    });

    socket.on('dashboard_update', (message) => {
        const { stationId, topic, data } = message;
        if (stationId !== selectedStation.id) return;

        lastUpdateEl.textContent = 'Last Recv ' + new Date().toLocaleTimeString();
        
        if (topic.endsWith('EVENTS')) {
            prependLog(eventLogArea, data);
        } else if (topic.endsWith('REQUEST')) {
            prependLog(requestLogArea, data);
        }
    });
    

    if(logoutBtn) logoutBtn.addEventListener('click', () => {
        localStorage.clear();
        window.location.href = 'index.html';
    });
    if(refreshBtn) refreshBtn.addEventListener('click', () => location.reload());
    // if(downloadBtn) downloadBtn.addEventListener('click', () => alert("Download functionality can be added here.")); // Placeholder for download modal
    if(resetBtn) resetBtn.addEventListener('click', () => {
        if (confirm('Are you sure you want to reset the station?')) {
            sendCommand('STATION_RESET');
        }
    });

    // --- STARTUP ---
    checkStationStatus();
    statusPollingInterval = setInterval(checkStationStatus, 10000);
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});