import { create } from 'zustand'
import { persist } from 'zustand/middleware'

// 2025년 최신 패턴: immer와 persist 조합
interface UserStore {
  user: User | null
  isLoading: boolean
  login: (credentials: LoginCredentials) => Promise<void>
  logout: () => void
}

export const useUserStore = create<UserStore>()(persist(
  (set, get) => ({
    user: null,
    isLoading: false,
    
    login: async (credentials) => {
      set({ isLoading: true })
      try {
        const user = await authAPI.login(credentials)
        set({ user, isLoading: false })
      } catch (error) {
        set({ isLoading: false })
        throw error
      }
    },
    
    logout: () => {
      set({ user: null })
      authAPI.logout()
    }
  }),
  {
    name: 'user-storage',
    partialize: (state) => ({ user: state.user }) // 필요한 것만 persist
  }
))

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil'

// Atom 정의
export const userAtom = atom<User | null>({
  key: 'userAtom',
  default: null,
})

export const isLoadingAtom = atom<boolean>({
  key: 'isLoadingAtom',
  default: false,
})

// Selector로 파생 상태 정의
export const userStatusSelector = selector({
  key: 'userStatusSelector',
  get: ({ get }) => {
    const user = get(userAtom)
    const isLoading = get(isLoadingAtom)
    
    if (isLoading) return 'loading'
    if (user) return 'authenticated'
    return 'guest'
  },
})

// 컴포넌트에서 사용
function UserProfile() {
  const [user, setUser] = useRecoilState(userAtom)
  const userStatus = useRecoilValue(userStatusSelector)
  
  return (
    <div>
      <p>상태: {userStatus}</p>
      {user && <p>환영합니다, {user.name}님!</p>}
    </div>
  )
}