// Archive page: archived tasks scoped by role (server-side), with search.
import { api } from '/static/js/api.js';

const host = document.getElementById('archive-list');
const errorBox = document.getElementById('error');
const search = document.getElementById('archive-search');
let names = {};

const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
}[c]));

function render(tasks) {
  host.replaceChildren(...tasks.map((t) => {
    const card = document.createElement('div');
    card.className = 'card';
    const when = t.updatedAt ? new Date(t.updatedAt).toLocaleString() : '';
    card.innerHTML = `
      <div class="spread">
        ${names[t.customerId] ? `<span class="card-project">${esc(names[t.customerId])}</span>` : '<span></span>'}
        <span class="badge accent">◈ ${t.bounty}</span>
      </div>
      <h3 class="mt"><a href="/tasks/${t.id}">${esc(t.title)}</a></h3>
      <p class="muted">${esc((t.description || '').slice(0, 200))}</p>
      <p class="muted" style="font-size:0.8rem">archived${when ? ' · ' + esc(when) : ''}</p>`;
    return card;
  }));
  if (!tasks.length) {
    host.innerHTML = '<p class="muted">No archived tasks match.</p>';
  }
}

let timer = null;
async function load() {
  try {
    const q = search.value.trim();
    const res = await api('GET', '/api/v1/archive' + (q ? '?q=' + encodeURIComponent(q) : ''));
    names = res.customerNames || {};
    render(res.tasks || []);
  } catch (e) { errorBox.textContent = e.message; }
}

search.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(load, 250); });
load();