import { defineStore } from 'pinia'
import { ref } from 'vue'

interface UserInfo {
  username: string
  isAuthenticated: boolean
  isStaff: boolean
}

export const useUserStore = defineStore('user', () => {
  const userInfo = ref<UserInfo>({
    username: '',
    isAuthenticated: false,
    isStaff: false,
  })
  const isLoading = ref(false)
  const error = ref<string>('')

  const loadUserData = async () => {
    isLoading.value = true
    try {
      const response = await fetch('/api/user')
      if (response.ok) {
        const user = await response.json()
        userInfo.value.isAuthenticated = user.is_authenticated || false
        userInfo.value.username = user.username || ''
        userInfo.value.isStaff = user.is_staff || false
      }
    } catch (err) {
      error.value = 'Failed to fetch user info'
      console.error('Error fetching user info:', err)
    } finally {
      isLoading.value = false
    }
  }

  return {
    userInfo,
    isLoading,
    error,
    loadUserData,
  }
})