import { useEffect, useState, useCallback } from 'react';
import {
  getSettings,
  updateSettings,
  type UserSettingsData,
  type SectionSettings,
} from '../api';

const DEFAULT_SETTINGS: UserSettingsData = {
  dashboard: {
    sections: {
      crc_accounts: { label: 'CRC Accounts', color: 'primary', cardColor: 'primary', visible: true, order: 0, expanded: false },
      usd_accounts: { label: 'USD Accounts', color: 'chart-1', cardColor: 'chart-1', visible: true, order: 1, expanded: false },
      pension: { label: 'Pension', color: 'chart-2', cardColor: 'chart-2', visible: true, order: 2, expanded: false },
      savings: { label: 'Savings', color: 'chart-3', cardColor: 'chart-3', visible: true, order: 3, expanded: false },
      liabilities: { label: 'Liabilities', color: 'destructive', cardColor: 'destructive', visible: true, order: 4, expanded: false },
      crypto: { label: 'Crypto', color: 'chart-4', cardColor: 'chart-4', visible: true, order: 5, expanded: false },
    },
  },
};

export function useSettings() {
  const [settings, setSettings] = useState<UserSettingsData>(DEFAULT_SETTINGS);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getSettings()
      .then((r) => setSettings(r.data.data))
      .catch(() => {}) // use defaults on error
      .finally(() => setLoading(false));
  }, []);

  const patchSection = useCallback(
    async (sectionId: string, partial: Partial<SectionSettings>) => {
      setSettings((prev) => {
        const updated = {
          ...prev,
          dashboard: {
            ...prev.dashboard,
            sections: {
              ...prev.dashboard.sections,
              [sectionId]: { ...prev.dashboard.sections[sectionId], ...partial },
            },
          },
        };
        // Fire-and-forget save
        updateSettings(updated).catch(console.error);
        return updated;
      });
    },
    []
  );

  return { settings, loading, patchSection };
}