// features/auth/state/authStore.ts
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
 
interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  setUser: (user: User | null) => void;
  setToken: (token: string | null) => void;
  logout: () => void;
}
 
export const useAuthStore = create<AuthState>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        token: null,
        isAuthenticated: false,
        
        setUser: (user) => set({ user, isAuthenticated: !!user }),
        setToken: (token) => set({ token }),
        logout: () => set({ user: null, token: null, isAuthenticated: false }),
      }),
      {
        name: 'auth-storage',
        storage: AsyncStorage,
        partialize: (state) => ({ token: state.token }), // Only persist token
      }
    )
  )
);

// Poor performance - re-renders on any state change
const Component = () => {
  const store = useCartStore();
  return <Text>{store.items.length}</Text>;
};
 
// Better performance - only re-renders when relevant state changes
const Component = () => {
  const itemCount = useCartStore((state) => state.items.length);
  return <Text>{itemCount}</Text>;
};
 
// Best practice - reusable selector
export const useCartItemCount = () => useCartStore((state) => state.items.length);
 
const Component = () => {
  const itemCount = useCartItemCount();
  return <Text>{itemCount}</Text>;
};
 
// Advanced - stable selector functions with shallow comparison
import { shallow } from 'zustand/shallow';
 
const Component = () => {
  const { add, remove } = useCartStore(
    (state) => ({ add: state.addItem, remove: state.removeItem }),
    shallow
  );
  
  return (
    <View>
      <Button onPress={() => add(newItem)} title="Add" />
      <Button onPress={() => remove(itemId)} title="Remove" />
    </View>
  );
};

// __tests__/core/store/uiStore.test.ts
import { renderHook, act } from '@testing-library/react-hooks';
import { useUIStore } from '@/core/store/uiStore';
 
describe('UIStore', () => {
  // Reset store before each test
  beforeEach(() => {
    useUIStore.setState({ 
      theme: 'light',
      sidebarOpen: false,
      activeModal: null 
    });
  });
  
  it('should toggle sidebar', () => {
    const { result } = renderHook(() => useUIStore());
    
    expect(result.current.sidebarOpen).toBe(false);
    
    act(() => {
      result.current.toggleSidebar();
    });
    
    expect(result.current.sidebarOpen).toBe(true);
  });
  
  it('should set theme', () => {
    const { result } = renderHook(() => useUIStore());
    
    expect(result.current.theme).toBe('light');
    
    act(() => {
      result.current.setTheme('dark');
    });
    
    expect(result.current.theme).toBe('dark');
  });
});