import type { ResolvedThemeMode, ThemeMode } from '../types/runtime';

export function detectSystemTheme(): ResolvedThemeMode {
  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
    return 'light';
  }

  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

export function resolveAppliedTheme(
  themeMode: ThemeMode,
  systemTheme: ResolvedThemeMode = detectSystemTheme(),
): ResolvedThemeMode {
  return themeMode === 'system' ? systemTheme : themeMode;
}

export function applyThemeModeToDocument(
  themeMode: ThemeMode,
  systemTheme: ResolvedThemeMode = detectSystemTheme(),
): ResolvedThemeMode {
  const appliedTheme = resolveAppliedTheme(themeMode, systemTheme);

  if (typeof document !== 'undefined') {
    const root = document.documentElement;
    root.classList.toggle('dark', appliedTheme === 'dark');
    root.dataset.theme = appliedTheme;
    root.style.colorScheme = appliedTheme;
  }

  return appliedTheme;
}

export function watchSystemTheme(onChange: (theme: ResolvedThemeMode) => void): () => void {
  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
    return () => {};
  }

  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  const handler = (event: MediaQueryListEvent) => {
    onChange(event.matches ? 'dark' : 'light');
  };

  if (typeof mediaQuery.addEventListener === 'function') {
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }

  mediaQuery.addListener(handler);
  return () => mediaQuery.removeListener(handler);
}