// Inline stylised breadcrumb: Space › parent page › … › current.
// Walks page.parent_id upward (capped); fills in async, returns the element now.
import { el } from '../dom.js';
import { api } from '../api.js';

export function breadcrumb(page) {
  const nav = el('nav', { class: 'crumbs' });
  (async () => {
    const parts = [];
    try {
      const sp = await api.get('/api/spaces/' + page.space_id);
      parts.push({ label: sp.name, href: '#/space/' + sp.id });
    } catch { /* */ }

    const chain = [];
    let pid = page.parent_id, guard = 0;
    while (pid && guard++ < 8) {
      try {
        const par = await api.get('/api/pages/' + pid);
        chain.unshift({ label: par.title, href: '#/page/' + par.id });
        pid = par.parent_id;
      } catch { break; }
    }
    parts.push(...chain, { label: page.title, href: null });

    nav.replaceChildren();
    parts.forEach((p, i) => {
      if (i) nav.appendChild(el('span', { class: 'crumb-sep' }, '›'));
      nav.appendChild(p.href
        ? el('a', { class: 'crumb', href: p.href }, p.label)
        : el('span', { class: 'crumb current' }, p.label));
    });
  })();
  return nav;
}