{% extends "dashboard/base.html" %}

{% block title %}Logs - Cyborg Dashboard{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-3xl font-bold mb-2">
            <span class="neon-text">System</span> Logs
        </h1>
        <p class="text-text-secondary">Structured log viewer for recorded events</p>
    </div>
    <div class="flex items-center gap-3">
        <label class="flex items-center gap-2 text-sm text-text-secondary">
            <input type="checkbox" id="auto-scroll" checked class="accent-accent-cyan">
            Auto-scroll
        </label>
        <button onclick="clearLogs()" class="px-4 py-2 bg-bg-card border border-accent-cyan/20 rounded-lg hover:border-accent-cyan/40 transition-colors text-sm">
            Clear Display
        </button>
    </div>
</div>

<!-- Filters -->
<div class="glass-card neon-border rounded-xl p-4 mb-6">
    <div class="flex flex-wrap items-center gap-4">
        <div class="flex items-center gap-2">
            <span class="text-text-secondary text-sm">Level:</span>
            <select id="filter-level" onchange="filterLogs()" class="bg-bg-card border border-accent-cyan/20 rounded-lg px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:border-accent-cyan/50">
                <option value="">All</option>
                <option value="ERROR">Error</option>
                <option value="WARNING">Warning</option>
                <option value="INFO">Info</option>
                <option value="DEBUG">Debug</option>
            </select>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-text-secondary text-sm">Event Type:</span>
            <select id="filter-event" onchange="filterLogs()" class="bg-bg-card border border-accent-cyan/20 rounded-lg px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:border-accent-cyan/50">
                <option value="">All</option>
                <option value="reasoning_request">Reasoning</option>
                <option value="autonomy_decision">Autonomy</option>
                <option value="health_check">Health</option>
                <option value="function_call">Function</option>
                <option value="function_error">Errors</option>
            </select>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-text-secondary text-sm">Project:</span>
            <input type="text" id="filter-project" placeholder="Project ID" onkeyup="filterLogs()"
                   class="bg-bg-card border border-accent-cyan/20 rounded-lg px-3 py-1.5 text-sm text-text-primary placeholder-text-muted focus:outline-none focus:border-accent-cyan/50 w-40">
        </div>
        <div class="flex items-center gap-2">
            <span class="text-text-secondary text-sm">Search:</span>
            <input type="text" id="filter-search" placeholder="Search logs..." onkeyup="filterLogs()"
                   class="bg-bg-card border border-accent-cyan/20 rounded-lg px-3 py-1.5 text-sm text-text-primary placeholder-text-muted focus:outline-none focus:border-accent-cyan/50 w-48">
        </div>
        <div class="flex-1"></div>
        <div class="text-text-secondary text-sm">
            Showing <span id="visible-count">{{ logs|length }}</span> of <span id="total-count">{{ logs|length }}</span> logs
        </div>
    </div>
</div>

<!-- Stats Bar -->
<div class="flex flex-wrap gap-3 mb-4">
    <div class="px-3 py-1.5 bg-bg-card rounded-lg text-sm">
        <span class="text-text-muted">ERROR:</span>
        <span class="text-accent-red font-mono-data ml-1">{{ stats.error }}</span>
    </div>
    <div class="px-3 py-1.5 bg-bg-card rounded-lg text-sm">
        <span class="text-text-muted">WARNING:</span>
        <span class="text-accent-orange font-mono-data ml-1">{{ stats.warning }}</span>
    </div>
    <div class="px-3 py-1.5 bg-bg-card rounded-lg text-sm">
        <span class="text-text-muted">INFO:</span>
        <span class="text-accent-cyan font-mono-data ml-1">{{ stats.info }}</span>
    </div>
    <div class="px-3 py-1.5 bg-bg-card rounded-lg text-sm">
        <span class="text-text-muted">Reasoning:</span>
        <span class="text-accent-purple font-mono-data ml-1">{{ stats.reasoning }}</span>
    </div>
</div>

<!-- Log Entries -->
<div id="log-container" class="glass-card neon-border rounded-xl overflow-hidden" style="max-height: 600px;">
    <div id="log-entries" class="overflow-y-auto p-4 space-y-2" style="height: 550px;">
        {% for log in logs %}
        <div class="log-entry p-3 rounded-lg bg-bg-card/50 font-mono-data text-sm
                    data-level="{{ log.level }}"
                    data-event-type="{{ log.event_type or '' }}"
                    data-project-id="{{ log.project_id or '' }}"
                    data-message="{{ log.message | lower }}"
                    {% if log.level == 'ERROR' %}error{% elif log.level == 'WARNING' %}warning{% elif log.event_type == 'reasoning_request' %}info{% endif %}">
            <div class="flex items-start gap-3">
                <span class="text-text-muted flex-shrink-0">{{ log.timestamp }}</span>
                <span class="flex-shrink-0 w-16 text-center">
                    {% if log.level == 'ERROR' %}
                    <span class="text-accent-red">ERROR</span>
                    {% elif log.level == 'WARNING' %}
                    <span class="text-accent-orange">WARN</span>
                    {% elif log.level == 'INFO' %}
                    <span class="text-accent-cyan">INFO</span>
                    {% else %}
                    <span class="text-text-muted">DEBUG</span>
                    {% endif %}
                </span>
                <span class="flex-shrink-0 w-40 text-accent-purple truncate" title="{{ log.logger }}">
                    {{ log.logger|replace('cyborg.', '')|truncate(20) }}
                </span>
                <span class="flex-1 text-text-primary">{{ log.message }}</span>

                {% if log.event_type %}
                <span class="flex-shrink-0 text-xs px-2 py-0.5 rounded bg-bg-elevated text-accent-cyan">
                    {{ log.event_type }}
                </span>
                {% endif %}

                {% if log.project_id %}
                <a href="/dashboard/projects/{{ log.project_id }}" class="flex-shrink-0 text-xs text-accent-cyan hover:underline">
                    {{ log.project_id[:8] }}
                </a>
                {% endif %}

                {% if log.duration_seconds %}
                <span class="flex-shrink-0 text-xs text-text-muted">
                    {{ log.duration_seconds }}s
                </span>
                {% endif %}
            </div>

            {% if log.extra_data %}
            <details class="mt-2 pl-4">
                <summary class="text-xs text-text-muted cursor-pointer hover:text-text-secondary">
                    View details
                </summary>
                <pre class="mt-2 text-xs text-text-secondary overflow-x-auto bg-bg-deep p-2 rounded">{{ log.extra_data }}</pre>
            </details>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const logContainer = document.getElementById('log-entries');
const autoScrollCheckbox = document.getElementById('auto-scroll');

function filterLogs() {
    const level = document.getElementById('filter-level').value;
    const eventType = document.getElementById('filter-event').value;
    const projectId = document.getElementById('filter-project').value.toLowerCase();
    const search = document.getElementById('filter-search').value.toLowerCase();

    const entries = document.querySelectorAll('.log-entry');
    let visibleCount = 0;

    entries.forEach(entry => {
        const entryLevel = entry.dataset.level;
        const entryEventType = entry.dataset.eventType;
        const entryProjectId = entry.dataset.projectId;
        const entryMessage = entry.dataset.message;

        let show = true;

        if (level && entryLevel !== level) show = false;
        if (eventType && entryEventType !== eventType) show = false;
        if (projectId && !entryProjectId.includes(projectId)) show = false;
        if (search && !entryMessage.includes(search)) show = false;

        if (show) {
            entry.style.display = '';
            visibleCount++;
        } else {
            entry.style.display = 'none';
        }
    });

    document.getElementById('visible-count').textContent = visibleCount;
}

function clearLogs() {
    logContainer.innerHTML = '<div class="text-center text-text-muted py-8">Logs cleared. New entries will appear below.</div>';
}

// Auto-scroll to bottom when new logs arrive
function scrollToBottom() {
    if (autoScrollCheckbox.checked) {
        logContainer.scrollTop = logContainer.scrollHeight;
    }
}

// Initial scroll
scrollToBottom();

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.target.tagName === 'INPUT') return;

    if (e.key === 'c' || e.key === 'C') {
        clearLogs();
    } else if (e.key >= '1' && e.key <= '5') {
        document.getElementById('filter-level').value = ['', 'ERROR', 'WARNING', 'INFO', 'DEBUG'][parseInt(e.key)];
        filterLogs();
    }
});
</script>
{% endblock %}