{% extends "base.html" %}
{% block extra_head %}
<style>
    .tl-item { display:flex; gap:8px; align-items:baseline; }
    .tl-dot  { width:8px; height:8px; border-radius:999px; background:#94a3b8; }
</style>
{% endblock %}
{% block content %}
<h2 class="text-2xl font-semibold mb-4">Timeline</h2>

<form class="bg-white border border-slate-200 rounded p-3 flex flex-wrap gap-3 items-end mb-4"
      onsubmit="loadTimeline(event)">
    <div>
        <label class="block text-xs text-slate-500 mb-1">Type</label>
        <select id="tl-type" class="border border-slate-300 rounded px-2 py-1 text-sm">
            <option value="">all</option>
            <option value="preference">preference</option>
            <option value="fact">fact</option>
            <option value="project">project</option>
            <option value="task">task</option>
            <option value="decision">decision</option>
            <option value="style">style</option>
            <option value="procedural">procedural</option>
            <option value="credential_pointer">credential_pointer</option>
        </select>
    </div>
    <div>
        <label class="block text-xs text-slate-500 mb-1">From</label>
        <input id="tl-from" type="date" class="border border-slate-300 rounded px-2 py-1 text-sm">
    </div>
    <div>
        <label class="block text-xs text-slate-500 mb-1">To</label>
        <input id="tl-to" type="date" class="border border-slate-300 rounded px-2 py-1 text-sm">
    </div>
    <button class="bg-slate-900 hover:bg-slate-700 text-white text-sm px-3 py-1.5 rounded" type="submit">
        load
    </button>
</form>

<div id="tl-out" class="bg-white border border-slate-200 rounded p-4">
    <p class="text-sm text-slate-400">loading…</p>
</div>

<script>
async function loadTimeline(evt) {
    if (evt) evt.preventDefault();
    const type = document.getElementById('tl-type').value;
    const from = document.getElementById('tl-from').value;
    const to   = document.getElementById('tl-to').value;
    const params = new URLSearchParams();
    if (type) params.set('type', type);
    if (from) params.set('from', from);
    if (to)   params.set('to', to);
    const url = '/ui/timeline?' + params.toString();
    const res = await fetch(url, {
        headers: { 'Accept': 'application/json' },
    });
    const data = await res.json();
    const out = document.getElementById('tl-out');
    if (!data.events || !data.events.length) {
        out.innerHTML = '<p class="text-sm text-slate-400">no events</p>';
        return;
    }
    const html = data.events.map(e => {
        const date = (e.start || '').slice(0, 19).replace('T', ' ');
        return `<div class="tl-item py-1.5 border-b border-slate-100">
            <span class="tl-dot"></span>
            <span class="text-xs tabular-nums text-slate-500">${date}</span>
            <span class="pill pill-${e.type}">${e.type}</span>
            <a href="/ui/memories/${e.id}" class="text-slate-700 hover:underline flex-1 truncate">${e.content}</a>
            <span class="text-xs text-slate-400 tabular-nums">${(e.score || 0).toFixed(3)}</span>
        </div>`;
    }).join('');
    out.innerHTML = `<p class="text-xs text-slate-500 mb-2">${data.count} events</p>` + html;
}
loadTimeline();
</script>
{% endblock %}