{% extends "base.html" %}
{% block title %}Debug{% endblock %}

{% block content %}
<div class="space-y-4">
    <div class="flex items-center justify-between">
        <h1 class="text-xl font-bold text-white">Live Agent Monitor</h1>
        <div class="flex items-center gap-4">
            <span class="text-xs" id="ws-status">
                <span class="inline-block w-2 h-2 rounded-full bg-gray-600 mr-1"></span>
                <span class="text-gray-500">connecting...</span>
            </span>
            <button onclick="clearLogs()" class="text-xs px-3 py-1 bg-gray-700 text-gray-300 rounded hover:bg-gray-600">Clear</button>
            <button onclick="togglePause()" id="pause-btn" class="text-xs px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">Pause</button>
        </div>
    </div>

    <!-- Agent Status Bar -->
    <div class="flex flex-wrap gap-2" id="agent-roster">
        {% for name, info in agents_status.items() %}
        <div class="agent-chip flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs border border-gray-700 bg-gray-800/50"
             data-agent="{{ name }}">
            <span class="w-2 h-2 rounded-full {% if info.online %}bg-green-500{% else %}bg-gray-600{% endif %}"></span>
            <span class="text-gray-300">{{ name }}</span>
            <span class="task-label text-gray-600 hidden"></span>
        </div>
        {% endfor %}
    </div>

    <!-- Filters -->
    <div class="flex items-center gap-3">
        <div class="flex gap-1">
            <button onclick="setFilter('all')" class="filter-btn text-xs px-2.5 py-1 rounded bg-gray-700 text-gray-300 ring-1 ring-white/30" data-filter="all">All</button>
            <button onclick="setFilter('error')" class="filter-btn text-xs px-2.5 py-1 rounded bg-red-900/40 text-red-300" data-filter="error">Errors</button>
            <button onclick="setFilter('warning')" class="filter-btn text-xs px-2.5 py-1 rounded bg-yellow-900/40 text-yellow-300" data-filter="warning">Warnings</button>
        </div>
        <select id="agent-filter" onchange="setAgentFilter(this.value)" class="text-xs bg-gray-800 border border-gray-700 text-gray-300 rounded px-2 py-1">
            <option value="all">All agents</option>
        </select>
        <label class="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
            <input type="checkbox" id="autoscroll" checked class="rounded bg-gray-700 border-gray-600">
            Auto-scroll
        </label>
        <span class="text-xs text-gray-600 ml-auto" id="log-count">0 messages</span>
    </div>

    <!-- Log Stream -->
    <div id="log-stream" class="card rounded-lg p-3 h-[calc(100vh-280px)] overflow-y-auto font-mono text-xs bg-black/60 border border-gray-800">
        <div class="text-gray-600 text-center py-8" id="empty-state">Waiting for agent logs...</div>
    </div>
</div>

<style>
    .log-line { padding: 1px 0; display: flex; gap: 8px; }
    .log-line:hover { background: rgba(255,255,255,0.03); }
    .log-ts { color: #6B7280; white-space: nowrap; flex-shrink: 0; }
    .log-component { white-space: nowrap; flex-shrink: 0; min-width: 120px; }
    .log-msg { word-break: break-word; flex: 1; }
    .log-level-error .log-msg { color: #FCA5A5; }
    .log-level-warning .log-msg { color: #FDE047; }
    .log-level-info .log-msg { color: #D1D5DB; }
    .log-level-debug .log-msg { color: #6B7280; }
    .log-line.filtered { display: none; }
    .agent-chip.busy { border-color: #3B82F6; background: rgba(59,130,246,0.1); }
    .agent-chip .task-label { font-size: 10px; }
</style>

<script>
(function() {
    const MAX_LINES = 2000;
    const AGENT_COLORS = {};
    const COLOR_PALETTE = [
        '#60A5FA', '#34D399', '#F472B6', '#A78BFA', '#FBBF24',
        '#FB923C', '#2DD4BF', '#E879F9', '#4ADE80', '#F87171',
        '#38BDF8', '#818CF8',
    ];
    let colorIdx = 0;
    let ws = null;
    let paused = false;
    let pauseBuffer = [];
    let levelFilter = 'all';
    let agentFilter = 'all';
    let knownAgents = new Set();
    let totalMessages = 0;

    const stream = document.getElementById('log-stream');
    const emptyState = document.getElementById('empty-state');
    const logCount = document.getElementById('log-count');
    const agentSelect = document.getElementById('agent-filter');
    const wsStatusEl = document.getElementById('ws-status');

    function getAgentColor(component) {
        if (!AGENT_COLORS[component]) {
            AGENT_COLORS[component] = COLOR_PALETTE[colorIdx % COLOR_PALETTE.length];
            colorIdx++;
        }
        return AGENT_COLORS[component];
    }

    function addAgentToFilter(component) {
        if (knownAgents.has(component)) return;
        knownAgents.add(component);
        const opt = document.createElement('option');
        opt.value = component;
        opt.textContent = component;
        agentSelect.appendChild(opt);
    }

    function updateRoster(component, status, task, detail) {
        let chip = document.querySelector(`.agent-chip[data-agent="${component}"]`);
        if (!chip) {
            const roster = document.getElementById('agent-roster');
            chip = document.createElement('div');
            chip.className = 'agent-chip flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs border border-gray-700 bg-gray-800/50';
            chip.dataset.agent = component;
            chip.innerHTML = `<span class="w-2 h-2 rounded-full bg-gray-600"></span><span class="text-gray-300">${component}</span><span class="task-label text-gray-600 hidden"></span>`;
            roster.appendChild(chip);
        }

        const dot = chip.querySelector('.w-2');
        const taskLabel = chip.querySelector('.task-label');

        if (status === 'online' || status === 'idle') {
            dot.className = 'w-2 h-2 rounded-full bg-green-500';
            chip.classList.remove('busy');
            taskLabel.classList.add('hidden');
            taskLabel.textContent = '';
        } else if (status === 'busy') {
            dot.className = 'w-2 h-2 rounded-full bg-blue-500 animate-pulse';
            chip.classList.add('busy');
            if (task) {
                taskLabel.textContent = task;
                taskLabel.classList.remove('hidden');
            }
        } else if (status === 'offline') {
            dot.className = 'w-2 h-2 rounded-full bg-gray-600';
            chip.classList.remove('busy');
            taskLabel.classList.add('hidden');
        }
    }

    function appendLog(component, level, message, timestamp) {
        if (emptyState) emptyState.remove();
        totalMessages++;
        logCount.textContent = totalMessages + ' messages';
        addAgentToFilter(component);

        const line = document.createElement('div');
        line.className = 'log-line log-level-' + level.toLowerCase();
        line.dataset.level = level.toLowerCase();
        line.dataset.agent = component;

        const ts = timestamp ? new Date(timestamp).toLocaleTimeString() : new Date().toLocaleTimeString();
        const color = getAgentColor(component);

        line.innerHTML = `<span class="log-ts">${ts}</span><span class="log-component" style="color:${color}">${component}</span><span class="log-msg">${escapeHtml(message)}</span>`;

        applyFilters(line);
        stream.appendChild(line);

        // Trim old lines
        while (stream.children.length > MAX_LINES) {
            stream.removeChild(stream.firstChild);
        }

        if (document.getElementById('autoscroll').checked) {
            stream.scrollTop = stream.scrollHeight;
        }
    }

    function applyFilters(line) {
        const matchLevel = levelFilter === 'all' || line.dataset.level === levelFilter;
        const matchAgent = agentFilter === 'all' || line.dataset.agent === agentFilter;
        line.classList.toggle('filtered', !(matchLevel && matchAgent));
    }

    function refilterAll() {
        stream.querySelectorAll('.log-line').forEach(applyFilters);
    }

    window.setFilter = function(level) {
        levelFilter = level;
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('ring-1', 'ring-white/30'));
        document.querySelector(`.filter-btn[data-filter="${level}"]`).classList.add('ring-1', 'ring-white/30');
        refilterAll();
    };

    window.setAgentFilter = function(agent) {
        agentFilter = agent;
        refilterAll();
    };

    window.clearLogs = function() {
        stream.innerHTML = '';
        totalMessages = 0;
        logCount.textContent = '0 messages';
    };

    window.togglePause = function() {
        paused = !paused;
        const btn = document.getElementById('pause-btn');
        if (paused) {
            btn.textContent = 'Resume';
            btn.classList.replace('bg-blue-600', 'bg-yellow-600');
            btn.classList.replace('hover:bg-blue-700', 'hover:bg-yellow-700');
        } else {
            btn.textContent = 'Pause';
            btn.classList.replace('bg-yellow-600', 'bg-blue-600');
            btn.classList.replace('hover:bg-yellow-700', 'hover:bg-blue-700');
            pauseBuffer.forEach(fn => fn());
            pauseBuffer = [];
        }
    };

    function escapeHtml(s) {
        const d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    function setWsStatus(state) {
        const dot = wsStatusEl.querySelector('.rounded-full');
        const text = wsStatusEl.querySelector('span:last-child');
        if (state === 'connected') {
            dot.className = 'inline-block w-2 h-2 rounded-full bg-green-500';
            text.className = 'text-green-400';
            text.textContent = 'connected';
        } else if (state === 'disconnected') {
            dot.className = 'inline-block w-2 h-2 rounded-full bg-red-500';
            text.className = 'text-red-400';
            text.textContent = 'disconnected';
        } else {
            dot.className = 'inline-block w-2 h-2 rounded-full bg-yellow-500 animate-pulse';
            text.className = 'text-yellow-400';
            text.textContent = 'connecting...';
        }
    }

    function connect() {
        setWsStatus('connecting');
        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
        const url = proto + '//' + location.host + '/ws/dashboard?key={{ agent_api_key }}';
        ws = new WebSocket(url);

        ws.onopen = function() {
            setWsStatus('connected');
            appendLog('system', 'info', 'WebSocket connected — streaming live agent logs', new Date().toISOString());
        };

        ws.onmessage = function(event) {
            const msg = JSON.parse(event.data);

            if (msg.type === 'roster') {
                const agents = msg.data.agents || [];
                agents.forEach(a => {
                    updateRoster(a, 'online');
                    addAgentToFilter(a);
                });
                return;
            }

            if (msg.type === 'status') {
                const s = msg.data || {};
                updateRoster(msg.component, s.status, s.task, s.detail);
                if (s.status === 'busy' && s.task) {
                    const detail = s.detail ? ' — ' + JSON.stringify(s.detail) : '';
                    const fn = () => appendLog(msg.component, 'info', `[${s.status}] ${s.task}${detail}`, msg.timestamp);
                    paused ? pauseBuffer.push(fn) : fn();
                }
                return;
            }

            if (msg.type === 'log') {
                const d = msg.data || {};
                const fn = () => appendLog(msg.component, d.level || 'info', d.message || '', msg.timestamp);
                paused ? pauseBuffer.push(fn) : fn();
                return;
            }
        };

        ws.onclose = function() {
            setWsStatus('disconnected');
            setTimeout(connect, 3000);
        };

        ws.onerror = function() {
            ws.close();
        };
    }

    connect();
})();
</script>
{% endblock %}