export function initSidebarToggle(options = {}) {
  const {
    buttonSelector = '#toggle-aside',
    asideSelector = '#app-sidebar',
    containerSelector = '.app-container',
    storageKey = 'app-sidebar-collapsed'
  } = options;

  const aside = document.querySelector(asideSelector);
  if (!aside) return null;

  const buttons = Array.from(document.querySelectorAll(buttonSelector));
  const container = document.querySelector(containerSelector);
  const root = document.documentElement;

  const readStored = () => {
    try {
      return window.localStorage.getItem(storageKey);
    } catch (error) {
      return null;
    }
  };

  const writeStored = (collapsed) => {
    try {
      window.localStorage.setItem(storageKey, collapsed ? '1' : '0');
    } catch (error) {
      // ignore storage errors
    }
  };

  const applyState = (collapsed, { persist = false } = {}) => {
    aside.classList.toggle('is-collapsed', collapsed);
    if (container) {
      container.classList.toggle('is-sidebar-collapsed', collapsed);
    }
    if (root) {
      root.classList.toggle('sidebar-collapsed', collapsed);
    }
    buttons.forEach((button) => {
      if (!button.getAttribute('aria-controls')) {
        button.setAttribute('aria-controls', aside.id || 'app-sidebar');
      }
      button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
    });
    if (persist) {
      writeStored(collapsed);
    }
  };

  const isCollapsed = () => aside.classList.contains('is-collapsed');

  const getInitialState = () => {
    const stored = readStored();
    if (stored === '1' || stored === '0') {
      return stored === '1';
    }
    return root?.classList.contains('sidebar-collapsed') ?? false;
  };

  const controller = {
    isCollapsed,
    open: ({ persist = true } = {}) => applyState(false, { persist }),
    close: ({ persist = true } = {}) => applyState(true, { persist }),
    toggle: ({ persist = true } = {}) => applyState(!isCollapsed(), { persist }),
    apply: (collapsed, { persist = false } = {}) => applyState(!!collapsed, { persist })
  };

  applyState(getInitialState(), { persist: false });

  buttons.forEach((button) => {
    button.addEventListener('click', (event) => {
      event.preventDefault();
      controller.toggle({ persist: true });
    });
  });

  document.addEventListener('app:sidebar', (event) => {
    const detail = event.detail || {};
    const action = detail.action;
    const persist = detail.persist ?? false;
    if (action === 'open') controller.open({ persist });
    if (action === 'close') controller.close({ persist });
    if (action === 'toggle') controller.toggle({ persist });
  });

  window.AppSidebar = controller;
  return controller;
}

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