// 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`;
    });
  }

  const lastAngles = {
    handXeno: 0,
    handQuantic: 0,
    handChronon: 0,
    handEonstrip: 0,
    handMegasequence: 0
  };

  function rotateHand(id, angle) {
    const el = document.getElementById(id);
    if (!el) return;
    const prev = lastAngles[id];

    if (angle < prev) {
      // When wrapping around (e.g. 15 → 0), animate to one full turn
      // and then snap back to the new angle to avoid a jump.
      const target = angle + 360;
      const handle = () => {
        el.removeEventListener('transitionend', handle);
        // Snap back without animation
        el.style.transition = 'none';
        el.style.transform = `rotate(${angle}deg)`;
        void el.offsetWidth;
        el.style.transition = '';
      };
      el.addEventListener('transitionend', handle, { once: true });
      el.style.transform = `rotate(${target}deg)`;
    } else {
      el.style.transform = `rotate(${angle}deg)`;
    }

    lastAngles[id] = angle;
  }

  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;
    rotateHand('handXeno', xf * 360);
    rotateHand('handQuantic', qf * 360);
    rotateHand('handChronon', cf * 360);
    rotateHand('handEonstrip', ef * 360);
    rotateHand('handMegasequence', mf * 360);
  }

  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();
  }
})();