// store.js
import { createStore } from 'redux'
import { combineReducers } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

// Reducer
const initialState = {
  user: null,
  isLoading: false,
  error: null
}

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        user: action.payload,
        isLoading: false,
        error: null
      }
    case 'LOGIN_FAILURE':
      return {
        ...state,
        isLoading: false,
        error: action.payload
      }
    default:
      return state
  }
}

// 合并Reducer
const rootReducer = combineReducers({
  user: userReducer,
  // ...其他reducer
})

// 持久化配置
const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['error'] // 不持久化error状态
}

// 创建store
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer)
const persistor = persistStore(store)

export { store, persistor }

// store.js
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  state: {
    user: null,
    isAuthenticated: false,
    cart: []
  },
  
  getters: {
    getUser: state => state.user,
    isAuthenticated: state => state.isAuthenticated,
    cartTotal: state => {
      return state.cart.reduce((total, item) => total + item.price, 0)
    }
  },
  
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    },
    ADD_TO_CART(state, product) {
      state.cart.push(product)
    },
    REMOVE_FROM_CART(state, productId) {
      state.cart = state.cart.filter(item => item.id !== productId)
    }
  },
  
  actions: {
    async login({ commit }, credentials) {
      try {
        const response = await api.login(credentials)
        commit('SET_USER', response.data)
        return true
      } catch (error) {
        throw error
      }
    },
    
    async addToCart({ commit }, product) {
      // 异步操作
      await api.checkStock(product.id)
      commit('ADD_TO_CART', product)
    }
  },
  
  plugins: [createPersistedState()]
})

export default store

// store.js
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      isAuthenticated: false,
      login: async (credentials) => {
        set({ isLoading: true })
        try {
          const response = await api.login(credentials)
          set({ 
            user: response.data, 
            isAuthenticated: true,
            isLoading: false 
          })
        } catch (error) {
          set({ error: error.message, isLoading: false })
        }
      },
      logout: () => {
        set({ 
          user: null, 
          isAuthenticated: false,
          error: null 
        })
      }
    }),
    {
      name: 'auth-storage'
    }
  )
)

// 另一个store
const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({
    items: [...state.items, item]
  })),
  removeItem: (itemId) => set((state) => ({
    items: state.items.filter(item => item.id !== itemId)
  })),
  getTotal: () => {
    const store = useCartStore.getState()
    return store.items.reduce((total, item) => total + item.price, 0)
  }
}))

export { useAuthStore, useCartStore }

// atoms.js
import { atom, useAtom, useSetAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

// 用户状态atom
export const userAtom = atomWithStorage('user', null)

// 购物车atom
export const cartAtom = atom([])

// 计算属性atom
export const cartTotalAtom = atom(
  (get) => get(cartAtom).reduce((total, item) => total + item.price, 0)
)

// 异步操作atom
export const isLoadingAtom = atom(false)

// 更新函数atom
export const addToCartAtom = atom(
  null,
  (get, set, newItem) => {
    set(cartAtom, (prev) => [...prev, newItem])
    set(isLoadingAtom, false)
  }
)

// 组件中使用
function CartItem({ item }) {
  const removeItem = useSetAtom(removeFromCartAtom)
  
  return (
    <div>
      {item.name} - ¥{item.price}
      <button onClick={() => removeItem(item.id)}>删除</button>
    </div>
  )
}

// contexts/AuthContext.js
import React, { createContext, useContext, useReducer } from 'react'

// 初始状态
const initialState = {
  user: null,
  isAuthenticated: false,
  isLoading: false,
  error: null
}

// Reducer
const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, isLoading: true, error: null }
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        user: action.payload,
        isAuthenticated: true,
        isLoading: false
      }
    case 'LOGIN_FAILURE':
      return {
        ...state,
        error: action.payload,
        isLoading: false
      }
    case 'LOGOUT':
      return {
        ...state,
        user: null,
        isAuthenticated: false
      }
    default:
      return state
  }
}

// Context
const AuthContext = createContext()

// Provider
export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, initialState)
  
  const login = async (credentials) => {
    dispatch({ type: 'LOGIN_START' })
    try {
      const response = await api.login(credentials)
      dispatch({ type: 'LOGIN_SUCCESS', payload: response.data })
    } catch (error) {
      dispatch({ type: 'LOGIN_FAILURE', payload: error.message })
    }
  }
  
  const logout = () => {
    dispatch({ type: 'LOGOUT' })
  }
  
  return (
    <AuthContext.Provider value={{ ...state, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

// Hook
export const useAuth = () => useContext(AuthContext)

// store.js
import { makeAutoObservable, runInAction } from 'mobx'
import { persist } from 'mobx-persist'

class AuthStore {
  user = null
  isAuthenticated = false
  isLoading = false
  error = null
  
  constructor() {
    makeAutoObservable(this)
  }
  
  login = async (credentials) => {
    this.isLoading = true
    try {
      const response = await api.login(credentials)
      runInAction(() => {
        this.user = response.data
        this.isAuthenticated = true
        this.isLoading = false
      })
    } catch (error) {
      runInAction(() => {
        this.error = error.message
        this.isLoading = false
      })
    }
  }
  
  logout = () => {
    this.user = null
    this.isAuthenticated = false
    this.error = null
  }
}

class CartStore {
  items = []
  
  constructor() {
    makeAutoObservable(this)
  }
  
  addItem = (item) => {
    this.items.push(item)
  }
  
  removeItem = (itemId) => {
    this.items = this.items.filter(item => item.id !== itemId)
  }
  
  get total() {
    return this.items.reduce((sum, item) => sum + item.price, 0)
  }
}

// 创建实例并持久化
const authStore = new AuthStore()
const cartStore = new CartStore()

// 持久化配置
persist('auth', authStore, { storage: localStorage })
persist('cart', cartStore, { storage: localStorage })

export { authStore, cartStore }

// stores/auth.js
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

export const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      isAuthenticated: false,
      login: (user) => set({ user, isAuthenticated: true }),
      logout: () => set({ user: null, isAuthenticated: false })
    }),
    { name: 'auth-storage' }
  )
)

// stores/cart.js
import { create } from 'zustand'

export const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => 
    set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) =>
    set((state) => ({ 
      items: state.items.filter(item => item.id !== itemId) 
    })),
  clearCart: () => set({ items: [] })
}))

// components/UserProfile.js
import { useAuthStore, useCartStore } from '../stores'

function UserProfile() {
  const { user, isAuthenticated, logout } = useAuthStore()
  const { items, removeItem } = useCartStore()
  
  if (!isAuthenticated) {
    return <LoginComponent />
  }
  
  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={logout}>退出</button>
      
      <div>
        {items.map(item => (
          <div key={item.id}>
            {item.name}
            <button onClick={() => removeItem(item.id)}>
              删除
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}

// store/index.js
import { configureStore } from '@reduxjs/toolkit'
import authReducer from './slices/authSlice'
import cartReducer from './slices/cartSlice'

export const store = configureStore({
  reducer: {
    auth: authReducer,
    cart: cartReducer
  }
})

// store/slices/authSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

export const login = createAsyncThunk(
  'auth/login',
  async (credentials, { rejectWithValue }) => {
    try {
      const response = await api.login(credentials)
      return response.data
    } catch (error) {
      return rejectWithValue(error.message)
    }
  }
)

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    isAuthenticated: false,
    isLoading: false,
    error: null
  },
  reducers: {
    logout: (state) => {
      state.user = null
      state.isAuthenticated = false
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.isLoading = true
      })
      .addCase(login.fulfilled, (state, action) => {
        state.user = action.payload
        state.isAuthenticated = true
        state.isLoading = false
      })
      .addCase(login.rejected, (state, action) => {
        state.error = action.payload
        state.isLoading = false
      })
  }
})

export const { logout } = authSlice.actions
export default authSlice.reducer