script.js

const toggles = document.querySelectorAll('.work-toggle');

async function loadContent(toggle) {
  const targetId = toggle.dataset.target;
  const content = document.getElementById(targetId);
  const icon = toggle.querySelector('.work-icon');

  if (!content) return;

  const isOpen = !content.hasAttribute('hidden');

  if (isOpen) {
    content.setAttribute('hidden', '');
    if (icon) icon.textContent = '+';
    return;
  }

  content.removeAttribute('hidden');
  if (icon) icon.textContent = '−';

  if (content.dataset.loaded === 'true') return;

  try {
    const response = await fetch('./content/police-records-access-project.md');
    if (!response.ok) {
      throw new Error('Unable to load content.');
    }

    const markdown = await response.text();
    content.innerHTML = renderMarkdown(markdown);
    content.dataset.loaded = 'true';
  } catch (error) {
    content.innerHTML = '<p>Project details will appear here once the article content is available.</p>';
    content.dataset.loaded = 'true';
  }
}

function renderMarkdown(markdown) {
  const lines = markdown.split(/\r?\n/);
  const html = [];
  const footnotes = {};
  let paragraph = [];
  let listType = null;
  let listItems = [];

  const formatInline = (text) => {
    return text
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\[\^([^^\]]+)\]/g, (_, id) => {
        const label = id.replace(/^e/, '');
        return `<sup class="footnote-ref"><a href="#fn-${id}" id="fnref-${id}">${label}</a></sup>`;
      });
  };

  const flushParagraph = () => {
    if (paragraph.length) {
      const text = paragraph.join(' ').trim();
      if (text) {
        html.push(`<p>${formatInline(text)}</p>`);
      }
      paragraph = [];
    }
  };

  const flushList = () => {
    if (listItems.length) {
      const tag = listType === 'ordered' ? 'ol' : 'ul';
      html.push(`<${tag}>${listItems.map((item) => `<li>${formatInline(item)}</li>`).join('')}</${tag}>`);
      listItems = [];
      listType = null;
    }
  };

  const bodyLines = [];

  for (const line of lines) {
    const trimmed = line.trim();
    const noteMatch = trimmed.match(/^\[\^([^\]]+)\]:\s*(.*)$/);

    if (noteMatch) {
      footnotes[noteMatch[1]] = noteMatch[2];
      continue;
    }

    bodyLines.push(trimmed);
  }

  for (const line of bodyLines) {
    const trimmed = line.trim();

    if (!trimmed) {
      flushParagraph();
      flushList();
      continue;
    }

    if (/^#{1,6}\s/.test(trimmed)) {
      flushParagraph();
      flushList();
      const level = trimmed.match(/^#+/)[0].length;
      const text = formatInline(trimmed.replace(/^#{1,6}\s/, ''));
      html.push(`<h${level}>${text}</h${level}>`);
      continue;
    }

    if (/^---$/.test(trimmed)) {
      flushParagraph();
      flushList();
      html.push('<hr />');
      continue;
    }

    if (/^[-*]\s/.test(trimmed)) {
      flushParagraph();
      const itemText = trimmed.replace(/^[-*]\s/, '');
      listType = listType || 'unordered';
      if (listType !== 'unordered') {
        flushList();
        listType = 'unordered';
      }
      listItems.push(itemText);
      continue;
    }

    if (/^\d+\.\s/.test(trimmed)) {
      flushParagraph();
      const itemText = trimmed.replace(/^\d+\.\s/, '');
      listType = listType || 'ordered';
      if (listType !== 'ordered') {
        flushList();
        listType = 'ordered';
      }
      listItems.push(itemText);
      continue;
    }

    paragraph.push(trimmed);
  }

  flushParagraph();
  flushList();

  if (Object.keys(footnotes).length) {
    const footnoteList = Object.entries(footnotes)
      .map(([id, content]) => `<li id="fn-${id}" class="footnote-item">${formatInline(content)} <a href="#fnref-${id}" class="footnote-backref">↩</a></li>`)
      .join('');
    html.push(`<section class="footnotes"><h3>Endnotes</h3><ol>${footnoteList}</ol></section>`);
  }

  return `<article class="markdown-body">${html.join('')}</article>`;
}

for (const toggle of toggles) {
  toggle.addEventListener('click', () => {
    loadContent(toggle);
  });
}

const firstToggle = toggles[0];
if (firstToggle) {
  loadContent(firstToggle);
}