leocrm/frontend/src/components/layout/PluginToolbar.tsx

import React from 'react';
import { usePluginToolbarStore, type ToolbarItem } from '@/store/pluginToolbarStore';

function ToolbarButton({ item }: { item: ToolbarItem }) {
  return (
    <button
      onClick={item.onClick}
      disabled={item.disabled}
      className={`
        inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium
        transition-colors duration-100
        ${item.active ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}
        ${item.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
      `}
      title={item.label}
    >
      {item.icon && <span className="w-3.5 h-3.5 flex-shrink-0">{item.icon}</span>}
      <span className="hidden sm:inline">{item.label}</span>
    </button>
  );
}

function ToolbarSearch({ item }: { item: ToolbarItem }) {
  return (
    <input
      type="text"
      placeholder={item.searchPlaceholder || 'Suchen...'}
      onChange={(e) => item.onSearch?.(e.target.value)}
      className="w-28 sm:w-40 px-2 py-1 text-xs border border-secondary-200 rounded
        focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300
        placeholder:text-secondary-400 flex-shrink-0"
    />
  );
}

function ToolbarSelect({ item }: { item: ToolbarItem }) {
  return (
    <select
      value={item.selectValue || ''}
      onChange={(e) => item.onSelect?.(e.target.value)}
      className="px-1.5 sm:px-2 py-1 text-xs border border-secondary-200 rounded
        focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300
        bg-white cursor-pointer flex-shrink-0 max-w-[120px] sm:max-w-none"
    >
      {item.selectOptions?.map((opt) => (
        <option key={opt.value} value={opt.value}>{opt.label}</option>
      ))}
    </select>
  );
}

export function PluginToolbar() {
  const { items, activePlugin } = usePluginToolbarStore();
  const visibleItems = items.filter((i) => i.plugin === activePlugin);

  if (visibleItems.length === 0) return null;

  // Group items by group field
  const groups: Record<string, ToolbarItem[]> = {};
  for (const item of visibleItems) {
    const g = item.group || 'default';
    if (!groups[g]) groups[g] = [];
    groups[g].push(item);
  }
  const groupNames = Object.keys(groups);

  return (
    <div
      className="flex items-center gap-1 px-2 sm:px-3 py-1 bg-white border-b border-secondary-200 min-h-[36px] overflow-x-auto"
      data-testid="plugin-toolbar"
    >
      {groupNames.map((groupName, gi) => (
        <React.Fragment key={groupName}>
          {gi > 0 && <div className="w-px h-5 bg-secondary-200 mx-1" />}
          <div className="flex items-center gap-1">
            {groups[groupName].map((item) => {
              if (item.type === 'search') return <ToolbarSearch key={item.id} item={item} />;
              if (item.type === 'select') return <ToolbarSelect key={item.id} item={item} />;
              return <ToolbarButton key={item.id} item={item} />;
            })}
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}