export function mountAppBar({ onManageAccess } = {}) {
  const header = document.querySelector('#site-header');
  if (!header) throw new Error('Global app bar mount point is missing.');

  header.innerHTML = `
    <a class="brand" href="/" aria-label="Our Recipe Atlas 홈">
      <span class="brand-mark brand-mark-small" aria-hidden="true">ORA</span>
      <span>Our Recipe Atlas</span>
    </a>
    <div class="profile">
      <img id="profile-image" class="avatar" alt="" hidden>
      <span id="profile-name"></span>
      <button id="access-menu-button" class="menu-button" type="button"
              aria-label="메뉴 열기" aria-controls="access-drawer"
              aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>`;

  header.insertAdjacentHTML('afterend', `
    <button id="drawer-backdrop" class="drawer-backdrop" type="button"
            aria-label="메뉴 닫기" hidden></button>
    <aside id="access-drawer" class="access-drawer" role="dialog" aria-modal="true"
           aria-labelledby="drawer-title" aria-hidden="true" hidden>
      <div class="drawer-heading">
        <div>
          <p class="section-number">MENU</p>
          <h2 id="drawer-title">메뉴</h2>
        </div>
        <button id="close-access-drawer" class="drawer-close" type="button"
                aria-label="메뉴 닫기">×</button>
      </div>
      <div class="drawer-account">
        <strong id="drawer-user-name"></strong>
        <span id="drawer-user-email"></span>
      </div>
      <div class="drawer-actions">
        <button id="open-access-overlay" class="drawer-action" type="button" hidden>
          <span>로그인 허용 계정 관리</span><small>관리자</small>
        </button>
        <button id="drawer-logout" class="drawer-action danger" type="button" data-logout>
          로그아웃
        </button>
      </div>
    </aside>`);

  const elements = {
    menuButton: document.querySelector('#access-menu-button'),
    profileImage: document.querySelector('#profile-image'),
    profileName: document.querySelector('#profile-name'),
    drawer: document.querySelector('#access-drawer'),
    closeButton: document.querySelector('#close-access-drawer'),
    backdrop: document.querySelector('#drawer-backdrop'),
    manageAccessButton: document.querySelector('#open-access-overlay'),
    drawerUserName: document.querySelector('#drawer-user-name'),
    drawerUserEmail: document.querySelector('#drawer-user-email'),
  };

  function setOpen(open) {
    elements.menuButton.setAttribute('aria-expanded', String(open));
    elements.drawer.setAttribute('aria-hidden', String(!open));
    elements.drawer.hidden = !open;
    elements.backdrop.hidden = !open;
    document.body.classList.toggle('drawer-open', open);
    if (open) elements.closeButton.focus();
    else elements.menuButton.focus();
  }

  elements.menuButton.addEventListener('click', () => setOpen(true));
  elements.closeButton.addEventListener('click', () => setOpen(false));
  elements.backdrop.addEventListener('click', () => setOpen(false));
  elements.manageAccessButton.addEventListener('click', () => {
    setOpen(false);
    if (onManageAccess) onManageAccess();
    else window.location.assign('/?manage-access=1');
  });
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !elements.drawer.hidden) setOpen(false);
  });

  return {
    focusMenuButton() {
      elements.menuButton.focus();
    },
    setUser(user) {
      elements.profileName.textContent = user.name || user.email;
      if (user.picture) {
        elements.profileImage.src = user.picture;
        elements.profileImage.alt = `${user.name || user.email} 프로필`;
        elements.profileImage.hidden = false;
      }
      elements.drawerUserName.textContent = user.name || user.email;
      elements.drawerUserEmail.textContent = user.email;
      elements.manageAccessButton.hidden = !user.canManageAccess;
    },
  };
}