document.addEventListener('DOMContentLoaded', function() {
  console.log("🦶🦶🦶🦶🦶 FOOTNOTES LOADED 🦶🦶🦶🦶🦶🦶")

  const footnoteRefs = document.querySelectorAll('.footref')

  footnoteRefs.forEach(ref => {
    const footnoteId = ref.href.split('#')[1]
    ref.setAttribute('data-footnote-id', footnoteId)
    ref.href = 'javascript:void(0)';

    ref.addEventListener('mouseenter', function() {
      // Find footnote element
      const footnoteId = this.getAttribute('data-footnote-id')

      const footnoteElement = document.getElementById(footnoteId).parentElement.nextElementSibling.children[0]

      if (footnoteElement) {
        // Create tooltip container
        const tooltip = document.createElement('div');
        tooltip.className = 'footnote-tooltip'
        tooltip.innerHTML = footnoteElement.innerHTML

        // Position tooltip
        const rect = this.getBoundingClientRect();
        tooltip.style.position = 'absolute'
        tooltip.style.top = (rect.bottom + window.scrollY + 5) + 'px'
        tooltip.style.left = rect.left + 'px'

        // Add to page
        document.body.appendChild(tooltip)

        // Store reference for cleanup
        this._tooltip = tooltip
      }
    });

    ref.addEventListener('mouseleave', function() {
      // Remove tooltip
      if (this._tooltip) {
        this._tooltip.remove()
        this._tooltip = null
      }
    });
  });

  // Hide footnotes section
  document.querySelector("#footnotes").style.display='none'
});

function formatDayOfYear(dayOfYear, year) {
  const date = new Date(year, 0, dayOfYear);

  return date.toLocaleDateString('en-GB', {
    day: 'numeric',
    month: 'short',
    year: 'numeric'
  });
}

let selectedCell = null;

function showHabitPopup(cell) {
  var bodyHtml = cell.getAttribute('data-body');
  var doy = cell.getAttribute('data-doy');
  var activity = cell.getAttribute('data-activity');
  var status = cell.getAttribute('data-status');
  activity = activity.replace(/^dailies-/, '').replace(/^./, c => c.toUpperCase())

  if (!bodyHtml) bodyHtml = "<span class='center'><i>This section intentionally left blank.</i></span>"

  bodyHtml = `<h3><span class="grid ${status}">${activity}</span> — ${formatDayOfYear(parseInt(doy), 2025)}</h3> ${bodyHtml}`

  document.getElementById('habitPopupContent').innerHTML = bodyHtml;

  if (selectedCell) {
    selectedCell.classList.remove('habitgrid-selected');
  }

  cell.classList.add('habitgrid-selected');
  selectedCell = cell;
}