{% extends "base.html" %}

{% block head %}
    <title>Skinnerbox - Log Viewer</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

{% block scripts %}
    <script>
        onload = function () {
            fetch('/current_user')
                .then(response => response.json())
                .then(data => {
                    if (!data.current_user) {
                        document.getElementById('remote-logs').style.display = 'none';
                        document.getElementById('remote-log-btn').style.display = 'none';
                        document.getElementById('local-log-btn').style.display = 'inline-block';
                        showToast("Not logged in. Local logs only.", false);
                        showLocalLogs();
                    } else {
                        document.getElementById('remote-logs').style.display = 'block';
                        document.getElementById('remote-log-btn').style.display = 'inline-block';
                        document.getElementById('local-log-btn').style.display = 'inline-block';
                        document.getElementById('local-log-btn').style.backgroundColor = 'transparent';
                        showToast("Logged in as: " + data.current_user, true);
                        showRemoteLogs();
                    }
                })
                .catch(error => console.error('Error fetching current user:', error));
        };

        function viewRemoteLog(trialInfo) {
            console.log("Viewing trial details:", trialInfo);

            const logViewer = document.getElementById('log-viewer');
            const allLogs = document.querySelectorAll('.log-item');
            allLogs.forEach(log => log.classList.remove('selected'));  // Remove 'selected' class from all items

            const selectedLog = Array.from(allLogs).find(log => log.textContent === new Date(trialInfo.start_time).toLocaleString());
            if (selectedLog) selectedLog.classList.add('selected');

            // Clear existing content
            logViewer.innerHTML = '';

            // Add trial summary details
            const trialSummary = `
                <table>
                    <tr><th>Date/Time</th><th>Total Time</th><th>Total Interactions</th></tr>
                    <tr>
                        <td>${new Date(trialInfo.start_time).toLocaleString()}</td>
                        <td>${((new Date(trialInfo.end_time) - new Date(trialInfo.start_time)) / 1000).toFixed(2)}</td>
                        <td>${trialInfo.total_interactions}</td>
                    </tr>
                </table>
            `;
            logViewer.innerHTML += trialSummary;

            // Add trial entry details
            if (trialInfo.valuesInfoPosition && trialInfo.valuesInfoPosition.length > 0) {
                const trialValuesTable = `
                    <table>
                        <tr>
                            <th>Entry</th><th>Interaction Time</th><th>Type</th>
                            <th>Reward</th><th>Interactions Between</th><th>Time Between</th>
                        </tr>
                        ${trialInfo.valuesInfoPosition.map(entry => `
                            <tr>
                                <td>${entry.entry_num}</td>
                                <td>${entry.rel_time}</td>
                                <td>${entry.type}</td>
                                <td>${entry.reward ? 'Yes' : 'No'}</td>
                                <td>${entry.interactions_between}</td>
                                <td>${entry.time_between}</td>
                            </tr>
                        `).join('')}
                    </table>
                `;
                logViewer.innerHTML += trialValuesTable;
            } else {
                logViewer.innerHTML += '<p>No trial entries available.</p>';
            }
        }

        function viewLocalLog(filename) {
            console.log(`Fetching local log content for: ${filename}`);
            
            // Highlight selected log
            const allLogs = document.querySelectorAll('.log-item');
            allLogs.forEach(log => log.classList.remove('selected'));
            const selectedLog = Array.from(allLogs).find(log => log.getAttribute('data-filename') === filename);
            if (selectedLog) selectedLog.classList.add('selected');

            // Show buttons
            const rawDownloadBtn = document.getElementById('download-btn');
            const excelDownloadBtn = document.getElementById('download-excel-btn');
            
            // Ensure correct file paths
            rawDownloadBtn.setAttribute("data-filename", filename);
            excelDownloadBtn.setAttribute("data-filename", filename);

            rawDownloadBtn.style.display = 'inline-block';
            excelDownloadBtn.style.display = 'inline-block';
            document.getElementById('push-cloud-btn').style.display = 'inline-block';

            fetch(`/view-log/${encodeURIComponent(filename)}`)
                .then(response => response.json())
                .then(trialInfo => {
                    console.log("Viewing local trial details:", trialInfo);
                    const logViewer = document.getElementById('log-viewer');
                    logViewer.innerHTML = '';

                    // Add trial summary details
                    const trialSummary = `
                        <table>
                            <tr><th>Date/Time</th><th>Total Time</th><th>Total Interactions</th></tr>
                            <tr>
                                <td>${new Date(trialInfo.start_time).toLocaleString()}</td>
                                <td>${((new Date(trialInfo.end_time) - new Date(trialInfo.start_time)) / 1000).toFixed(2)} sec</td>
                                <td>${trialInfo.total_interactions}</td>
                            </tr>
                        </table>
                    `;
                    logViewer.innerHTML += trialSummary;

                    // Add trial entry details
                    if (trialInfo.trial_entries && trialInfo.trial_entries.length > 0) {
                        const trialValuesTable = `
                            <table>
                                <tr>
                                    <th>Entry</th><th>Interaction Time</th><th>Type</th>
                                    <th>Reward</th><th>Interactions Between</th><th>Time Between</th>
                                </tr>
                                ${trialInfo.trial_entries.map(entry => `
                                    <tr>
                                        <td>${entry.entry_num}</td>
                                        <td>${entry.rel_time.toFixed(2)}</td>
                                        <td>${entry.type}</td>
                                        <td>${entry.reward ? 'Yes' : 'No'}</td>
                                        <td>${entry.interactions_between}</td>
                                        <td>${entry.time_between.toFixed(2)}</td>
                                    </tr>
                                `).join('')}
                            </table>
                        `;
                        logViewer.innerHTML += trialValuesTable;
                    } else {
                        logViewer.innerHTML += '<p>No trial entries available.</p>';
                    }
                })
                .catch(error => {
                    console.error('Error fetching the log:', error);
                    document.getElementById('log-viewer').innerHTML = '<p>Error loading log content.</p>';
                });
        }

        function showRemoteLogs() {
            const logViewer = document.getElementById('log-viewer');
            logViewer.innerHTML = ''; // Clear existing content
            fetch('/pull_user_logs')
            .then(response => response.json())
            .then(data => {
                const remoteLogsContainer = document.getElementById('remote-logs');
                remoteLogsContainer.innerHTML = ''; // Clear existing content
                console.log('Remote logs data:', data); // Debugging log

                // Sort logs by newest date and time first
                data.data.sort((a, b) => new Date(b.start_time) - new Date(a.start_time));

                data.data.forEach(trial => {
                    const trialElement = document.createElement('a');
                    trialElement.className = 'log-item';  // Add the log-item class for consistent styling
                    trialElement.textContent = new Date(trial.start_time).toLocaleString();
                    trialElement.href = "#";  // Prevent page reload
                    trialElement.onclick = (event) => {
                        event.preventDefault();  // Prevent default link behavior
                        viewRemoteLog(trial);
                    };
                    remoteLogsContainer.appendChild(trialElement);
                });

                })
                .catch(error => {
                    console.error('Error fetching remote trials:', error);
                    document.getElementById('remote-logs').innerHTML = '<p>Error loading remote logs.</p>';
                });

            document.getElementById('local-logs').style.display = 'none';
            document.getElementById('local-log-btn').style.backgroundColor = 'transparent';
            document.getElementById('remote-logs').style.display = 'block';
            document.getElementById('remote-log-btn').style.backgroundColor = '#6200EE';
            
            document.getElementById('download-btn').style.display = 'none';
            document.getElementById('download-excel-btn').style.display = 'none';
            document.getElementById('push-cloud-btn').style.display = 'none';
        }

        function showLocalLogs() {
            const logViewer = document.getElementById('log-viewer');

            logViewer.innerHTML = ''; // Clear existing content
            fetch('/list_local_logs')
                .then(response => response.json())
                .then(data => {
                    const localLogsContainer = document.getElementById('local-logs');
                    localLogsContainer.innerHTML = ''; // Clear existing content

                    if (data.log_files.length === 0) {
                        const noLogsMessage = document.createElement('p');
                        noLogsMessage.textContent = 'No local logs available.';
                        noLogsMessage.className = 'no-logs-message';
                        document.getElementById('local-logs').appendChild(noLogsMessage);
                        return;
                    }

                    // Sort logs by newest date and time first
                    data.log_files.sort((a, b) => {
                        const datePartsA = a.replace('log_', '').replace('.json', '').split(/[_\/]/);
                        const datePartsB = b.replace('log_', '').replace('.json', '').split(/[_\/]/);

                        const yearA = parseInt(datePartsA[2], 10) < 100 ? parseInt(datePartsA[2], 10) + 2000 : parseInt(datePartsA[2], 10);
                        const yearB = parseInt(datePartsB[2], 10) < 100 ? parseInt(datePartsB[2], 10) + 2000 : parseInt(datePartsB[2], 10);

                        const dateA = new Date(yearA, parseInt(datePartsA[0], 10) - 1, parseInt(datePartsA[1], 10),
                            parseInt(datePartsA[3], 10), parseInt(datePartsA[4], 10), parseInt(datePartsA[5], 10));

                        const dateB = new Date(yearB, parseInt(datePartsB[0], 10) - 1, parseInt(datePartsB[1], 10),
                            parseInt(datePartsB[3], 10), parseInt(datePartsB[4], 10), parseInt(datePartsB[5], 10));

                        return dateB - dateA;  // Sort newest to oldest
                    });

                    // Display logs
                    data.log_files.forEach(log_file => {
                        const logElement = document.createElement('a');
                        logElement.className = 'log-item';

                        const dateParts = log_file.replace('log_', '').replace('.json', '').split(/[_\/]/);
                        const month = parseInt(dateParts[0], 10) - 1;
                        const day = parseInt(dateParts[1], 10);
                        const year = parseInt(dateParts[2], 10) < 100 ? parseInt(dateParts[2], 10) + 2000 : parseInt(dateParts[2], 10);
                        const hours = parseInt(dateParts[3], 10);
                        const minutes = parseInt(dateParts[4], 10);
                        const seconds = parseInt(dateParts[5], 10);

                        const formattedDate = new Date(year, month, day, hours, minutes, seconds).toLocaleString();
                        logElement.textContent = formattedDate;
                        logElement.setAttribute('data-filename', log_file);
                        logElement.href = "#";  // Prevent page reload
                        logElement.onclick = function () {
                            console.log(`Clicked log: ${log_file}`);
                            viewLocalLog(log_file);
                        };
                        localLogsContainer.appendChild(logElement);
                    });

                    console.log("Local logs loaded:", data.log_files); // Debugging log
                })
                .catch(error => {
                    console.error('Error fetching local logs:', error);
                    document.getElementById('local-logs').innerHTML = '<p>Error loading local logs.</p>';
                });

            document.getElementById('remote-logs').style.display = 'none';
            document.getElementById('remote-log-btn').style.backgroundColor = 'transparent';
            document.getElementById('local-logs').style.display = 'block';
            document.getElementById('local-log-btn').style.backgroundColor = '#6200EE';

            document.getElementById('download-btn').href = '';
            document.getElementById('download-btn').style.display = 'none';
            document.getElementById('download-excel-btn').href = '';
            document.getElementById('download-excel-btn').style.display = 'none';
            document.getElementById('push-cloud-btn').style.display = 'none';
        }


        function pushLogToCloud() {
            const filename = document.getElementById('download-btn').getAttribute("data-filename");

            if (!filename) {
                showToast("No log selected to push.", false);
                return;
            }

            console.log(`Pushing log to cloud: ${filename}`);

            const formData = new FormData();
            formData.append("file", filename); // Just send the filename, and let the server handle file retrieval
            formData.append("pi_id", "n4CYyssTN4"); // Replace with the actual pi_id if needed

            fetch('/push_log', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    showToast("Failed to push log.", false);
                } else {
                    showToast("Log successfully pushed to the cloud!", true);
                    document.getElementById('push-cloud-btn').style.display = 'none';
                    showLocalLogs(); // Refresh the log list
                }
            })
            .catch(error => {
                console.error('Error pushing log:', error);
                showToast("Failed to push log.", false);
            });
        }


        function downloadFile(type) {
            const filename = document.getElementById('download-btn').getAttribute("data-filename");

            if (!filename) {
                showToast("No log selected for download.", false);
                return;
            }

            let downloadUrl = "";
            if (type === 'raw') {
                downloadUrl = `/download-raw-log/${encodeURIComponent(filename)}`;
            } else if (type === 'excel') {
                downloadUrl = `/download-excel-log/${encodeURIComponent(filename)}`;
            }

            console.log(`Downloading file from: ${downloadUrl}`);

            // Trigger file download
            const link = document.createElement("a");
            link.href = downloadUrl;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            showToast("Download started.", true);
        }

        function showToast(message, success = true) {
            const toast = document.createElement('div');
            toast.className = `toast ${success ? 'toast-success' : 'toast-error'}`;
            toast.textContent = message;
            document.getElementById('toast-container').appendChild(toast);

            setTimeout(() => {
                toast.classList.add('fade-out');
                setTimeout(() => toast.remove(), 500);
            }, 3000);
        }

    </script>
{% endblock %}

{% block content %}
<div id="container" class="flex-container row">
    <!-- Log List and Buttons Section -->
    <div id="log-list-section" class="flex-item log-list-section">
        
        <div id="log-list" class="log-list">
            <h3>Log List:</h3>
            <!-- Log Toggle Buttons -->
            <div class="flex-container log-buttons">
                <a id="remote-log-btn" href="javascript:showRemoteLogs();" class="log-toggle-button">Remote</a>
                <a id="local-log-btn" href="javascript:showLocalLogs();" class="log-toggle-button">Local</a>
            </div>
            
            <!-- Remote Logs (Loader) -->
            <div id="remote-logs" class="loader-section log-list-items" style="display: none;">
                <div class="bar-loader">
                    <span class="bar-loader-text">Loading...</span>
                    <span class="bar-load"></span>
                </div>
            </div>
            
            <!-- Local Logs -->
            <div id="local-logs" class="log-list-items" style="display: none;">

            </div>
        </div>

        <!-- Button Section Below Log List -->
        <div id="download-buttons" class="flex-container button-group">
            <!-- 📄 Download Raw Log -->
            <button class="cssbuttons-io-button" id="download-btn" style="display: none;" onclick="downloadFile('raw')">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM6 20V4h7v5h5v11H6z"></path>
                </svg>
                <span>Download Raw Log</span>
            </button>

            <!-- 📊 Download Excel Log -->
            <button class="cssbuttons-io-button" id="download-excel-btn" style="display: none;" onclick="downloadFile('excel')">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path fill="currentColor" d="M4 4h16v16H4z" opacity=".3"></path>
                    <path fill="currentColor" d="M4 4v16h16V4H4zm2 14V6h12v12H6zm6-5.5l-1.41-1.41-2.12 2.12-2.12-2.12L5.5 12.5l2.12 2.12-2.12 2.12L7.59 17l2.12-2.12L11.83 17l1.41-1.41-2.12-2.12 2.12-2.12z"></path>
                </svg>
                <span>Download Excel Log</span>
            </button>

            <!-- ☁️ Push Log to Cloud -->
            <button class="cssbuttons-io-button" id="push-cloud-btn" style="display: none" onclick="pushLogToCloud();">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path fill="currentColor" d="M19.35 10.04A7.49 7.49 0 0012 4 7.5 7.5 0 004.65 10.04 5.998 5.998 0 000 16c0 3.31 2.69 6 6 6h12c3.31 0 6-2.69 6-6 0-2.53-1.56-4.75-3.65-5.96zM11 13v4h2v-4h3l-4-4-4 4h3z"></path>
                </svg>
                <span>Push Log</span>
            </button>
        </div>
    </div>

    <!-- Log Viewer Section -->
    <div id="log-viewer" class="flex-item log-viewer-container">
        <div class="flex-container">
            <h3>Log Viewer:</h3>
        </div>
    </div>
</div>
<div id="toast-container"></div>
{% endblock %}