// Shared browse toolbar + pagination for catalog pages (recipes, ingredients,
// utensils). Injects its CSS once; exposes window.MfcBrowse = { Toolbar, Pagination }.
// Load via: <script type="text/babel" src="assets/js/lib/browse-toolbar.jsx" data-presets="react"></script>
//
// Toolbar layout (mobile-first): search → [divider, filter dropdown] →
// [divider, sort segment] → spacer → match-count stat → divider → grid/list segment.
// The filter dropdown and sort segment are optional (omit the props to hide them).

(function () {
  const STYLE = `
.bt-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px;
  background:var(--paper); border:1.5px solid var(--ink); border-radius:12px; box-shadow:3px 3px 0 var(--ink); margin-bottom:14px; }
.bt-search { flex:2 1 320px; min-width:280px; display:flex; align-items:center; gap:8px; padding:6px 14px;
  background:var(--cream-soft); border:1px solid var(--rule); border-radius:999px; }
.bt-search .bt-ico { color:var(--ink-muted); font-size:14px; }
.bt-search input { flex:1; border:none; background:transparent; font-family:var(--serif); font-style:italic;
  font-size:16px; color:var(--ink); min-width:0; min-height:44px; }
.bt-search input::placeholder { color:var(--ink-muted); }
.bt-search button { background:none; padding:0 4px; color:var(--ink-muted); line-height:1; font-size:16px;
  min-width:44px; min-height:44px; cursor:pointer; border:none; }
.bt-divider { width:1px; height:22px; background:var(--rule); }
.bt-select { background:transparent; border:1px solid var(--rule); border-radius:999px; padding:6px 12px;
  font-size:12.5px; color:var(--ink); cursor:pointer; font-family:var(--sans); min-height:44px;
  display:inline-flex; align-items:center; }
.bt-segment { display:inline-flex; padding:3px; background:var(--cream-deep); border-radius:999px; }
.bt-segment button { padding:5px 12px; border-radius:999px; font-size:12px; font-weight:500; color:var(--ink-muted);
  transition:all 160ms; background:transparent; white-space:nowrap; min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer; }
.bt-segment button.active { background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--rule); }
.bt-stat { font-family:var(--mono); font-size:11px; color:var(--ink-muted); letter-spacing:0.04em; white-space:nowrap; }
.bt-spacer { flex:1; }
.bt-pagination { display:flex; align-items:center; justify-content:space-between; margin-top:24px; gap:12px;
  flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--ink-muted); letter-spacing:0.04em; }
.bt-pagination-pages { display:flex; gap:4px; align-items:center; }
.bt-pg-ellipsis { padding:0 4px; color:var(--ink-muted); }
.bt-pg-btn { min-width:44px; height:44px; padding:0 10px; display:grid; place-items:center; background:var(--paper);
  border:1px solid var(--rule); border-radius:8px; color:var(--ink-soft); cursor:pointer; transition:all 140ms;
  font-family:var(--mono); font-size:12px; }
.bt-pg-btn:hover { border-color:var(--ink); color:var(--ink); }
.bt-pg-btn.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.bt-pg-btn.disabled { opacity:0.4; cursor:not-allowed; }
@media (max-width: 880px) {
  .bt-toolbar { gap:8px; padding:10px 12px; }
  .bt-divider { display:none; }
  .bt-search { width:100%; flex:1 1 100%; min-width:0; }
  .bt-stat { width:100%; order:99; }
}
@media (max-width: 640px) {
  .bt-pagination { flex-direction:column; align-items:stretch; gap:12px; }
  .bt-pagination-pages { justify-content:center; flex-wrap:wrap; }
}
@media (max-width: 480px) { .bt-search input { font-size:16px; } }
`;

  function ensureStyle() {
    if (document.getElementById('mfc-browse-style')) return;
    const el = document.createElement('style');
    el.id = 'mfc-browse-style';
    el.textContent = STYLE;
    document.head.appendChild(el);
  }
  ensureStyle();

  function Toolbar({
    query, onQuery, searchPlaceholder, searchLabel,
    filterValue, filterOptions, filterAllLabel, filterLabel, onFilter,
    sortOptions, sort, onSort,
    count, countLabel = 'matches',
    view, onView,
  }) {
    return (
      <div className="bt-toolbar">
        <div className="bt-search">
          <span className="bt-ico" aria-hidden="true">⌕</span>
          <input
            value={query ?? ''}
            onChange={(e) => onQuery(e.target.value)}
            placeholder={searchPlaceholder}
            aria-label={searchLabel || 'Search'}
          />
          {query && <button onClick={() => onQuery('')} aria-label="Clear search">×</button>}
        </div>

        {filterOptions && (
          <>
            <span className="bt-divider" />
            <select className="bt-select" value={filterValue ?? 'all'} onChange={(e) => onFilter(e.target.value)} aria-label={filterLabel || filterAllLabel}>
              <option value="all">{filterAllLabel}</option>
              {filterOptions.map((o) => <option key={o} value={o}>{o}</option>)}
            </select>
          </>
        )}

        {sortOptions && (
          <>
            <span className="bt-divider" />
            <div className="bt-segment" role="group" aria-label="Sort">
              {sortOptions.map((o) => (
                <button key={o.value} aria-pressed={sort === o.value}
                  className={sort === o.value ? 'active' : ''} onClick={() => onSort(o.value)}>{o.label}</button>
              ))}
            </div>
          </>
        )}

        <span className="bt-spacer" />
        <span className="bt-stat">{count} {countLabel}</span>
        <span className="bt-divider" />

        <div className="bt-segment" role="group" aria-label="View mode">
          <button aria-pressed={view === 'grid'} className={view === 'grid' ? 'active' : ''} onClick={() => onView('grid')}>▦ Grid</button>
          <button aria-pressed={view === 'list'} className={view === 'list' ? 'active' : ''} onClick={() => onView('list')}>≡ List</button>
        </div>
      </div>
    );
  }

  function Pagination({ page, pageCount, onChange }) {
    if (pageCount <= 1) return null;
    const pages = [];
    const win = 2;
    for (let i = 1; i <= pageCount; i++) {
      if (i === 1 || i === pageCount || (i >= page - win && i <= page + win)) pages.push(i);
      else if (pages[pages.length - 1] !== '…') pages.push('…');
    }
    return (
      <div className="bt-pagination">
        <div className="bt-pagination-pages">
          <button className={"bt-pg-btn" + (page === 1 ? " disabled" : "")} disabled={page === 1} onClick={() => onChange(page - 1)} aria-label="Previous page">‹</button>
          {pages.map((p, i) => p === '…'
            ? <span key={'e' + i} className="bt-pg-ellipsis">…</span>
            : <button key={p} className={"bt-pg-btn" + (p === page ? " active" : "")} onClick={() => onChange(p)} aria-current={p === page ? 'page' : undefined}>{p}</button>)}
          <button className={"bt-pg-btn" + (page === pageCount ? " disabled" : "")} disabled={page === pageCount} onClick={() => onChange(page + 1)} aria-label="Next page">›</button>
        </div>
      </div>
    );
  }

  window.MfcBrowse = { Toolbar, Pagination };
})();