const THEME_STORAGE_KEY = 'theme-preference';
// Get stored preference or detect system preference
function getThemePreference()
{
  const stored = localStorage.getItem(THEME_STORAGE_KEY);
  if (stored) {
    return stored;
  }
  return 'auto';
}

function applyTheme(preference)
{
  const root = document.documentElement;

  if (preference === 'light') {
    root.classList.remove('dark', 'auto');
    root.classList.add('light-mode');
  } else if (preference === 'dark') {
    root.classList.remove('light-mode', 'auto');
    root.classList.add('dark');
  } else {
    // Auto - remove manual overrides and let CSS media query handle it
    root.classList.remove('light-mode', 'dark');
    root.classList.add('auto');
  }
}

(function() {
  const currentPreference = getThemePreference();
  applyTheme(currentPreference);
})();

/* Toggle lights auto and dark */
const toggle = document.querySelector('#themeToggle');
toggle.addEventListener('click', function() {
  let preference = getThemePreference();

  // Cycle through: auto -> light -> dark -> auto
  if (preference === 'auto') {
    preference = 'light';
  } else if (preference === 'light') {
    preference = 'dark';
  } else {
    preference = 'auto';
  }

  localStorage.setItem(THEME_STORAGE_KEY, preference);
  applyTheme(preference);
});