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

{% block content %}
<h1 class="text-2xl font-bold mb-6 text-ink-900">Event History</h1>

<!-- Partition filter: toggle buttons -->
<div class="mb-4">
    <label class="block text-xs text-gray-400 mb-2">Partitions (click to toggle)</label>
    <div id="partition-toggles" class="flex flex-wrap gap-1">
    </div>
</div>

<!-- Event type filter: checkboxes -->
<div class="mb-4">
    <label class="block text-xs text-gray-400 mb-2">Event types</label>
    <div class="flex flex-wrap gap-3">
        {% for et in ['consumed', 'arranged', 'task_started', 'task_completed', 'task_failed', 'task_complete', 'message_complete', 'window_complete', 'produced', 'committed'] %}
        <label class="flex items-center gap-1 text-sm cursor-pointer">
            <input type="checkbox" class="evt-cb" value="{{ et }}" checked onchange="applyFilters()">
            <span class="{% if et == 'task_completed' %}text-emerald-600{% elif et == 'task_failed' %}text-red-600{% elif et == 'task_started' %}text-amber-600{% elif et == 'task_complete' %}text-purple-600{% elif et == 'message_complete' %}text-purple-500{% elif et == 'window_complete' %}text-purple-400{% elif et == 'arranged' %}text-teal-600{% else %}text-gray-500{% endif %}">{{ et }}</span>
        </label>
        {% endfor %}
    </div>
</div>

<div class="flex gap-3 mb-4">
    <button onclick="applyFilters()" class="bg-teal-600 hover:bg-teal-500 text-white px-4 py-1.5 rounded text-sm">Apply</button>
    <button onclick="resetAll()" class="bg-cream-200 hover:bg-cream-300 px-4 py-1.5 rounded text-sm text-ink-700">Reset</button>
    <span id="row-count" class="text-xs text-gray-400 self-center ml-2"></span>
</div>

<table class="w-full text-sm">
    <thead>
        <tr class="text-left text-gray-400 border-b border-cream-200">
            <th class="py-2 px-3">Time</th>
            <th class="py-2 px-3">Event</th>
            <th class="py-2 px-3">Partition</th>
            <th class="py-2 px-3">Offset</th>
            <th class="py-2 px-3">Task ID</th>
            <th class="py-2 px-3">Duration</th>
            <th class="py-2 px-3">Exit</th>
            <th class="py-2 px-3">Args / Metadata</th>
        </tr>
    </thead>
    <tbody id="events-body">
    </tbody>
</table>

<script>
var MAX_ROWS = {{ max_ui_rows }};
var workerPartitions = {{ partitions | tojson }};
var maxEventId = 0;
var knownPartitions = new Set();
var selectedPartitions = new Set();

// Kafka-UI deep-link helpers (``makeKafkaUiIcon``, ``buildKafkaUiUrl``,
// ``KAFKA_UI_BASE``, ``KAFKA_UI_CLUSTER``, ``KAFKA_SOURCE_TOPIC``,
// ``KAFKA_SVG_PATH``) live in base.html so every page shares a single
// definition.

function getSelectedTypes() {
    return Array.from(document.querySelectorAll('.evt-cb:checked')).map(function(cb) { return cb.value; });
}

function fmtTime(ts) {
    if (!ts) return '';
    return new Date(ts * 1000).toISOString().substring(11, 19);
}
function fmtTimeMs(ts) {
    if (!ts) return '';
    return new Date(ts * 1000).toISOString().substring(11, 23);
}

var evtColors = {
    consumed:'text-blue-600', arranged:'text-teal-600', task_started:'text-amber-600',
    task_completed:'text-emerald-600', task_failed:'text-red-600',
    task_complete:'text-purple-600', message_complete:'text-purple-500', window_complete:'text-purple-400',
    produced:'text-purple-500', committed:'text-gray-500'
};

function createRow(e) {
    var tr = document.createElement('tr');
    tr.className = 'border-b border-cream-100 hover:bg-cream-100';

    var tdTime = document.createElement('td');
    tdTime.className = 'py-2 px-3 text-gray-400 text-xs whitespace-nowrap';
    tdTime.textContent = fmtTime(e.ts); tdTime.title = fmtTimeMs(e.ts);
    tr.appendChild(tdTime);

    var tdEvt = document.createElement('td');
    tdEvt.className = 'py-2 px-3';
    var evtSpan = document.createElement('span');
    evtSpan.className = evtColors[e.event] || '';
    evtSpan.textContent = e.event;
    tdEvt.appendChild(evtSpan); tr.appendChild(tdEvt);

    var tdPart = document.createElement('td');
    tdPart.className = 'py-2 px-3 font-mono';
    if (e.partition !== null && e.partition !== undefined) {
        var a = document.createElement('a');
        a.href = '/partitions/' + e.partition;
        a.className = 'text-teal-600 hover:underline'; a.textContent = e.partition;
        tdPart.appendChild(a);
    }
    tr.appendChild(tdPart);

    var tdOff = document.createElement('td');
    tdOff.className = 'py-2 px-3 font-mono';
    if (e.offset !== null && e.offset !== undefined && e.partition !== null) {
        var a2 = document.createElement('a');
        a2.href = '/live#trace/' + e.partition + '/' + e.offset;
        a2.className = 'text-teal-600 hover:underline'; a2.textContent = e.offset;
        tdOff.appendChild(a2);
        var kIcon = makeKafkaUiIcon(KAFKA_SOURCE_TOPIC, e.partition, e.offset);
        if (kIcon) tdOff.appendChild(kIcon);
    }
    tr.appendChild(tdOff);

    var tdTask = document.createElement('td');
    tdTask.className = 'py-2 px-3 font-mono text-xs';
    if (e.task_id) {
        var a3 = document.createElement('a');
        a3.href = '/task/' + e.task_id;
        a3.className = 'text-teal-600 hover:underline'; a3.textContent = e.task_id;
        tdTask.appendChild(a3);
    }
    tr.appendChild(tdTask);

    var tdDur = document.createElement('td');
    tdDur.className = 'py-2 px-3 font-mono';
    tdDur.textContent = e.duration != null ? e.duration.toFixed(2) + 's' : '';
    tr.appendChild(tdDur);

    var tdExit = document.createElement('td');
    tdExit.className = 'py-2 px-3 font-mono' + (e.exit_code && e.exit_code !== 0 ? ' text-red-600' : '');
    tdExit.textContent = e.exit_code != null ? e.exit_code : '';
    tr.appendChild(tdExit);

    var tdArgs = document.createElement('td');
    tdArgs.className = 'py-2 px-3 text-xs text-gray-500 max-w-xs truncate expandable cursor-pointer';
    tdArgs.title = 'Click to expand';
    tdArgs.textContent = e.args || e.metadata || '';
    tr.appendChild(tdArgs);

    return tr;
}

function updatePartitionToggles() {
    var container = document.getElementById('partition-toggles');
    var sorted = Array.from(knownPartitions).sort(function(a,b) { return a-b; });
    container.replaceChildren();
    for (var i = 0; i < sorted.length; i++) {
        var p = sorted[i];
        var btn = document.createElement('button');
        btn.type = 'button'; btn.textContent = p;
        if (selectedPartitions.has(p)) {
            btn.style.cssText = 'padding:4px 12px;border-radius:4px;font-size:13px;font-family:monospace;font-weight:bold;background:#0d9488;color:#fff;border:1px solid #14b8a6;';
        } else {
            btn.style.cssText = 'padding:4px 12px;border-radius:4px;font-size:13px;font-family:monospace;background:#f5f3ee;color:#6b7280;border:1px solid #ddd9ce;';
        }
        (function(pid) {
            btn.onclick = function() {
                if (selectedPartitions.has(pid)) selectedPartitions.delete(pid);
                else selectedPartitions.add(pid);
                updatePartitionToggles();
                applyFilters();
            };
        })(p);
        container.appendChild(btn);
    }
}

async function fetchEvents() {
    var types = getSelectedTypes();
    var parts = selectedPartitions.size > 0 ? Array.from(selectedPartitions).join(',') : '';
    var url = '/api/events?limit=' + MAX_ROWS + '&after_id=' + maxEventId
        + (types.length < 8 ? '&event_types=' + types.join(',') : '')
        + (parts ? '&partitions=' + parts : '');

    var r = await fetch(url);
    var events = await r.json();
    if (!events.length) return;

    var body = document.getElementById('events-body');
    var reversed = events.slice().reverse();
    for (var i = 0; i < reversed.length; i++) {
        var e = reversed[i];
        if (e.id > maxEventId) maxEventId = e.id;
        if (e.partition !== null) knownPartitions.add(e.partition);
        body.insertBefore(createRow(e), body.firstChild);
    }
    while (body.children.length > MAX_ROWS) body.removeChild(body.lastChild);
    document.getElementById('row-count').textContent = body.children.length + ' rows';
    updatePartitionToggles();
}

function applyFilters() {
    maxEventId = 0;
    document.getElementById('events-body').replaceChildren();
    fetchEvents();
}

function resetAll() {
    selectedPartitions.clear();
    document.querySelectorAll('.evt-cb').forEach(function(cb) { cb.checked = true; });
    updatePartitionToggles();
    applyFilters();
}

for (var i = 0; i < workerPartitions.length; i++) {
    knownPartitions.add(workerPartitions[i]);
}
updatePartitionToggles();
fetchEvents();
</script>
{% endblock %}