// store.ts
import { create } from 'zustand'

interface CounterStore {
  count: number
  increment: () => void
  decrement: () => void
}

export const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

// Component.tsx
function Counter() {
  const { count, increment, decrement } = useCounter()
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

// store.ts
import { configureStore, createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
})

export const { increment, decrement } = counterSlice.actions
export const store = configureStore({
  reducer: { counter: counterSlice.reducer },
})

// Component.tsx  
import { useSelector, useDispatch } from 'react-redux'

function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()
  
  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  )
}

const useStore = create((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true })
    const users = await api.getUsers()
    set({ users, loading: false })
  },
}))

const usersSlice = createSlice({
  name: 'users',
  initialState: { list: [], loading: false },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.list = action.payload
        state.loading = false
      })
  },
})

export const fetchUsers = createAsyncThunk(
  'users/fetch',
  async () => api.getUsers()
)

// Automatic selector optimization
const count = useStore((state) => state.count) // Only re-renders on count change

// Requires createSelector for similar optimization
const selectCount = createSelector(
  [(state) => state.counter],
  (counter) => counter.value
)

// Perfect Zustand use case: Shopping cart
const useCart = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ 
    items: [...state.items, item] 
  })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter(item => item.id !== id)
  })),
  total: 0,
  calculateTotal: () => set((state) => ({
    total: state.items.reduce((sum, item) => sum + item.price, 0)
  })),
}))

// Perfect RTK use case: Complex data fetching
export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User', 'Post'],
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => 'users',
      providesTags: ['User'],
    }),
    updateUser: builder.mutation({
      query: ({ id, ...patch }) => ({
        url: `users/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      invalidatesTags: ['User'],
    }),
  }),
})

// Gradual migration - use both temporarily
const useHybridStore = () => {
  const reduxData = useSelector(state => state.oldFeature)
  const zustandData = useNewStore()
  return { ...reduxData, ...zustandData }
}

// Convert Zustand stores to RTK slices
const slice = createSlice({
  name: 'feature',
  initialState: zustandStore.getState(),
  reducers: {
    // Map Zustand actions to reducers
  }
})