/**
 * Bulk action toolbar — populates the demo table and wires the
 * selection-driven toolbar swap.
 *
 * Default state shows <table-toolbar-ui> (Filter/Sort/Columns/Search,
 * wired via [for]). When rows are selected, swap to <toolbar-ui>
 * with the bulk actions; selection count anchors the left.
 */

const columns = [
  { key: 'name',   label: 'Name',   sortable: true, flex: 2 },
  { key: 'owner',  label: 'Owner',  sortable: true, flex: 1 },
  { key: 'status', label: 'Status', sortable: true, flex: 1, render: (val) => {
    const v = { Active: 'success', Draft: 'muted', Archived: 'warning' }[val] || '';
    return `<badge-ui text="${val}" variant="${v}"></badge-ui>`;
  }},
  { key: 'updated', label: 'Updated', sortable: true, flex: 1 },
];

const data = [
  { name: 'Q4 roadmap',       owner: 'Alex Chen',    status: 'Active',   updated: '2 hours ago' },
  { name: 'Design review',    owner: 'Sarah Miller', status: 'Active',   updated: '5 hours ago' },
  { name: 'Brand guidelines', owner: 'James Park',   status: 'Draft',    updated: 'Yesterday' },
  { name: 'Launch checklist', owner: 'Maria Lopez',  status: 'Archived', updated: '3 days ago' },
  { name: 'API v2 spec',      owner: 'Alex Chen',    status: 'Active',   updated: '1 week ago' },
  { name: 'Hiring plan',      owner: 'Sarah Miller', status: 'Draft',    updated: '2 weeks ago' },
];

export default function setup(router) {
  const table = router.querySelector('#pat-bulk-table');
  const tbar  = router.querySelector('#pat-bulk-default');
  const bulk  = router.querySelector('#pat-bulk-actions');
  if (!table || !tbar || !bulk) return;

  table.columns = columns;
  table.data    = data;

  // Match the bulk-action toolbar height + horizontal alignment to
  // <table-toolbar-ui>'s default variant so the swap is seamless.
  // table-toolbar-ui ships --table-toolbar-py: var(--a-space-2) and
  // --table-toolbar-px: 0 (alignment to flush table cells in a bleed
  // section). Mirror those on the toolbar-ui that swaps in. Set via
  // setProperty rather than an inline <style> block — pattern pages
  // adjacent to harvest pages get the same "JS hydration is fine,
  // styling stored in HTML is not" treatment by default.
  bulk.style.setProperty('--toolbar-py',  'var(--a-space-2)');
  bulk.style.setProperty('--toolbar-px',  '0');
  bulk.style.setProperty('--toolbar-gap', 'var(--a-space-2)');

  const countEl = bulk.querySelector('[data-bulk-count]');

  table.addEventListener('select', (e) => {
    const n = e.detail?.selected?.length ?? 0;
    if (countEl) countEl.textContent = String(n);
    tbar.hidden = n > 0;
    bulk.hidden = n === 0;
  });

  // Demo-only: bulk-action buttons return the table to default-toolbar
  // state so the swap is exercisable in both directions. Uses the
  // public clearSelection() method (added 2026-04-29) — used to require
  // re-assigning `data` to trigger the internal #selected.clear() side
  // effect, but the symmetric API now exists.
  bulk.addEventListener('press', (e) => {
    const target = e.target?.closest?.('[data-bulk-action]');
    if (!target) return;
    table.clearSelection();
  });
}
