import { defineStore } from 'pinia'
import { reactive } from 'vue'
import { components, getStats } from '@/api'

export const useStatsStore = defineStore('stats', () => {
  const state = reactive({
    stats: {} as components['schemas']['Stats'] | undefined | null,
    loading: false,
    error: null as string | null,
    lastUpdated: Date.now()
  })

  // Actions
  const fetchStats = () => {
    state.loading = true
    state.error = null

    getStats()
      .then((response) => {
        state.stats = response
      })
      .catch((err) => {
        state.error = err instanceof Error ? err.message : 'Failed to fetch stats'
      })
      .finally(() => {
        state.loading = false
      })
  }

  return {
    state,

    // Actions
    fetchStats
  }
})
