import { ref, watchEffect } from 'vue';

type Mode = 'system' | 'light' | 'dark';

const KEY = 'numolus:theme';
/** Key used before the rename to numolus -- still read as a fallback. */
const LEGACY_KEY = 'numbers-study:theme';
const stored =
  ((localStorage.getItem(KEY) ?? localStorage.getItem(LEGACY_KEY)) as Mode | null) ??
  'system';
const mode = ref<Mode>(stored);

watchEffect(() => {
  const root = document.documentElement;
  if (mode.value === 'system') root.removeAttribute('data-theme');
  else root.setAttribute('data-theme', mode.value);
  try {
    localStorage.setItem(KEY, mode.value);
  } catch {
    /* ignore */
  }
});

/** True when the effective theme is dark (used to recolour Chart.js). */
function isDarkNow(): boolean {
  if (mode.value === 'dark') return true;
  if (mode.value === 'light') return false;
  return window.matchMedia('(prefers-color-scheme: dark)').matches;
}

export function useTheme() {
  function cycle() {
    mode.value =
      mode.value === 'system' ? 'light' : mode.value === 'light' ? 'dark' : 'system';
  }
  return { mode, cycle, isDarkNow };
}