import { create } from 'zustand';

export interface ToolbarItem {
  id: string;
  plugin: string;
  label: string;
  icon?: React.ReactNode;
  onClick: () => void;
  group?: string;
  disabled?: boolean;
  active?: boolean;
  type?: 'button' | 'search' | 'select';
  searchPlaceholder?: string;
  onSearch?: (query: string) => void;
  selectOptions?: { value: string; label: string }[];
  selectValue?: string;
  onSelect?: (value: string) => void;
}

interface PluginToolbarState {
  items: ToolbarItem[];
  activePlugin: string | null;
  registerItems: (plugin: string, items: ToolbarItem[]) => void;
  unregisterPlugin: (plugin: string) => void;
  setActivePlugin: (plugin: string | null) => void;
  updateItem: (plugin: string, id: string, updates: Partial<ToolbarItem>) => void;
}

export const usePluginToolbarStore = create<PluginToolbarState>((set) => ({
  items: [],
  activePlugin: null,
  registerItems: (plugin, newItems) =>
    set((state) => ({
      items: [...state.items.filter((i) => i.plugin !== plugin), ...newItems],
      activePlugin: plugin,
    })),
  unregisterPlugin: (plugin) =>
    set((state) => ({
      items: state.items.filter((i) => i.plugin !== plugin),
      activePlugin: state.activePlugin === plugin ? null : state.activePlugin,
    })),
  setActivePlugin: (plugin) => set({ activePlugin: plugin }),
  updateItem: (plugin, id, updates) =>
    set((state) => ({
      items: state.items.map((i) =>
        i.plugin === plugin && i.id === id ? { ...i, ...updates } : i
      ),
    })),
}));