const demoThemeButtons = [];
const demoThemeStorageKey = 'site-theme';

function normalizeDemoTheme(theme) {
  return theme === 'light' ? 'light' : 'dark';
}

function getStoredDemoTheme() {
  try {
    return localStorage.getItem(demoThemeStorageKey);
  } catch (_error) {
    return null;
  }
}

function storeDemoTheme(theme) {
  try {
    localStorage.setItem(demoThemeStorageKey, theme);
  } catch (_error) {
  }
}

function setDemoTheme(theme) {
  const nextTheme = normalizeDemoTheme(theme);
  document.body.classList.toggle('theme-light', nextTheme === 'light');
  document.body.classList.toggle('theme-dark', nextTheme === 'dark');

  demoThemeButtons.forEach((button) => {
    const active = button.dataset.siteTheme === nextTheme;
    button.classList.toggle('is-active', active);
    button.setAttribute('aria-pressed', active ? 'true' : 'false');
  });

  storeDemoTheme(nextTheme);
}

function installDemoThemeToolbar() {
  const nav = document.querySelector('.topline');
  if (!nav) return;

  const toolbar = document.createElement('div');
  toolbar.className = 'site-theme-toolbar';
  toolbar.setAttribute('aria-label', 'Theme');
  toolbar.innerHTML = '<span>Theme</span><button type="button" class="site-theme-option" data-site-theme="dark">Dark</button><span class="site-theme-separator" aria-hidden="true">|</span><button type="button" class="site-theme-option" data-site-theme="light">Light</button>';
  nav.appendChild(toolbar);

  demoThemeButtons.push(...toolbar.querySelectorAll('[data-site-theme]'));
  demoThemeButtons.forEach((button) => {
    button.addEventListener('click', () => setDemoTheme(button.dataset.siteTheme));
  });
}

installDemoThemeToolbar();
setDemoTheme(getStoredDemoTheme() || 'dark');