import { create } from 'zustand';

const resolveValue = (updater, currentValue) => (
  typeof updater === 'function' ? updater(currentValue) : updater
);

/**
 * UI Store - UI state, view management, layout
 */
export const useUIStore = create((set) => ({
  // Current view
  currentView: 'traders', // 'traders' | 'room' | 'explain' | 'chart' | 'statistics' | 'runtime'
  setCurrentView: (currentView) => set((state) => ({ currentView: resolveValue(currentView, state.currentView) })),

  // Chart tab
  chartTab: 'all',
  setChartTab: (chartTab) => set((state) => ({ chartTab: resolveValue(chartTab, state.chartTab) })),

  // Initial animation
  isInitialAnimating: true,
  setIsInitialAnimating: (isInitialAnimating) => set((state) => ({ isInitialAnimating: resolveValue(isInitialAnimating, state.isInitialAnimating) })),

  // Last update timestamp
  lastUpdate: new Date(),
  setLastUpdate: (lastUpdate) => set((state) => ({ lastUpdate: resolveValue(lastUpdate, state.lastUpdate) })),

  // Is updating
  isUpdating: false,
  setIsUpdating: (isUpdating) => set((state) => ({ isUpdating: resolveValue(isUpdating, state.isUpdating) })),

  // Room bubbles
  bubbles: {},
  setBubbles: (bubbles) => set((state) => ({ bubbles: resolveValue(bubbles, state.bubbles) })),

  // Resizable panels
  leftWidth: 70,
  setLeftWidth: (leftWidth) => set((state) => ({ leftWidth: resolveValue(leftWidth, state.leftWidth) })),
  isResizing: false,
  setIsResizing: (isResizing) => set((state) => ({ isResizing: resolveValue(isResizing, state.isResizing) })),

  // Now timestamp (for current time display)
  now: new Date(),
  setNow: (now) => set((state) => ({ now: resolveValue(now, state.now) })),
}));