// Page-header controls shared by every per-frame page (Photos/
// Configuration/Calendar/Whiteboard/Stats): the frame-name pencil-edit,
// living outside the tab structure since it applies 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();
  });
})();
