import React, { createContext, useContext, ReactNode } from 'react';
import { useBudgetSettings, useUpdateBudgetSettings } from '@/hooks/useBudget';
import { BudgetSettings } from '@/types/budget';

interface BudgetContextType {
  settings: BudgetSettings | undefined;
  isLoading: boolean;
  updateSettings: (updates: Partial<BudgetSettings>) => void;
  formatCurrency: (amount: number) => string;
}

const BudgetContext = createContext<BudgetContextType | undefined>(undefined);

export function BudgetProvider({ children }: { children: ReactNode }) {
  const { data: settings, isLoading } = useBudgetSettings();
  const updateSettingsMutation = useUpdateBudgetSettings();

  const updateSettings = (updates: Partial<BudgetSettings>) => {
    updateSettingsMutation.mutate(updates);
  };

  const formatCurrency = (amount: number): string => {
    const currency = settings?.currency || 'USD';
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency,
      minimumFractionDigits: 0,
      maximumFractionDigits: 2,
    }).format(amount);
  };

  return (
    <BudgetContext.Provider value={{ settings, isLoading, updateSettings, formatCurrency }}>
      {children}
    </BudgetContext.Provider>
  );
}

export function useBudgetContext() {
  const context = useContext(BudgetContext);
  if (!context) {
    throw new Error('useBudgetContext must be used within a BudgetProvider');
  }
  return context;
}