export type Theme = 'system' | 'light' | 'dark';
export type FontSize = 'small' | 'medium' | 'large';

const THEME_KEY = 'app_theme';
const FONT_KEY = 'app_font_size';

export function applyTheme(theme: Theme) {
  const body = document.body;
  const effective = theme === 'system' ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
  body.setAttribute('data-theme', effective);
}

export function applyFontSize(size: FontSize) {
  const root = document.documentElement;
  const map: Record<FontSize, string> = {
    small: '14px',
    medium: '18px',
    large: '22px',
  };
  root.style.fontSize = map[size];
}

export function saveAppearance(theme: Theme, size: FontSize) {
  localStorage.setItem(THEME_KEY, theme);
  localStorage.setItem(FONT_KEY, size);
}

export function loadAppearance(): { theme: Theme; size: FontSize } {
  const theme = (localStorage.getItem(THEME_KEY) as Theme) || 'light';
  const size = (localStorage.getItem(FONT_KEY) as FontSize) || 'medium';
  return { theme, size };
}

export function applyAppearanceFromStorage() {
  const { theme, size } = loadAppearance();
  applyTheme(theme);
  applyFontSize(size);
}