// Topbar: brand, global search (Enter → /search?q=), capture button stub,
// pending bell with badge, user/agent toggle stub.

import { el, mount, clear } from '../dom.js';
import { navigate } from '../router.js';
import { on } from '../state.js';

function captureModal() {
  const root = document.getElementById('modal-root');
  mount(root,
    el('div', { class: 'modal-backdrop', onclick: (e) => { if (e.target.classList.contains('modal-backdrop')) clear(root); } },
      el('div', { class: 'modal' },
        el('h2', {}, 'Universal Capture'),
        el('p', { class: 'muted' },
          'Drag a URL, paste a YouTube link, drop a PDF. ' +
          'Plan 3 wires the capture queue + workers — this surface is here so the UX shape is honest about what is coming.'
        ),
        el('div', { class: 'actions' },
          el('button', { class: 'ghost', onclick: () => clear(root) }, 'Close')
        )
      )
    )
  );
}

export function renderTopbar(root) {
  const searchInput = el('input', {
    type: 'text',
    placeholder: 'Search …  (Enter to search)',
    onkeydown: (e) => {
      if (e.key === 'Enter' && e.target.value.trim()) {
        navigate('/search?q=' + encodeURIComponent(e.target.value.trim()));
      }
    }
  });

  const bell = el('button', { class: 'icon-btn', onclick: () => navigate('/inbox') }, 'Inbox');

  mount(root,
    el('div', { class: 'brand' }, 'VOID'),
    el('button', { class: 'icon-btn', onclick: captureModal }, '+ Capture'),
    el('div', { class: 'topbar-search' }, searchInput),
    el('div', { class: 'topbar-spacer' }),
    bell,
    el('button', { class: 'icon-btn', onclick: () => alert('Agent-switching ships post-Plan-2.') }, 'Owner')
  );

  on('pending-count', (n) => {
    const old = bell.querySelector('.badge');
    if (old) old.remove();
    if (n > 0) bell.appendChild(el('span', { class: 'badge' }, String(n)));
  });
}