export interface UIFont {
  label: string
  value: string
  category: 'default' | 'accessibility' | 'general'
}

export const UI_FONTS: UIFont[] = [
  { label: 'Inter (Default)', value: 'Inter', category: 'default' },
  { label: 'OpenDyslexic', value: 'OpenDyslexic', category: 'accessibility' },
  { label: 'Atkinson Hyperlegible', value: 'Atkinson Hyperlegible', category: 'accessibility' },
  { label: 'Lexie Readable', value: 'Lexie Readable', category: 'accessibility' },
  { label: 'Comic Neue', value: 'Comic Neue', category: 'general' },
  { label: 'Nunito', value: 'Nunito', category: 'general' },
  { label: 'Lato', value: 'Lato', category: 'general' },
  { label: 'Source Sans 3', value: 'Source Sans 3', category: 'general' },
]

const loadedUIFonts = new Set<string>()

export function loadUIFont(fontName: string): void {
  if (fontName === 'Inter' || loadedUIFonts.has(fontName)) return
  loadedUIFonts.add(fontName)
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontName)}:wght@400;500;600;700&display=swap`
  document.head.appendChild(link)
}

export function applyUIFont(fontName: string): void {
  const el = document.documentElement
  if (fontName === 'Inter') {
    el.style.removeProperty('--font-ui')
    document.body.style.fontFamily = ''
  } else {
    const fontValue = `'${fontName}', system-ui, sans-serif`
    el.style.setProperty('--font-ui', fontValue)
    document.body.style.fontFamily = `var(--font-ui)`
  }
}

export function loadAndApplyUIFont(fontName: string): void {
  loadUIFont(fontName)
  applyUIFont(fontName)
}
