// Minimal CoBiE analog clock logic wrapped in its own scope to
// avoid clashes with variables from other scripts on the page.
(function () {
  const {
    COBIE_EPOCH,
    COBIE_UNITS,
    floorDiv,
    getTAIOffsetAt,
    toCobiets
  } = window.Cobie;

  // CoBiE helpers pulled from cobie.js

  function placeMarkers() {
    const clock = document.getElementById('clock');
    let markers = clock.querySelectorAll('.marker');

    // Create markers if they don't exist yet
    if (markers.length === 0) {
      for (let i = 0; i < 16; i++) {
        const m = document.createElement('div');
        m.className = 'marker';
        m.textContent = i.toString(16).toUpperCase();
        clock.appendChild(m);
      }
      markers = clock.querySelectorAll('.marker');
    }

    // Position markers based on the current clock size
    const radius = clock.offsetWidth / 2 - 20;
    markers.forEach((m, i) => {
      const angle = (i / 16) * 2 * Math.PI;
      const x = radius * Math.sin(angle);
      const y = -radius * Math.cos(angle);
      m.style.left = `${clock.offsetWidth / 2 + x}px`;
      m.style.top = `${clock.offsetHeight / 2 + y}px`;
    });
  }

  function updateClock() {
    const now = new Date();
    const cob = toCobiets(now);
    // Use fractional progress within each unit so angles stay small
    const xf = (cob % COBIE_UNITS.quantic) / COBIE_UNITS.quantic;
    const qf = (cob % COBIE_UNITS.chronon) / COBIE_UNITS.chronon;
    const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip;
    const ef = (cob % COBIE_UNITS.megasequence) / COBIE_UNITS.megasequence;
    const mf = (cob % COBIE_UNITS.cosmocycle) / COBIE_UNITS.cosmocycle;
    document.getElementById('handXeno').style.transform = `rotate(${xf * 360}deg)`;
    document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
    document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`;
    document.getElementById('handEonstrip').style.transform = `rotate(${ef * 360}deg)`;
    document.getElementById('handMegasequence').style.transform = `rotate(${mf * 360}deg)`;
  }

  function initClock() {
    placeMarkers();
    updateClock();
    setInterval(updateClock, 1000);
    const clk = document.getElementById('clock');
    if (clk) {
      clk.addEventListener('click', () => {
        document.body.classList.toggle('fullscreen-clock');
        // Re-position markers after toggling fullscreen
        requestAnimationFrame(placeMarkers);
      });
    }
    window.addEventListener('resize', placeMarkers);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initClock);
  } else {
    initClock();
  }
})();