{% extends "base.html" %}

{% block title %}PANTHER - Logs{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="mb-4">Logs</h1>

    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Log Directory</h5>
        </div>
        <div class="card-body">
            <p>Logs are stored in: <code>{{ log_dir }}</code></p>

            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle me-2"></i>
                Select a log file from the list below to view its contents.
            </div>

            <div id="logFilesContainer">
                <p class="text-center">
                    <i class="fas fa-spinner fa-spin me-2"></i> Loading log files...
                </p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0" id="logContentHeader">Log Content</h5>
            <div>
                <button class="btn btn-sm btn-outline-secondary" id="refreshLogBtn">
                    <i class="fas fa-sync-alt me-1"></i> Refresh
                </button>
                <button class="btn btn-sm btn-outline-primary" id="downloadLogBtn">
                    <i class="fas fa-download me-1"></i> Download
                </button>
            </div>
        </div>
        <div class="card-body">
            <div id="logContent" class="code-block" style="max-height: 500px; overflow-y: auto;">
                <p class="text-center text-muted">Select a log file to view its contents</p>
            </div>
        </div>
    </div>
</div>

<!-- Log File Selection Modal -->
<div class="modal fade" id="logFileModal" tabindex="-1" aria-labelledby="logFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logFileModalLabel">View Log File</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalLogContent" class="code-block" style="max-height: 70vh; overflow-y: auto;">
                    <!-- Log content will be displayed here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="downloadModalLogBtn">
                    <i class="fas fa-download me-1"></i> Download
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Simulated log files data (replace with actual API call)
    const logFiles = [
        { name: 'experiment_2025-03-03_15-12-54.log', path: '/outputs/logs/experiment_2025-03-03_15-12-54.log', size: '24.5 KB', modified: '2025-03-03 15:20:32' },
        { name: 'picoquic_server.log', path: '/outputs/logs/picoquic_server.log', size: '128.7 KB', modified: '2025-03-03 15:18:12' },
        { name: 'ivy_client.log', path: '/outputs/logs/ivy_client.log', size: '85.3 KB', modified: '2025-03-03 15:19:45' },
        { name: 'docker_compose.log', path: '/outputs/logs/docker_compose.log', size: '43.1 KB', modified: '2025-03-03 15:17:28' },
    ];

    // Simulated log content (replace with actual API call)
    function getLogContent(logPath) {
        // This would be replaced with an AJAX call to get actual log content
        return `[2025-03-03 15:12:54] [INFO] - Starting experiment...
[2025-03-03 15:12:55] [INFO] - Loading configuration from experiment_config.yaml
[2025-03-03 15:12:56] [INFO] - Initializing network environment: docker_compose
[2025-03-03 15:12:58] [INFO] - Building Docker images for services
[2025-03-03 15:13:10] [INFO] - Starting service: picoquic_server
[2025-03-03 15:13:12] [INFO] - Starting service: ivy_client
[2025-03-03 15:13:15] [INFO] - Waiting for services to be ready...
[2025-03-03 15:13:20] [INFO] - Services are ready, running test
[2025-03-03 15:14:05] [INFO] - Test completed successfully
[2025-03-03 15:14:06] [INFO] - Collecting logs and results
[2025-03-03 15:14:10] [INFO] - Shutting down services
[2025-03-03 15:14:15] [INFO] - Experiment completed`;
    }

    function displayLogFiles() {
        let html = `
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>File Name</th>
                        <th>Size</th>
                        <th>Modified</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
        `;

        logFiles.forEach(file => {
            html += `
                <tr>
                    <td>${file.name}</td>
                    <td>${file.size}</td>
                    <td>${file.modified}</td>
                    <td>
                        <button class="btn btn-sm btn-primary view-log" data-log-path="${file.path}" data-log-name="${file.name}">
                            <i class="fas fa-eye me-1"></i> View
                        </button>
                    </td>
                </tr>
            `;
        });

        html += `
                </tbody>
            </table>
        `;

        $('#logFilesContainer').html(html);
    }

    $(document).ready(function() {
        // Display log files
        displayLogFiles();

        // Handle view log click
        $(document).on('click', '.view-log', function() {
            const logPath = $(this).data('log-path');
            const logName = $(this).data('log-name');
            const logContent = getLogContent(logPath);

            $('#logContentHeader').text(`Log Content: ${logName}`);
            $('#logContent').html(`<pre>${logContent}</pre>`);
            $('#downloadLogBtn').data('log-path', logPath).data('log-name', logName);
        });

        // Handle log file modal view
        $(document).on('click', '.view-log-modal', function() {
            const logPath = $(this).data('log-path');
            const logName = $(this).data('log-name');
            const logContent = getLogContent(logPath);

            $('#logFileModalLabel').text(logName);
            $('#modalLogContent').html(`<pre>${logContent}</pre>`);
            $('#downloadModalLogBtn').data('log-path', logPath).data('log-name', logName);
            $('#logFileModal').modal('show');
        });

        // Handle refresh log
        $('#refreshLogBtn').click(function() {
            const logPath = $('#downloadLogBtn').data('log-path');
            if (logPath) {
                const logContent = getLogContent(logPath);
                $('#logContent').html(`<pre>${logContent}</pre>`);
            }
        });

        // Handle download log
        $('#downloadLogBtn, #downloadModalLogBtn').click(function() {
            const logPath = $(this).data('log-path');
            const logName = $(this).data('log-name');
            if (logPath) {
                // This would be replaced with an actual download mechanism
                alert(`Downloading log file: ${logName}`);
            }
        });
    });
</script>
{% endblock %}