import { useEffect, useState } from 'react';

/**
 * Possible user-facing color scheme preferences.
 */
export type ColorSchemePreference = 'light' | 'dark' | 'system';

const MEDIA_QUERY = '(prefers-color-scheme: dark)';

/**
 * Resolves a persisted preference into an explicit light/dark value.
 *
 * @param pref - Stored preference value (`light`, `dark`, or `system`).
 * @returns Explicit light/dark scheme suitable for rendering.
 */
function resolveScheme(pref: ColorSchemePreference): 'light' | 'dark' {
	if (pref === 'light' || pref === 'dark') return pref;
	if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
		return 'light';
	}
	return window.matchMedia(MEDIA_QUERY).matches ? 'dark' : 'light';
}

/**
 * React hook that returns the effective light/dark scheme, respecting system preferences.
 *
 * @param preference - User preference; defaults to following the OS setting.
 * @returns {'light' | 'dark'} Explicit scheme that should be used for rendering.
 */
export function useColorScheme(preference: ColorSchemePreference = 'system'): 'light' | 'dark' {
	const [scheme, setScheme] = useState<'light' | 'dark'>(() => resolveScheme(preference));

	useEffect(() => {
		if (preference === 'light' || preference === 'dark') {
			setScheme(preference);
			return;
		}
		if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
			setScheme('light');
			return;
		}
		const media = window.matchMedia(MEDIA_QUERY);
		const update = (event: MediaQueryListEvent | MediaQueryList) => {
			setScheme(event.matches ? 'dark' : 'light');
		};
		update(media);
		if (typeof media.addEventListener === 'function') {
			media.addEventListener('change', update);
			return () => media.removeEventListener('change', update);
		}
		media.addListener(update);
		return () => media.removeListener(update);
	}, [preference]);

	return scheme;
}