import { useEffect } from 'react';
import { useSettings } from './useSettings';

const ACCENT_PRESETS: Record<string, { h: number; s: number; l: number }> = {
  cyan: { h: 187, s: 85.7, l: 53.3 },
  blue: { h: 217, s: 91.2, l: 59.8 },
  purple: { h: 258, s: 89.5, l: 66.3 },
  orange: { h: 21, s: 94.6, l: 53.3 },
  green: { h: 142, s: 70.6, l: 45.3 },
  red: { h: 0, s: 84.2, l: 60.2 },
  pink: { h: 330, s: 81.2, l: 60.4 },
  yellow: { h: 48, s: 83.3, l: 47.5 },
};

export function useTheme() {
  const { settings } = useSettings();

  useEffect(() => {
    if (!settings?.accent_color) return;

    const preset = ACCENT_PRESETS[settings.accent_color];
    if (preset) {
      document.documentElement.style.setProperty('--accent-h', preset.h.toString());
      document.documentElement.style.setProperty('--accent-s', `${preset.s}%`);
      document.documentElement.style.setProperty('--accent-l', `${preset.l}%`);
    }
  }, [settings?.accent_color]);

  return {
    accentColor: settings?.accent_color || 'cyan',
    presets: ACCENT_PRESETS,
  };
}