async function loadAnnotations(){
  const panel=document.getElementById('active-note-panel');
  const marks=[...document.querySelectorAll('.annotated-highlight[data-note-id]')];
  if(!panel || !marks.length) return;

  const emptyHTML='<p class="note-empty">Click a highlighted passage in the text to read its annotation.</p>';
  const res=await fetch('data/annotations.json');
  const notes=await res.json();
  const byId=Object.fromEntries(notes.map(n=>[n.id,n]));

  function clear(){
    document.querySelectorAll('.annotated-highlight.is-active').forEach(el=>el.classList.remove('is-active'));
    panel.dataset.empty='true';
    panel.className='active-note-panel';
    panel.innerHTML=emptyHTML;
  }

  function render(noteId, mark){
    const note=byId[noteId];
    if(!note) return;
    document.querySelectorAll('.annotated-highlight.is-active').forEach(el=>el.classList.remove('is-active'));
    mark.classList.add('is-active');
    panel.dataset.empty='false';
    panel.className=`active-note-panel ${note.type || ''}`.trim();
    panel.innerHTML=`
      <div class="active-note-type">${note.title}</div>
      <div class="note-body">${note.html || `<p>${note.text || ''}</p>`}</div>
    `;
  }

  marks.forEach(mark=>{
    mark.addEventListener('click',(event)=>{event.stopPropagation();render(mark.dataset.noteId, mark);});
    mark.addEventListener('keydown',(event)=>{
      if(event.key==='Enter' || event.key===' '){
        event.preventDefault();
        event.stopPropagation();
        render(mark.dataset.noteId, mark);
      }
      if(event.key==='Escape') clear();
    });
  });

  panel.addEventListener('click',event=>event.stopPropagation());
  document.addEventListener('click',event=>{
    if(!event.target.closest('.annotated-highlight') && !event.target.closest('#active-note-panel')) clear();
  });
  document.addEventListener('keydown',event=>{ if(event.key==='Escape') clear(); });
}
loadAnnotations();