/**
 * Client-side measurement toggle.
 * Default: metric units, collapsed times (rendered at build time).
 * Each measurement type gets its own toggle button.
 *
 * Each measurement span has data-default and data-alt attributes
 * pre-computed at build time. This script just swaps between them
 * per measurement type.
 */

(function () {
  'use strict';

  // Track which types are showing alt text
  var showingAlt = {};

  var TYPE_LABELS = {
    temperature: { toAlt: '°F', toDefault: '°C' },
    weight:      { toAlt: 'lb', toDefault: 'kg' },
    volume:      { toAlt: 'cups', toDefault: 'ml' },
    dimension:   { toAlt: 'inch', toDefault: 'cm' },
    time:        { toAlt: 'hr+min', toDefault: 'min' },
  };

  function toggleType(type) {
    showingAlt[type] = !showingAlt[type];
    var isAlt = showingAlt[type];

    // Update all spans of this type
    var spans = document.querySelectorAll('span.measurement[data-measurement-type="' + type + '"]');
    spans.forEach(function (span) {
      var text = isAlt
        ? span.getAttribute('data-alt')
        : span.getAttribute('data-default');
      if (text) span.textContent = text;
    });

    // Update button text
    var btn = document.querySelector('.measurement-toggle-btn[data-toggle-type="' + type + '"]');
    if (btn) {
      var labels = TYPE_LABELS[type];
      btn.textContent = isAlt ? labels.toAlt : labels.toDefault;
    }
  }

  function init() {
    var container = document.querySelector('.measurement-toggles');
    if (!container) return;

    // Detect which types exist and have toggleable content
    var typeHasToggle = {};
    var spans = document.querySelectorAll('span.measurement');
    spans.forEach(function (span) {
      var type = span.getAttribute('data-measurement-type');
      if (!type) return;
      var def = span.getAttribute('data-default');
      var alt = span.getAttribute('data-alt');
      if (def !== alt) typeHasToggle[type] = true;
    });

    var typeOrder = ['temperature', 'weight', 'volume', 'dimension', 'time'];
    var hasAny = false;

    typeOrder.forEach(function (type) {
      if (!typeHasToggle[type]) return;
      hasAny = true;
      showingAlt[type] = false;

      var btn = document.createElement('button');
      btn.className = 'measurement-toggle-btn';
      btn.setAttribute('data-toggle-type', type);
      btn.textContent = TYPE_LABELS[type].toDefault;
      btn.addEventListener('click', function () { toggleType(type); });
      container.appendChild(btn);
    });

    if (hasAny) {
      container.style.display = 'flex';
    }
  }

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