// public/views/cards/inbox.js
import { el, mount } from '../../dom.js';
import { api } from '../../api.js';

let body, timer;
async function load() {
  if (!body) return;
  try {
    const rows = await api.get('/api/pending-changes');
    mount(body,
      el('div', { class: 'sv-row', style: { fontSize: '22px' } },
        el('span', { style: { fontFamily: 'var(--font-mono)' } }, String(rows.length)),
        el('span', { class: 'k' }, 'awaiting review')),
      el('a', { href: '#/inbox', class: 'k', style: { display: 'block', marginTop: '8px' } }, 'Open Inbox →')
    );
  } catch (e) {
    mount(body, el('span', { class: 'muted' }, e.status === 403 ? 'Owner only' : 'Inbox unavailable'));
  }
}
export default {
  id: 'inbox', title: 'Inbox', size: 's',
  mount(el_) { body = el_; load(); },
  start() { timer = setInterval(load, 10000); },
  stop() { clearInterval(timer); body = null; }
};