import { useState, useEffect, createContext, useContext } from 'react';
import type { Settings } from '../types';
import { getSettings } from '../api';

const DEFAULT: Settings = {
  app_title: 'AI Tools Dashboard',
  logo_url: null,
  accent_color: '#6366f1',
  company_name: 'Your Company',
};

export const SettingsContext = createContext<{
  settings: Settings;
  reload: () => void;
}>({ settings: DEFAULT, reload: () => {} });

export function useSettingsProvider() {
  const [settings, setSettings] = useState<Settings>(DEFAULT);

  const reload = () => {
    getSettings().then(setSettings).catch(() => {});
  };

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

  // Apply accent color as CSS variable
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', settings.accent_color);
    // Generate lighter/darker variants
    document.documentElement.style.setProperty('--accent-dim', `${settings.accent_color}33`);
  }, [settings.accent_color]);

  return { settings, reload };
}

export const useSettings = () => useContext(SettingsContext);