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

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

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

function populateHeader()
{
  fetch("/parts/headers.html")
    .then(res => res.text())
    .then(headerHTML => {
      const range = document.createRange();
      const fragment = range.createContextualFragment(headerHTML);
      header.appendChild(fragment);
      
      const toggle = document.querySelector('#themeToggle');
      if (!toggle) return;

      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(STORAGE_KEY, preference);
        applyTheme(preference);
      });
    });
}
populateHeader();

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