// Absolutely-positioned highlight bar that follows the cursor's Y position.
// Respects prefers-reduced-motion: caller should not enable this automatically
// when the OS reduced-motion preference is active.
const HEIGHT = 56;
let guide: HTMLElement | null = null;
let handler: ((e: MouseEvent) => void) | null = null;

export function toggle(on: boolean): void {
  if (on) {
    guide = document.createElement('div');
    guide.id = 'accessmate-reading-guide';
    guide.style.cssText =
      'position:fixed;left:0;right:0;' +
      `height:${HEIGHT}px;` +
      'background:rgba(255,255,150,.38);' +
      'pointer-events:none;' +
      'z-index:2147483646;' +
      'top:-100px;';
    document.body.appendChild(guide);

    handler = (e: MouseEvent) => {
      if (guide) guide.style.top = `${e.clientY - HEIGHT / 2}px`;
    };
    document.addEventListener('mousemove', handler, { passive: true });
  } else {
    guide?.remove();
    guide = null;
    if (handler) {
      document.removeEventListener('mousemove', handler);
      handler = null;
    }
  }
}