SwapStation_WebApp/frontend/js/logs.js

document.addEventListener('DOMContentLoaded', () => {
    // --- CONFIGURATION ---
    const SOCKET_URL = "http://192.168.1.10:5000";
    const API_BASE = "http://192.168.1.10: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 requestLogArea = document.getElementById('request-log-area');
    const eventLogArea = document.getElementById('event-log-area');
    const connChip = document.getElementById('connection-status-chip');
    const clearReqBtn = document.getElementById('clear-req');
    const clearEvtBtn = document.getElementById('clear-evt');
    const clearAllBtn = document.getElementById('clear-all');
    const refreshBtn = document.getElementById('refreshBtn');
    const logoutBtn = document.getElementById('logout-btn');
    const logCountInput = document.getElementById('log-count');
    const fromDateInput = document.getElementById('from-date');
    const toDateInput = document.getElementById('to-date');
    const applyFiltersBtn = document.getElementById('apply-filters-btn');

    // --- STATE ---
    let selectedStation = null;
    let socket;
    let statusPollingInterval;
    let fromDatePicker, toDatePicker;

    // --- HELPER FUNCTIONS --

    const appendLog = (textarea, data, topic, timestampStr) => {
        if (!textarea) return;

        const timestamp = new Date(timestampStr).toLocaleString();
        const formattedJson = JSON.stringify(data, null, 2);
        
        // Clean up the topic for better display
        const topicParts = topic.split('/');
        const shortTopic = topicParts.slice(-2).join('/'); // Gets the last two parts, e.g., "RPC/REQUEST" or ".../EVENTS"

        const newLog = `[${timestamp}] - Topic: ${shortTopic}\n${formattedJson}\n\n---------------------------------\n\n`;
        
        textarea.value += newLog;
        textarea.scrollTop = textarea.scrollHeight;
    };

    // const fetchRecentLogs = async () => {
    //     try {
    //         const response = await fetch(`${API_BASE}/logs/recent/${selectedStation.id}`);
    //         if (!response.ok) throw new Error('Failed to fetch recent logs');
    //         const logs = await response.json();
            
    //         requestLogArea.value = '';
    //         eventLogArea.value = '';

    //         logs.forEach(log => {
    //             if (log.topic.endsWith('EVENTS')) {
    //                 appendLog(eventLogArea, log.payload, log.topic, log.timestamp);
    //             } else if (log.topic.endsWith('REQUEST')) {
    //                 appendLog(requestLogArea, log.payload, log.topic, log.timestamp);
    //             }
    //         });
    //         console.log(`Successfully fetched and rendered ${logs.length} recent logs.`);
    //     } catch (error) {
    //         console.error(error);
    //     }
    // };



    const fetchRecentLogs = async () => {
        // Get values from all filters
        const count = logCountInput.value;
        const startDate = fromDatePicker.selectedDates[0];
        const endDate = toDatePicker.selectedDates[0];

        if (!startDate || !endDate) return;
        
        const startDateStr = flatpickr.formatDate(startDate, "Y-m-d");
        const endDateStr = flatpickr.formatDate(endDate, "Y-m-d");

        try {
            // Build URL with all parameters
            const params = new URLSearchParams({
                start_date: startDateStr,
                end_date: endDateStr,
                count: count
            });
            const response = await fetch(`${API_BASE}/logs/recent/${selectedStation.id}?${params}`);
            if (!response.ok) throw new Error('Failed to fetch recent logs');
            const logs = await response.json();
            
            requestLogArea.value = '';
            eventLogArea.value = '';

            logs.forEach(log => {
                if (log.topic.endsWith('EVENTS')) {
                    appendLog(eventLogArea, log.payload, log.topic, log.timestamp);
                } else if (log.topic.endsWith('REQUEST')) {
                    appendLog(requestLogArea, log.payload, log.topic, log.timestamp);
                }
            });
            console.log(`Successfully fetched and rendered ${logs.length} recent logs.`);
        } catch (error) {
            console.error(error);
        }
    };
    
    // --- INITIALIZATION AND EVENT HANDLERS ---
    function init() {
        console.log("1. Starting initialization...");

        // Step 1: Load the station from localStorage.
        try {
            const stationData = localStorage.getItem('selected_station');
            console.log("2. Fetched from localStorage:", stationData);

            if (!stationData) {
                throw new Error('No station data found in localStorage.');
            }
            
            selectedStation = JSON.parse(stationData);
            console.log("3. Parsed station data:", selectedStation);

            if (!selectedStation || !selectedStation.id) {
                throw new Error('Parsed station data is invalid or missing an ID.');
            }

        } catch (e) {
            console.error("ERROR during station loading:", e);
            // window.location.href = './station_selection.html'; // Temporarily disable redirect for debugging
            return; 
        }

        // Step 2: Populate the header.
        console.log("4. Populating header...");
        stationNameEl.textContent = selectedStation.name;
        stationLocationEl.textContent = selectedStation.location;
        deviceIdEl.textContent = selectedStation.id;
        productIdEl.textContent = selectedStation.product_id;
        console.log("5. Header populated.");

        fromDatePicker = flatpickr(fromDateInput, { dateFormat: "Y-m-d", defaultDate: "today" });
        toDatePicker = flatpickr(toDateInput, { dateFormat: "Y-m-d", defaultDate: "today" });

        applyFiltersBtn.addEventListener('click', fetchRecentLogs);

        // Step 3: Set up button event listeners.
        if(clearReqBtn) clearReqBtn.addEventListener('click', () => requestLogArea.value = '');
        if(clearEvtBtn) clearEvtBtn.addEventListener('click', () => eventLogArea.value = '');
        if(clearAllBtn) clearAllBtn.addEventListener('click', () => {
            requestLogArea.value = '';
            eventLogArea.value = '';
        });
        if(logoutBtn) logoutBtn.addEventListener('click', () => {
            localStorage.clear();
            window.location.href = 'index.html';
        });
        if(refreshBtn) refreshBtn.addEventListener('click', () => location.reload());
        console.log("6. Event listeners attached.");

        // Step 4: Fetch initial data now that everything is set up.
        console.log("7. Calling fetchRecentLogs()...");
        fetchRecentLogs();

        // Step 5: Start WebSocket connection for live updates.
        socket = io(SOCKET_URL);
        socket.on('connect', () => {
            console.log("Logs Page: Connected to WebSocket.");
            socket.emit('join_station_room', { station_id: selectedStation.id });
        });
        socket.on('dashboard_update', (message) => {
            const { stationId, topic, data } = message;
            if (stationId !== selectedStation.id) return;
            const now = new Date().toISOString();
            if (topic.endsWith('EVENTS')) {
                appendLog(eventLogArea, data, topic, now);
            } else if (topic.endsWith('REQUEST')) {
                appendLog(requestLogArea, data, topic, now);
            }
        });
    }



    // --- START THE APPLICATION ---
    init();
});