// Page-header controls shared by every per-frame page (Photos/
// Configuration/Calendar/Stats): the frame-name pencil-edit and the
// mode selector, both now living outside the tab structure since they
// apply regardless of which tab is open. Depends on window.FRAME_API
// (set per-page) and common.js's showStatus/apiError.

(function () {
  var view = document.getElementById('frame-name-view');
  var editRow = document.getElementById('frame-name-edit-row');
  var pencil = document.getElementById('frame-name-pencil');
  var input = document.getElementById('frame-name-input');
  var textEl = document.getElementById('frame-name-text');
  var saveBtn = document.getElementById('frame-name-save');
  var cancelBtn = document.getElementById('frame-name-cancel');
  if (!view || !window.FRAME_API) return;

  function openEdit() {
    input.value = textEl.textContent.trim();
    view.style.display = 'none';
    editRow.style.display = 'inline-flex';
    input.focus();
    input.select();
  }
  function closeEdit() {
    editRow.style.display = 'none';
    view.style.display = 'inline-flex';
  }

  pencil.addEventListener('click', openEdit);
  cancelBtn.addEventListener('click', closeEdit);

  async function save() {
    var name = input.value.trim();
    if (!name || name === textEl.textContent.trim()) {
      closeEdit();
      return;
    }
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ name }),
      });
      if (!resp.ok) throw new Error(await apiError(resp));
      textEl.textContent = name;
      closeEdit();
      showStatus(true, 'Renamed.');
    } catch (e) {
      showStatus(false, e.message);
    }
  }
  saveBtn.addEventListener('click', save);
  input.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') save();
    if (e.key === 'Escape') closeEdit();
  });
})();

(function () {
  var sel = document.getElementById('frame-mode-select');
  if (!sel || !window.FRAME_API) return;
  var previous = sel.value;

  sel.addEventListener('change', async function () {
    var mode = sel.value;
    try {
      const resp = await fetch(`${window.FRAME_API}/config`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({ mode }),
      });
      if (!resp.ok) throw new Error(await apiError(resp));
      previous = mode;
      showStatus(true, mode === 'calendar' ? 'Switched to Calendar mode.' : 'Switched to Photos mode.');
      var calTab = document.querySelector('.tabs a[href$="/calendar"]');
      if (calTab) calTab.classList.toggle('tab-disabled', mode !== 'calendar');
    } catch (e) {
      sel.value = previous;
      showStatus(false, e.message);
    }
  });
})();