{% extends "base.html" %}


{% block title %}Log Viewer - Execution #{{ execId }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Log Viewer - Execution #{{ execId }}</h2>
    <div class="btn-group">
        <a href="javascript:history.back()" class="btn btn-secondary">← Back</a>
        <button onclick="downloadLog()" class="btn">Download</button>
        <button onclick="toggleAutoScroll()" class="btn" id="autoscroll-btn">Auto-scroll: ON</button>
    </div>
</div>

<div class="section">
    <div id="log-info" class="log-info">
        <span>Status: <span id="exec-status" class="status-badge">-</span></span>
        <span>Started: <span id="exec-start">-</span></span>
        <span>PID: <span id="exec-pid">-</span></span>
        <span>File: <span id="exec-file">-</span></span>
    </div>

    <div class="log-viewer">
        <pre><code id="log-content" class="language-bash">Loading log...</code></pre>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const execId = {{ execId }};
    const execution = {{ executionJson }};

    let autoScroll = true;
    let pollInterval = null;

    function toggleAutoScroll() {
        autoScroll = !autoScroll;
        document.getElementById('autoscroll-btn').textContent = `Auto-scroll: ${autoScroll ? 'ON' : 'OFF'}`;
    }

    function downloadLog() {
        window.location.href = `/api/download_log?id=${execId}`;
    }

    function scrollToBottom() {
        if (autoScroll) {
            // Scroll the .log-viewer container, not the <code> element
            const viewer = document.querySelector('.log-viewer');
            if (viewer) viewer.scrollTop = viewer.scrollHeight;
        }
    }

    function updateExecutionInfo(exec) {
        document.getElementById('exec-status').textContent = exec.status;
        document.getElementById('exec-status').className = `status-badge status-${exec.status.toLowerCase()}`;
        document.getElementById('exec-start').textContent = new Date(exec.startTime).toLocaleString();
        document.getElementById('exec-pid').textContent = exec.pid || '-';
        document.getElementById('exec-file').textContent = exec.logFile || 'Unknown';
    }

    async function loadExecutionInfo() {
        updateExecutionInfo(execution);
    }

    async function loadLogContent(stopPollingWhenDone) {
        try {
            const response = await fetch(`/api/execution_log?id=${execId}`, { method: 'POST' });
            if (!response.ok) throw new Error("Failed to load log");
            const content = await response.json();
            const el = document.getElementById('log-content');
            el.textContent = content.content || 'No log content available';
            Prism.highlightElement(el);
            scrollToBottom();

            // Stop polling once the execution has finished
            if (stopPollingWhenDone && content.status) {
                const s = content.status.toLowerCase();
                if (s !== 'running' && s !== 'pending' && s !== 'scheduled' && s !== 'triggered') {
                    stopPolling();
                }
            }
        } catch (error) {
            document.getElementById('log-content').textContent = 'Error loading log: ' + error;
            stopPolling();
        }
    }

    function stopPolling() {
        if (pollInterval !== null) {
            clearInterval(pollInterval);
            pollInterval = null;
        }
    }

    // Poll the log endpoint every 2s for live jobs
    function startLogPolling() {
        // Load immediately, then repeat
        loadLogContent(true);
        pollInterval = setInterval(() => loadLogContent(true), 2000);
    }

    // Main init logic
    async function init() {
        await loadExecutionInfo();

        const status = execution.status ? execution.status.toLowerCase() : '';

        if (status === 'running' || status === 'pending' || status === 'scheduled' || status === 'triggered' || status === '') {
            startLogPolling();
        } else {
            loadLogContent(false);
        }
    }

    init();
</script>

<style>
    .log-viewer {
        background: #1e1e1e;
        border-radius: 4px;
        margin-top: 1rem;
        max-height: 600px;
        overflow-y: auto;
    }

    .log-viewer pre {
        color: #d4d4d4;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.875rem;
        line-height: 1.5;
        padding: 1rem;
        margin: 0;
    }

    .log-info {
        display: flex;
        gap: 2rem;
        padding: 1rem;
        background: var(--light);
        border-radius: 4px;
    }

    .log-info span {
        font-size: 0.875rem;
    }

    .btn-group {
        display: flex;
        gap: 0.5rem;
    }

    .btn-secondary {
        background: #6b7280;
    }

    .btn-secondary:hover {
        background: #4b5563;
    }
</style>
{% endblock %}