// Clients_Filters.jsx — Toolbar pour l'onglet Clients (mode liste/kanban,
// bannière offline, bouton "Nouveau client"). Extrait de BrokerTab_Clients.jsx.
//
// Conventions : NO import/export, React global, unique hook aliases (suffix F).

function ClientsFilters({
  displayMode,
  setDisplayMode,
  setDisplayModeTouched,
  apiOffline,
  clientsCount,
  onNewClient,
  variant,            // 'kanban-header' | 'list-toolbar'
}) {
  const u = window.vestoraBrokerClients || {};
  const styles = u.styles || {};
  const btnPrimary = styles.btnPrimary;

  const ToggleGroup = (
    <div style={{ display: 'inline-flex', border: '1.5px solid #d1d5db', borderRadius: 8, overflow: 'hidden' }}>
      <button
        onClick={() => { setDisplayMode('list'); setDisplayModeTouched(true); }}
        style={{
          padding: '6px 12px', fontSize: 12, border: 'none', cursor: 'pointer',
          background: displayMode === 'list' ? '#3b82f6' : '#fff',
          color: displayMode === 'list' ? '#fff' : '#374151',
          fontWeight: displayMode === 'list' ? 600 : 400,
        }}
      >Liste</button>
      <button
        onClick={() => { setDisplayMode('kanban'); setDisplayModeTouched(true); }}
        style={{
          padding: '6px 12px', fontSize: 12, border: 'none', cursor: 'pointer',
          background: displayMode === 'kanban' ? '#3b82f6' : '#fff',
          color: displayMode === 'kanban' ? '#fff' : '#374151',
          fontWeight: displayMode === 'kanban' ? 600 : 400,
        }}
      >Kanban</button>
    </div>
  );

  if (variant === 'kanban-header') {
    return (
      <>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 14, flexWrap: 'wrap', gap: 10,
        }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: '#111827' }}>
            Pipeline clients ({clientsCount})
          </h3>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {ToggleGroup}
            <button style={btnPrimary} onClick={onNewClient}>+ Nouveau client</button>
          </div>
        </div>

        {apiOffline && (
          <div style={{
            background: '#fef3c7', border: '1px solid #fcd34d', color: '#92400e',
            borderRadius: 8, padding: '8px 10px', fontSize: 12, marginBottom: 10,
          }}>
            Mode hors-ligne — affichage du cache local.
          </div>
        )}
      </>
    );
  }

  // list-toolbar (sticky en haut a droite quand on est en vue liste)
  return (
    <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', marginBottom: -6 }}>
      {ToggleGroup}
    </div>
  );
}

if (typeof window !== 'undefined') {
  window.ClientsFilters = ClientsFilters;
}