import { defineStore } from 'pinia'
import { ref } from 'vue'
import { api } from '@/services/api'

export interface CategoryTotal {
  category_id: number | null
  category_name: string
  color: string
  total: number
}

export interface MonthEvolution {
  month: string
  income: number
  expenses: number
  saved: number
}

export interface RecentTransaction {
  id: number
  date: string
  description: string
  category_name: string
  amount: number
  type: 'income' | 'expense'
}

export interface DashboardData {
  month: string
  total_income: number
  total_expenses: number
  savings_pct: number
  by_category: CategoryTotal[]
  monthly_evolution: MonthEvolution[]
  recent_transactions: RecentTransaction[]
  pending_recurring: number
}

export const useDashboardStore = defineStore('dashboard', () => {
  const data = ref<DashboardData | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)

  async function fetch(month: string) {
    loading.value = true
    error.value = null
    try {
      data.value = await api.get<DashboardData>(`/dashboard?month=${month}`)
    } catch (e: any) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  return { data, loading, error, fetch }
})