{% extends "base.html" %}
{% block title %}CC2 Bridge – Protokoll{% endblock %}
{% block heading %}Protokoll{% endblock %}
{% block head %}
<style>
.wrap { max-width: 860px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.chips button { border-radius: 99px; min-height: 36px; font-size: 13px; }
.chips button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.day { margin: 18px 4px 8px; }
.entries { padding: 0 14px; }
.entry { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); }
.entry:first-child { border-top: 0; }
.entry .msg { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.entry .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
</style>
{% endblock %}
{% block content %}
<div class="wrap">
  <div class="chips" id="chips"></div>
  <div id="list"><div class="card muted">Lade …</div></div>
</div>
{% endblock %}
{% block script %}
<script>
const FILTERS = [
  ['all', 'Alle', () => true],
  ['book', 'Buchungen', (e) => /gebucht/.test(e.msg) && e.level !== 'dry'],
  ['warn', 'Hinweise', (e) => e.level === 'warn' || e.level === 'dry'],
  ['error', 'Fehler', (e) => e.level === 'error'],
];
let FILTER = 'all', DATA = null;

function renderChips() {
  $('chips').innerHTML = FILTERS.map(([k, label]) =>
    `<button aria-pressed="${k === FILTER}" onclick="setFilter('${k}')">${label}</button>`).join('');
}
function setFilter(k) { FILTER = k; renderChips(); render(); }

function dayLabel(t) {
  const d = new Date(t * 1000), today = new Date();
  const start = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
  const diff = Math.round((start(today) - start(d)) / 86400000);
  if (diff === 0) return 'Heute';
  if (diff === 1) return 'Gestern';
  return d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' });
}

function render() {
  if (!DATA) return;
  const names = (DATA.printers || []).map((p) => p.name);
  const fn = FILTERS.find((f) => f[0] === FILTER)[2];
  const groups = [];
  for (const e of (DATA.log || []).filter(fn)) {
    const day = dayLabel(e.time);
    if (!groups.length || groups[groups.length - 1].day !== day) groups.push({ day, items: [] });
    groups[groups.length - 1].items.push(e);
  }
  $('list').innerHTML = groups.map((g) => `<div class="label day">${esc(g.day)}</div>
    <div class="group entries">${g.items.map((e) => {
      const [ic, bg, fg] = logIcon(e), [pn, msg] = splitPrinter(e.msg, names);
      return `<div class="entry"><div class="icon-badge" style="background:${bg};color:${fg}">${ic}</div>
        <div style="flex:1;min-width:0"><div class="msg">${esc(msg)}</div>
        <div class="meta">${esc(pn)} · <span class="mono">${fmtClock(e.time, true)}</span>${e.level === 'dry' ? ' · Dry-Run' : ''}</div></div></div>`;
    }).join('')}</div>`).join('') || '<div class="card muted">Keine Einträge</div>';
}

async function load() {
  try { DATA = await api('GET', '/api/status'); } catch (e) { $('list').innerHTML = `<div class="banner err">${esc(e.message)}</div>`; return; }
  setMode(DATA.dry_run);
  setPoll(DATA.last_poll);
  render();
}
renderChips();
load();
setInterval(() => { if (!document.hidden) load(); }, 5000);
</script>
{% endblock %}