{% extends "base.html" %}

{% block extra_head %}
<style>
/* Logs Page */
.logs-section { max-width: 1440px; margin: 0 auto; }

.logs-container {
    background-color: var(--gb-bg);
    border: 1px solid var(--gb-bg1);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.logs-header {
    background-color: var(--gb-bg1);
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--gb-bg2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.log-count { color: var(--text-muted); font-size: 0.78rem; }

.log-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.log-filter select {
    background-color: var(--gb-bg-h);
    border: 1px solid var(--gb-bg2);
    border-radius: 0;
    color: var(--text-primary);
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    width: auto;
}
.log-filter select:focus { outline: none; border-color: var(--gb-blue); }

.log-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.auto-refresh-controls { display: flex; align-items: center; gap: 0.5rem; }
.refresh-status { display: flex; align-items: center; font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.logs-table-container { max-height: 70vh; overflow-y: auto; }

.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
}

.logs-table th, .logs-table td {
    padding: 0.45rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--gb-bg1);
}

.logs-table th {
    background-color: var(--gb-bg1);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--gb-blue);
}

.logs-table tbody tr:hover { background-color: var(--gb-bg1) !important; }

.log-timestamp {
    color: var(--text-dim);
    font-size: 0.75rem;
    white-space: nowrap;
    width: 160px;
}

.log-level { width: 70px; }

/* Level badges */
.level-badge {
    display: inline-block;
    padding: 0.12rem 0.4rem;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border: 1px solid;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
}

.level-info    { background: rgba(104,157,106,0.18); color: var(--gb-aqua-b);   border-color: var(--gb-aqua);     }
.level-startup { background: rgba(142,192,124,0.22); color: var(--gb-aqua-b);   border-color: var(--gb-aqua-b);   font-weight: 900; }
.level-step    { background: rgba(69,133,136,0.18);  color: var(--gb-blue-b);   border-color: var(--gb-blue);     }
.level-enum    { background: rgba(69,133,136,0.12);  color: var(--gb-blue-b);   border-color: var(--gb-blue-b);   }
.level-action  { background: rgba(177,98,134,0.18);  color: var(--gb-purple-b); border-color: var(--gb-purple);   }
.level-cmd     { background: rgba(215,153,33,0.18);  color: var(--gb-yellow-b); border-color: var(--gb-yellow);   }
.level-warn    { background: rgba(214,93,14,0.18);   color: var(--gb-orange-b); border-color: var(--gb-orange);   }
.level-error   { background: rgba(204,36,29,0.22);   color: var(--gb-red-b);    border-color: var(--gb-red);      }
.level-debug   { background: var(--gb-bg2);          color: var(--text-muted);  border-color: var(--gb-bg3);      }

/* Per-level row accents */
.log-level-error   { border-left: 2px solid var(--gb-red);    background-color: rgba(204,36,29,0.04); }
.log-level-warn    { border-left: 2px solid var(--gb-orange);  background-color: rgba(214,93,14,0.04); }
.log-level-startup { border-left: 2px solid var(--gb-aqua-b); }
.log-level-action  { border-left: 2px solid var(--gb-purple);  }
.log-level-cmd     { border-left: 2px solid var(--gb-yellow);  }
.log-level-step    { border-left: 2px solid var(--gb-blue);    }
.log-level-enum    { border-left: 2px solid var(--gb-blue-b);  }
.log-level-info    { border-left: 2px solid var(--gb-aqua);    }
.log-level-debug   { border-left: 2px solid var(--gb-bg3);     }

.log-message {
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
    font-size: 0.78rem;
}

.new-entry { background-color: rgba(69,133,136,0.08); }

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--gb-blue);
    margin-right: 0.35rem;
}

.no-data-container { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.82rem; }

/* Tab bar */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--gb-blue);
    margin-bottom: 1.25rem;
}
.tab-btn {
    background: var(--gb-bg1);
    border: 1px solid var(--gb-bg2);
    border-bottom: none;
    color: var(--text-muted);
    padding: 0.45rem 1.25rem;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    transition: background 0.1s;
}
.tab-btn:hover { background: var(--gb-bg2); color: var(--text-primary); }
.tab-btn.active { background: var(--gb-bg); color: var(--gb-blue-b); border-color: var(--gb-blue); border-bottom: 2px solid var(--gb-bg); margin-bottom: -2px; }

/* History panel */
.history-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.history-search {
    background-color: var(--gb-bg-h);
    border: 1px solid var(--gb-bg2);
    color: var(--text-primary);
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    width: 360px;
    max-width: 100%;
}
.history-search:focus { outline: none; border-color: var(--gb-blue); }

.history-table tbody tr { cursor: pointer; }
.history-table tbody tr:hover { background-color: var(--gb-bg1) !important; }

.hist-status-completed { color: var(--gb-blue-b); }
.hist-status-timeout   { color: var(--gb-orange-b); }
.hist-status-cancelled { color: var(--text-muted); }

@media (max-width: 768px) {
    .log-controls { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .logs-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .logs-table th, .logs-table td { padding: 0.4rem 0.5rem; font-size: 0.72rem; }
    .log-timestamp { width: 100px; font-size: 0.65rem; }
}

@media (max-width: 480px) {
    .logs-table-container { overflow-x: auto; }
    .logs-table { min-width: 560px; }
}
</style>
{% endblock %}
{% block title %}System Logs{% endblock %}

{% block content %}
<div class="logs-section">
    <div class="section-header">
        <h1>System Logs</h1>
    </div>

    <div class="tab-bar">
        <button class="tab-btn active" id="tab-live" onclick="switchTab('live')">Live Logs</button>
        <button class="tab-btn" id="tab-history" onclick="switchTab('history')">Task History</button>
    </div>

    <!-- ── Live Logs panel ───────────────────────────────────────────── -->
    <div id="live-panel">
        <div class="log-controls">
            <form method="get" action="/logs" class="log-filter" id="logFilterForm">
                <label for="level-select">Filter:</label>
                <select name="level" id="level-select">
                    <option value="">All Levels</option>
                    <option value="INFO"    {% if selected_level == "INFO"    %}selected{% endif %}>INFO</option>
                    <option value="WARN"    {% if selected_level == "WARN"    %}selected{% endif %}>WARN</option>
                    <option value="ERROR"   {% if selected_level == "ERROR"   %}selected{% endif %}>ERROR</option>
                    <option value="DEBUG"   {% if selected_level == "DEBUG"   %}selected{% endif %}>DEBUG</option>
                    <option value="ENUM"    {% if selected_level == "ENUM"    %}selected{% endif %}>ENUM</option>
                    <option value="STEP"    {% if selected_level == "STEP"    %}selected{% endif %}>STEP</option>
                    <option value="CMD"     {% if selected_level == "CMD"     %}selected{% endif %}>CMD</option>
                    <option value="ACTION"  {% if selected_level == "ACTION"  %}selected{% endif %}>ACTION</option>
                    <option value="STARTUP" {% if selected_level == "STARTUP" %}selected{% endif %}>STARTUP</option>
                </select>
                <button type="submit" class="btn btn-secondary">Apply</button>
                {% if selected_level != "" %}
                    <a href="/logs" class="btn btn-secondary">Clear</a>
                {% endif %}
            </form>
            <div class="auto-refresh-controls">
                <button id="refreshToggle" class="btn btn-primary" onclick="toggleAutoRefresh()">
                    Auto-Refresh: <span id="refreshStatus">ON</span>
                </button>
                <div class="refresh-status">
                    <span id="connectionStatus" class="status-dot connected"></span>
                    <span id="lastUpdateTime"></span>
                </div>
            </div>
        </div>

        {% if logs.len() > 0 %}
        <div class="logs-container">
            <div class="logs-header">
                <span class="log-count">
                    <span id="logCount">{{ logs.len() }}</span> entries
                    {% if selected_level != "" %} · filtered by {{ selected_level }}{% endif %}
                </span>
                <span id="newLogsIndicator" style="display:none;font-size:0.72rem;color:var(--gb-blue-b);font-family:'JetBrains Mono',monospace;">↑ new logs</span>
            </div>
            <div class="logs-table-container" id="logsTableContainer">
                <table class="logs-table">
                    <thead>
                        <tr>
                            <th>Timestamp</th>
                            <th>Level</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody id="logsTableBody">
                        {% for log in logs %}
                        <tr class="log-entry log-level-{{ log.level|lower }}">
                            <td class="log-timestamp">{{ log.timestamp }}</td>
                            <td class="log-level">
                                <span class="level-badge level-{{ log.level|lower }}">{{ log.level }}</span>
                            </td>
                            <td class="log-message">{{ log.message }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% else %}
        <div class="no-data-container" id="noDataContainer">
            <p>{% if selected_level != "" %}No {{ selected_level }} entries found.{% else %}No log entries yet.{% endif %}</p>
        </div>
        {% endif %}
    </div><!-- /#live-panel -->

    <!-- ── Task History panel ────────────────────────────────────────── -->
    <div id="history-panel" style="display:none">
        <div class="history-header">
            <input type="text" id="historySearch" class="history-search"
                   placeholder="Search by task, target, or status…"
                   oninput="debouncedFetchHistory()">
        </div>
        <div class="logs-container">
            <table class="logs-table history-table">
                <thead>
                    <tr>
                        <th>Task</th>
                        <th>Target</th>
                        <th>Started</th>
                        <th>Duration</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="historyTableBody">
                    <tr><td colspan="5" class="no-data-container">Loading…</td></tr>
                </tbody>
            </table>
        </div>
    </div><!-- /#history-panel -->
</div>

<script>
// ── Shared ────────────────────────────────────────────────────────────
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// ── Tab switching ─────────────────────────────────────────────────────
function switchTab(tab) {
    const isLive = tab === 'live';
    document.getElementById('live-panel').style.display    = isLive ? '' : 'none';
    document.getElementById('history-panel').style.display = isLive ? 'none' : '';
    document.getElementById('tab-live').classList.toggle('active', isLive);
    document.getElementById('tab-history').classList.toggle('active', !isLive);
    if (!isLive) fetchHistory();
}

// ── Live Logs auto-refresh ────────────────────────────────────────────
let autoRefreshEnabled = true;
let autoRefreshInterval = null;
let lastTimestamp = '';
let currentLevel = '{{ selected_level }}';

document.addEventListener('DOMContentLoaded', function() {
    const timestamps = document.querySelectorAll('.log-timestamp');
    if (timestamps.length > 0) lastTimestamp = timestamps[0].textContent.trim();
    startAutoRefresh();
    updateLastUpdateTime();

    const levelSelect = document.getElementById('level-select');
    if (levelSelect) {
        levelSelect.addEventListener('change', function() {
            currentLevel = this.value;
            lastTimestamp = '';
            document.getElementById('logFilterForm').submit();
        });
    }
});

function startAutoRefresh() {
    clearInterval(autoRefreshInterval);
    if (autoRefreshEnabled) {
        autoRefreshInterval = setInterval(fetchNewLogs, 5000);
        updateConnectionStatus(true);
    }
}

function stopAutoRefresh() {
    clearInterval(autoRefreshInterval);
    autoRefreshInterval = null;
    updateConnectionStatus(false);
}

function toggleAutoRefresh() {
    autoRefreshEnabled = !autoRefreshEnabled;
    document.getElementById('refreshStatus').textContent = autoRefreshEnabled ? 'ON' : 'OFF';
    document.getElementById('refreshToggle').className = autoRefreshEnabled ? 'btn btn-primary' : 'btn btn-secondary';
    autoRefreshEnabled ? startAutoRefresh() : stopAutoRefresh();
}

async function fetchNewLogs() {
    try {
        const params = new URLSearchParams();
        if (currentLevel) params.append('level', currentLevel);
        if (lastTimestamp) params.append('since', lastTimestamp);
        const response = await fetch('/api/logs?' + params.toString());
        if (!response.ok) throw new Error('HTTP ' + response.status);
        const data = await response.json();
        updateConnectionStatus(true);
        if (data.logs && data.logs.length > 0) {
            appendNewLogs(data.logs);
            lastTimestamp = data.logs[0].timestamp;
        }
        updateLastUpdateTime();
    } catch (e) {
        updateConnectionStatus(false);
    }
}

function appendNewLogs(logs) {
    const tbody = document.getElementById('logsTableBody');
    if (!tbody) { location.reload(); return; }
    logs.forEach(log => {
        const row = document.createElement('tr');
        row.className = `log-entry log-level-${log.level.toLowerCase()} new-entry`;
        row.innerHTML = `
            <td class="log-timestamp">${log.timestamp}</td>
            <td class="log-level"><span class="level-badge level-${log.level.toLowerCase()}">${log.level}</span></td>
            <td class="log-message">${escapeHtml(log.message)}</td>`;
        tbody.insertBefore(row, tbody.firstChild);
    });
    const cnt = document.getElementById('logCount');
    if (cnt) cnt.textContent = parseInt(cnt.textContent || 0) + logs.length;
    const ind = document.getElementById('newLogsIndicator');
    if (ind) { ind.style.display = 'inline'; setTimeout(() => ind.style.display = 'none', 3000); }
    setTimeout(() => document.querySelectorAll('.new-entry').forEach(r => r.classList.remove('new-entry')), 3000);
}

function updateConnectionStatus(ok) {
    const dot = document.getElementById('connectionStatus');
    if (dot) dot.className = ok ? 'status-dot connected' : 'status-dot disconnected';
}

function updateLastUpdateTime() {
    const el = document.getElementById('lastUpdateTime');
    if (el) el.textContent = new Date().toLocaleTimeString();
}

window.addEventListener('beforeunload', stopAutoRefresh);
document.addEventListener('visibilitychange', () => {
    document.visibilityState === 'visible' && autoRefreshEnabled ? startAutoRefresh() : stopAutoRefresh();
});

// ── Task History ──────────────────────────────────────────────────────
let historyDebounceTimer = null;

function debouncedFetchHistory() {
    clearTimeout(historyDebounceTimer);
    historyDebounceTimer = setTimeout(fetchHistory, 300);
}

function formatDuration(s) {
    return s < 60 ? s + 's' : Math.floor(s / 60) + 'm ' + (s % 60) + 's';
}

async function fetchHistory() {
    const search = (document.getElementById('historySearch') || {}).value || '';
    const tbody = document.getElementById('historyTableBody');
    if (!tbody) return;
    try {
        const params = new URLSearchParams({ limit: '200' });
        if (search) params.append('search', search);
        const response = await fetch('/api/task-history?' + params.toString());
        if (!response.ok) throw new Error('HTTP ' + response.status);
        const data = await response.json();
        if (!data.tasks || data.tasks.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="no-data-container">No tasks recorded yet.</td></tr>';
            return;
        }
        tbody.innerHTML = data.tasks.map(t => {
            const dur     = formatDuration(t.ended_at - t.started_at);
            const started = new Date(t.started_at * 1000).toLocaleString();
            return `<tr onclick="window.open('/task-output/${escapeHtml(t.id)}','_blank')" title="Click to view full output">
                <td class="log-message" style="font-weight:600">${escapeHtml(t.task_name)}</td>
                <td class="log-message">${escapeHtml(t.target)}</td>
                <td class="log-timestamp">${started}</td>
                <td class="log-timestamp">${dur}</td>
                <td class="log-level"><span class="hist-status-${t.status}">${escapeHtml(t.status)}</span></td>
            </tr>`;
        }).join('');
    } catch (e) {
        tbody.innerHTML = '<tr><td colspan="5" class="no-data-container" style="color:var(--gb-red-b)">Failed to load task history.</td></tr>';
    }
}
</script>
{% endblock %}