<bmx-notification-center>

<div class="ex-nc-bar" style="display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--bmx-border); border-radius: 12px; background: var(--bmx-surface-raised)">
  <strong style="flex: 1 1 auto">Harbour &amp; Pine - Operations</strong>
  <button type="button" id="ex-nc-send" style="font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--bmx-border-strong); background: var(--bmx-surface); color: var(--bmx-text); cursor: pointer">Send a test notification</button>
  <bmx-notification-center id="ex-nc" searchable>
    <a slot="footer" href="#ex-nc" style="color: var(--bmx-primary-soft-text); font-size: 0.8125rem">See all activity</a>
  </bmx-notification-center>
</div>
<p class="note" id="ex-nc-out" role="status" style="margin: 12px 0 0">Open the bell. Every change arrives in <code>bmxChange</code> with the whole list, for the page to keep.</p>

<script type="module">
  await customElements.whenDefined('bmx-notification-center');
  const inbox = document.getElementById('ex-nc');
  const out = document.getElementById('ex-nc-out');
  const now = Date.now();
  const min = 60_000;
  const hour = 60 * min;
  const day = 24 * hour;

  inbox.sources = [
    { id: 'approvals', label: 'Approvals', description: 'Invoices and purchase orders waiting on you' },
    { id: 'builds', label: 'Builds', description: 'Pipelines on the main branch' },
    { id: 'mentions', label: 'Mentions', description: 'When someone mentions you' },
    { id: 'digest', label: 'Digest', description: 'The weekly summary' },
  ];
  inbox.notifications = [
    { id: 'po-311', title: 'Purchase order PO-311 needs your approval', body: 'Office furniture for the Leeds site, £4,820.00, raised by Tom Okafor.', time: now - 4 * min, source: 'approvals', level: 'warning', initials: 'TO', actions: [{ id: 'approve', label: 'Approve', primary: true }, { id: 'review', label: 'Review' }] },
    { id: 'inv-204', title: 'Invoice INV-204 approved', body: 'Approved by Priya Shah.', time: now - 18 * min, source: 'approvals', level: 'success', group: 'approved', initials: 'PS' },
    { id: 'inv-205', title: 'Invoice INV-205 approved', body: 'Approved by Priya Shah.', time: now - 26 * min, source: 'approvals', level: 'success', group: 'approved', initials: 'PS' },
    { id: 'inv-209', title: 'Invoice INV-209 approved', body: 'Approved by Priya Shah.', time: now - 41 * min, source: 'approvals', level: 'success', group: 'approved', initials: 'PS', read: true },
    { id: 'build-1142', title: 'Build 1142 failed on main', body: 'Two tests failed in the payments service.', time: now - 2 * hour, source: 'builds', level: 'danger', actions: [{ id: 'logs', label: 'View logs' }] },
    { id: 'mention-1', title: 'Sam Rivera mentioned you in “Q4 forecast”', body: '“Can you check the freight figures before Friday?”', time: now - 5 * hour, source: 'mentions', initials: 'SR' },
    { id: 'build-1139', title: 'Build 1139 passed', time: now - day - 3 * hour, source: 'builds', level: 'success', read: true },
    { id: 'mention-0', title: 'Amira Haddad replied to your comment', body: '“Agreed - let’s move the stock count to Monday.”', time: now - day - 6 * hour, source: 'mentions', initials: 'AH', read: true },
    { id: 'digest-41', title: 'Your weekly digest is ready', body: '38 invoices processed, 3 overdue, 1 dispute open.', time: now - 3 * day, source: 'digest', level: 'info', pinned: true, read: true },
    { id: 'digest-40', title: 'Your weekly digest is ready', time: now - 10 * day, source: 'digest', level: 'info', read: true },
  ];

  inbox.addEventListener('bmxChange', e => {
    out.textContent = `bmxChange: ${e.detail.reason} (${e.detail.ids.join(', ')}). ${e.detail.notifications.length} notifications kept.`;
  });
  inbox.addEventListener('bmxAction', e => {
    out.textContent = `bmxAction: “${e.detail.action.label}” on ${e.detail.id}.`;
  });

  // A reused pool of sample messages: the button adds one of them each time.
  const samples = [
    { title: 'Invoice INV-212 is overdue', body: 'Fernbrook Supplies, £1,240.00, due 3 days ago.', source: 'approvals', level: 'warning' },
    { title: 'Build 1143 passed on main', source: 'builds', level: 'success' },
    { title: 'Leo Martins mentioned you in “Supplier review”', body: '“Adding you so you see the new terms.”', source: 'mentions', initials: 'LM' },
  ];
  let sent = 0;
  document.getElementById('ex-nc-send').addEventListener('click', () => {
    const sample = samples[sent % samples.length];
    sent += 1;
    inbox.add({ ...sample, id: `sample-${sent}`, time: Date.now() });
  });
</script>