(() => {
  const root = document.documentElement;
  const appShell = document.querySelector('.app-shell');
  const sidebar = document.getElementById('teacherSidebar');
  const overlay = document.getElementById('sidebarOverlay');
  const openButton = document.getElementById('menuToggle');
  const closeButton = document.getElementById('sidebarClose');
  const sidebarToggle = document.getElementById('sidebarToggle');
  const themeButton = document.getElementById('themeToggle');
  const profileWrap = document.getElementById('profileMenuWrap');
  const profileButton = document.getElementById('profileMenuButton');
  const profileDropdown = document.getElementById('profileDropdown');
  const addWrap = document.getElementById('addMenuWrap');
  const addButton = document.getElementById('addMenuButton');
  const addDropdown = document.getElementById('addDropdown');
  const search = document.getElementById('teacherSearch');

  /* ─── Sidebar Mobile Toggle ──────── */
  const setSidebar = (isOpen) => {
    sidebar?.classList.toggle('open', isOpen);
    overlay?.classList.toggle('show', isOpen);
    document.body.classList.toggle('menu-open', isOpen);
    overlay?.setAttribute('aria-hidden', String(!isOpen));
  };

  openButton?.addEventListener('click', () => setSidebar(true));
  closeButton?.addEventListener('click', () => setSidebar(false));
  overlay?.addEventListener('click', () => setSidebar(false));

  /* ─── Sidebar Collapse Toggle ────── */
  sidebarToggle?.addEventListener('click', () => {
    appShell?.classList.toggle('sidebar-collapsed');
    const isCollapsed = appShell?.classList.contains('sidebar-collapsed');
    localStorage.setItem('englishspeak-sidebar-collapsed', String(isCollapsed));
  });

  // Restore collapsed state
  const savedCollapsed = localStorage.getItem('englishspeak-sidebar-collapsed');
  if (savedCollapsed === 'true') {
    appShell?.classList.add('sidebar-collapsed');
  }

  /* ─── Theme ──────────────────────── */
  const savedTheme = localStorage.getItem('englishspeak-theme');
  if (savedTheme === 'dark' || savedTheme === 'light') {
    root.dataset.theme = savedTheme;
  }

  themeButton?.addEventListener('click', () => {
    const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
    root.dataset.theme = next;
    localStorage.setItem('englishspeak-theme', next);
  });

  /* ─── Profile Dropdown ───────────── */
  profileButton?.addEventListener('click', (event) => {
    event.stopPropagation();
    const isOpen = profileDropdown?.classList.toggle('open') ?? false;
    profileButton?.setAttribute('aria-expanded', String(isOpen));
    profileWrap?.classList.toggle('open', isOpen);
    // Close add dropdown if open
    addDropdown?.classList.remove('open');
    addWrap?.classList.remove('open');
    addButton?.setAttribute('aria-expanded', 'false');
  });

  /* ─── Add Menu Dropdown ──────────── */
  addButton?.addEventListener('click', (event) => {
    event.stopPropagation();
    const isOpen = addDropdown?.classList.toggle('open') ?? false;
    addButton?.setAttribute('aria-expanded', String(isOpen));
    addWrap?.classList.toggle('open', isOpen);
    // Close profile dropdown if open
    profileDropdown?.classList.remove('open');
    profileWrap?.classList.remove('open');
    profileButton?.setAttribute('aria-expanded', 'false');
  });

  /* ─── Close Dropdowns on Outside Click ── */
  document.addEventListener('click', () => {
    if (profileDropdown?.classList.contains('open')) {
      profileDropdown.classList.remove('open');
      profileButton?.setAttribute('aria-expanded', 'false');
      profileWrap?.classList.remove('open');
    }
    if (addDropdown?.classList.contains('open')) {
      addDropdown.classList.remove('open');
      addButton?.setAttribute('aria-expanded', 'false');
      addWrap?.classList.remove('open');
    }
  });

  /* ─── Keyboard Shortcuts ─────────── */
  document.addEventListener('keydown', (event) => {
    // Cmd/Ctrl + K = focus search
    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
      event.preventDefault();
      search?.focus();
    }
    // Escape = close everything
    if (event.key === 'Escape') {
      setSidebar(false);
      profileDropdown?.classList.remove('open');
      profileWrap?.classList.remove('open');
      profileButton?.setAttribute('aria-expanded', 'false');
      addDropdown?.classList.remove('open');
      addWrap?.classList.remove('open');
      addButton?.setAttribute('aria-expanded', 'false');
    }
  });
})();