{% extends "base.html" %}

{% block extra_head %}
<style>
/* Task Detail Page */
.task-detail-container {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    height: calc(100vh - 200px);
}

.task-header {
    background-color: var(--gb-bg);
    border-bottom: 1px solid var(--gb-bg1);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-title {
    color: var(--gb-blue-b);
    margin: 0 0 0.4rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.task-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.task-meta span {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.task-target { color: var(--gb-purple-b) !important; }
.task-duration { color: var(--text-primary) !important; }
.task-status { color: var(--gb-blue-b) !important; }

.task-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Terminal for task_detail - live streaming output */
.terminal-container {
    background-color: var(--gb-bg-h);
    border: none;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    overflow: hidden;
}

.terminal-header {
    background-color: var(--gb-bg1);
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--gb-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.terminal-title {
    color: var(--text-secondary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

.terminal-status {
    display: flex;
    gap: 0.875rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
}

#connection-status.connected { color: var(--gb-blue-b); }
#connection-status.disconnected { color: var(--gb-red-b); }

.terminal-body {
    flex: 1;
    padding: 1rem 1.25rem;
    background-color: var(--gb-bg-h);
    color: var(--gb-fg3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-body::-webkit-scrollbar-track { background: var(--gb-bg-h); }
.terminal-body::-webkit-scrollbar-thumb { background: var(--gb-bg2); }
.terminal-body::-webkit-scrollbar-thumb:hover { background: var(--gb-bg3); }

.terminal-prompt {
    color: var(--gb-blue-b);
    margin-bottom: 0.4rem;
}

.prompt-user { color: var(--gb-yellow); font-weight: 600; }
.prompt-host { color: var(--gb-purple-b); font-weight: 600; }
.prompt-path { color: var(--text-secondary); }
.prompt-symbol { color: var(--text-primary); }

.terminal-line { margin-bottom: 0.1rem; }
.terminal-line.info { color: var(--gb-blue-b); }
.terminal-line.success { color: var(--gb-blue-b); }
.terminal-line.warning { color: var(--gb-orange-b); }
.terminal-line.error { color: var(--gb-red-b); }
.terminal-line.debug { color: var(--gb-fg4); }

.terminal-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}

.loading-spinner {
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Task Info Panel */
.task-info-panel {
    background-color: var(--gb-bg);
    border-top: 1px solid var(--gb-bg1);
    padding: 1rem 1.25rem;
}

.task-info-panel h3 {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem 0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background-color: var(--gb-bg);
    padding: 0.75rem 1rem;
}

.info-item label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.info-item code, .info-item span {
    color: var(--gb-blue-b);
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 1024px) {
    .task-detail-container { height: calc(100vh - 150px); gap: 1rem; }
    .task-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
    .task-controls { flex-wrap: wrap; }
    .info-grid { grid-template-columns: 1fr 1fr; }
    .terminal-status { flex-direction: column; gap: 0.2rem; }
}
</style>
{% endblock %}
{% block title %}Task Queue{% endblock %}

{% block content %}
<div class="task-detail-container">
    <!-- Task Header -->
    <div class="task-header">
        <div class="task-info">
            <h1 class="task-title">{{ task.name }}</h1>
            <div class="task-meta">
                <span class="task-target">{{ task.target }}</span>
                <span class="task-duration" id="task-duration"><span id="duration-text">Calculating...</span></span>
                <span class="task-status" id="task-status">Running</span>
            </div>
        </div>
        <div class="task-controls">
            <button id="auto-scroll-toggle" class="btn btn-secondary">Auto-scroll: ON</button>
            <button id="clear-terminal" class="btn btn-secondary">Clear</button>
            <button id="kill-task" class="btn btn-danger" onclick="killTask('{{ task.id }}', '{{ task.name }}')">Kill Task</button>
        </div>
    </div>

    <!-- Terminal Container -->
    <div class="terminal-container">
        <div class="terminal-header">
            <div class="terminal-title">{{ task.name }} @ {{ task.target }}</div>
            <div class="terminal-status">
                <span id="connection-status">Connected</span>
                <span id="line-count">Lines: 0</span>
            </div>
        </div>
        
        <div class="terminal-body" id="terminal-output">
            <!-- Real-time output will be appended here -->
        </div>
    </div>

    <!-- Task Information Panel -->
    <div class="task-info-panel">
        <div class="info-section">
            <h3>Task Information</h3>
            <div class="info-grid">
                <div class="info-item">
                    <label>Task ID:</label>
                    <code>{{ task.id }}</code>
                </div>
                <div class="info-item">
                    <label>Task Name:</label>
                    <code>{{ task.name }}</code>
                </div>
                <div class="info-item">
                    <label>Target:</label>
                    <code>{{ task.target }}</code>
                </div>
                <div class="info-item">
                    <label>Started:</label>
                    <code id="start-time">{{ task.start_epoch }}</code>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let websocket = null;
let autoScroll = true;
let lineCount = 0;
let taskStartTime = {{ task.start_epoch }};
let isTaskRunning = true;

// Initialize terminal interface
document.addEventListener('DOMContentLoaded', function() {
    initializeTaskDetail();
    connectWebSocket();
    startDurationCounter();
    setupEventListeners();
});

function initializeTaskDetail() {
    // Format start time
    const startTimeEl = document.getElementById('start-time');
    if (startTimeEl) {
        const date = new Date(taskStartTime * 1000);
        startTimeEl.textContent = date.toLocaleString();
    }
    
    // Load initial output
    loadInitialOutput();
}

function connectWebSocket() {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${window.location.host}/task/{{ task.id }}/stream`;
    
    websocket = new WebSocket(wsUrl);
    
    websocket.onopen = function() {
        updateConnectionStatus(true);
        console.log('WebSocket connected');
    };
    
    websocket.onmessage = function(event) {
        if (event.data === 'TASK_NOT_FOUND') {
            handleTaskNotFound();
            return;
        }
        
        if (event.data === 'TASK_COMPLETE') {
            handleTaskComplete();
            return;
        }
        
        appendTerminalLine(event.data);
    };
    
    websocket.onclose = function() {
        updateConnectionStatus(false);
        console.log('WebSocket disconnected');
        
        // Attempt to reconnect after 3 seconds
        setTimeout(() => {
            if (isTaskRunning) {
                connectWebSocket();
            }
        }, 3000);
    };
    
    websocket.onerror = function(error) {
        console.error('WebSocket error:', error);
        updateConnectionStatus(false);
    };
}

function loadInitialOutput() {
    fetch(`/api/task/{{ task.id }}/output`)
        .then(response => response.json())
        .then(data => {
            if (data.output) {
                const lines = data.output.split('\n');
                lines.forEach(line => {
                    if (line.trim()) {
                        appendTerminalLine(line, false);
                    }
                });
                lineCount = data.line_count || lines.length;
                updateLineCount();
            }
        })
        .catch(error => {
            console.error('Failed to load initial output:', error);
            appendTerminalLine('[ERROR] Failed to load task output', false);
        });
}

function appendTerminalLine(text, shouldScroll = true) {
    const terminal = document.getElementById('terminal-output');
    const line = document.createElement('div');
    line.className = 'terminal-line';
    
    // Apply line styling based on content
    if (text.includes('[INFO]')) {
        line.classList.add('info');
    } else if (text.includes('[SUCCESS]') || text.includes('[OK]')) {
        line.classList.add('success');
    } else if (text.includes('[WARNING]') || text.includes('[WARN]')) {
        line.classList.add('warning');
    } else if (text.includes('[ERROR]') || text.includes('[FAIL]')) {
        line.classList.add('error');
    } else if (text.includes('[DEBUG]')) {
        line.classList.add('debug');
    }
    
    line.textContent = text;
    terminal.appendChild(line);
    
    lineCount++;
    updateLineCount();
    
    // Auto-scroll if enabled
    if (autoScroll && shouldScroll) {
        terminal.scrollTop = terminal.scrollHeight;
    }
}

function updateConnectionStatus(connected) {
    const statusEl = document.getElementById('connection-status');
    if (connected) {
        statusEl.textContent = 'Connected';
        statusEl.className = 'connected';
    } else {
        statusEl.textContent = 'Disconnected';
        statusEl.className = 'disconnected';
    }
}

function updateLineCount() {
    const lineCountEl = document.getElementById('line-count');
    if (lineCountEl) {
        lineCountEl.textContent = `Lines: ${lineCount}`;
    }
}

function startDurationCounter() {
    function updateDuration() {
        const now = Math.floor(Date.now() / 1000);
        const duration = now - taskStartTime;
        
        const hours = Math.floor(duration / 3600);
        const minutes = Math.floor((duration % 3600) / 60);
        const seconds = duration % 60;
        
        let durationText = '';
        if (hours > 0) {
            durationText = `${hours}h ${minutes}m ${seconds}s`;
        } else if (minutes > 0) {
            durationText = `${minutes}m ${seconds}s`;
        } else {
            durationText = `${seconds}s`;
        }
        
        const durationEl = document.getElementById('duration-text');
        if (durationEl) {
            durationEl.textContent = durationText;
        }
    }
    
    updateDuration();
    setInterval(updateDuration, 1000);
}

function setupEventListeners() {
    // Auto-scroll toggle
    document.getElementById('auto-scroll-toggle').addEventListener('click', function() {
        autoScroll = !autoScroll;
        this.textContent = autoScroll ? 'Auto-scroll: ON' : 'Auto-scroll: OFF';
        this.classList.toggle('active', autoScroll);
        
        if (autoScroll) {
            const terminal = document.getElementById('terminal-output');
            terminal.scrollTop = terminal.scrollHeight;
        }
    });
    
    // Clear terminal
    document.getElementById('clear-terminal').addEventListener('click', function() {
        const terminal = document.getElementById('terminal-output');
        // Keep only the prompt
        const prompt = terminal.querySelector('.terminal-prompt');
        terminal.innerHTML = '';
        if (prompt) {
            terminal.appendChild(prompt);
        }
        lineCount = 0;
        updateLineCount();
    });
    
    // Manual scroll detection
    const terminal = document.getElementById('terminal-output');
    terminal.addEventListener('scroll', function() {
        const isAtBottom = terminal.scrollTop + terminal.clientHeight >= terminal.scrollHeight - 10;
        if (!isAtBottom && autoScroll) {
            // User scrolled up, disable auto-scroll
            autoScroll = false;
            const toggleBtn = document.getElementById('auto-scroll-toggle');
            toggleBtn.textContent = 'Auto-scroll: OFF';
            toggleBtn.classList.remove('active');
        }
    });
    
    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl+C to kill task
        if (e.ctrlKey && e.key === 'c' && isTaskRunning) {
            e.preventDefault();
            killTask('{{ task.id }}', '{{ task.name }}');
        }
        
        // Space to toggle auto-scroll
        if (e.code === 'Space' && e.target === document.body) {
            e.preventDefault();
            document.getElementById('auto-scroll-toggle').click();
        }
        
        // Escape to go back
        if (e.key === 'Escape') {
            window.history.back();
        }
    });
}

function handleTaskNotFound() {
    appendTerminalLine('[SYSTEM] Task not found or has been removed');
    updateTaskStatus('Not Found', false);
    isTaskRunning = false;
}

function handleTaskComplete() {
    appendTerminalLine('[SYSTEM] Task completed');
    updateTaskStatus('Completed', false);
    isTaskRunning = false;
    
    // Hide kill button
    const killBtn = document.getElementById('kill-task');
    if (killBtn) {
        killBtn.style.display = 'none';
    }
}

function updateTaskStatus(status, running) {
    const statusEl = document.getElementById('task-status');
    if (statusEl) {
        const icon = running ? '...' : 'Done';
        statusEl.textContent = `${icon} ${status}`;
    }
    isTaskRunning = running;
}

// Kill task function (reuse existing implementation)
async function killTask(taskId, taskName) {
    if (!confirm(`Kill task "${taskName}"?`)) {
        return;
    }
    
    try {
        const response = await fetch(`/api/kill-task/${taskId}`, {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (data.success) {
            appendTerminalLine(`[SYSTEM] Task "${taskName}" killed by user`);
            updateTaskStatus('Killed', false);
            isTaskRunning = false;
            
            // Hide kill button
            document.getElementById('kill-task').style.display = 'none';
            
            if (window.ROFMAD?.showNotification) {
                window.ROFMAD.showNotification(data.message, 'success');
            }
        } else {
            appendTerminalLine(`[ERROR] Failed to kill task: ${data.message || 'Unknown error'}`);
        }
    } catch (error) {
        console.error('Error killing task:', error);
        appendTerminalLine(`[ERROR] Failed to kill task: ${error.message}`);
    }
}

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    if (websocket) {
        websocket.close();
    }
});
</script>
{% endblock %}