import { useState, useEffect, useCallback } from 'react';

export interface SettingItem {
  id: string;
  name: string;
}

const SETTINGS_UPDATED_EVENT = 'category-settings-updated';

export function useSettings() {
  const [expenseTypes, setExpenseTypes] = useState<SettingItem[]>([]);
  const [paymentMethods, setPaymentMethods] = useState<SettingItem[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchSettings = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const [expenseRes, paymentRes] = await Promise.all([
        fetch('/api/categories/config/expense-types'),
        fetch('/api/categories/config/payment-methods')
      ]);

      if (!expenseRes.ok) throw new Error('Error al cargar tipos de gasto');
      if (!paymentRes.ok) throw new Error('Error al cargar formas de pago');

      const expenseData = await expenseRes.json();
      const paymentData = await paymentRes.json();

      setExpenseTypes(expenseData);
      setPaymentMethods(paymentData);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Error desconocido al cargar configuración');
    } finally {
      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchSettings();
  }, [fetchSettings]);

  useEffect(() => {
    const handleSettingsUpdated = () => {
      fetchSettings();
    };

    window.addEventListener(SETTINGS_UPDATED_EVENT, handleSettingsUpdated);
    return () => {
      window.removeEventListener(SETTINGS_UPDATED_EVENT, handleSettingsUpdated);
    };
  }, [fetchSettings]);

  // Generic function to handle operations
  const mutateSetting = async (
    endpoint: string,
    method: 'POST' | 'PUT' | 'DELETE',
    body?: any
  ) => {
    const res = await fetch(endpoint, {
      method,
      headers: { 'Content-Type': 'application/json' },
      body: body ? JSON.stringify(body) : undefined,
    });

    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      const statusLabel = res.status ? `(${res.status}) ` : '';
      throw new Error(`${statusLabel}${data.error || 'Error en la operación'}`);
    }

    await fetchSettings();
    window.dispatchEvent(new CustomEvent(SETTINGS_UPDATED_EVENT));
    return await res.json();
  };

  return {
    expenseTypes,
    paymentMethods,
    isLoading,
    error,
    
    // Expense Types
    createExpenseType: (name: string) => 
      mutateSetting('/api/categories/config/expense-types', 'POST', { name }),
    updateExpenseType: (id: string, name: string) => 
      mutateSetting(`/api/categories/config/expense-types/${id}`, 'PUT', { name }),
    deleteExpenseType: (id: string) => 
      mutateSetting(`/api/categories/config/expense-types/${id}`, 'DELETE'),
      
    // Payment Methods
    createPaymentMethod: (name: string) => 
      mutateSetting('/api/categories/config/payment-methods', 'POST', { name }),
    updatePaymentMethod: (id: string, name: string) => 
      mutateSetting(`/api/categories/config/payment-methods/${id}`, 'PUT', { name }),
    deletePaymentMethod: (id: string) => 
      mutateSetting(`/api/categories/config/payment-methods/${id}`, 'DELETE'),
      
    refetch: fetchSettings
  };
}