let styleEl: HTMLStyleElement | null = null;

export function toggle(on: boolean): void {
  if (on) {
    if (document.getElementById('accessmate-dyslexia-style')) return;
    const cfg = (window as unknown as Record<string, unknown>).accessmateWidgetConfig as { dyslexicFontUrl?: string } | undefined;
    const fontUrl = cfg?.dyslexicFontUrl ?? '';
    // Add a marker class to <html> so our selector has higher specificity (0,1,2)
    // than most theme/plugin rules — beats .some-class p { !important } (0,1,1).
    document.documentElement.classList.add('am-dyslexia');
    styleEl = document.createElement('style');
    styleEl.id = 'accessmate-dyslexia-style';
    styleEl.textContent = (fontUrl
      ? `@font-face{font-family:'OpenDyslexic';src:url('${fontUrl}') format('woff2');font-weight:400;font-style:normal;font-display:swap}`
      : '') +
      `html.am-dyslexia body,html.am-dyslexia body *{font-family:'OpenDyslexic',Arial,sans-serif!important}`;
    document.head.appendChild(styleEl);
  } else {
    document.documentElement.classList.remove('am-dyslexia');
    (styleEl ?? document.getElementById('accessmate-dyslexia-style'))?.remove();
    styleEl = null;
  }
}