class UserSettings {
	constructor() {
		this.cache = new window.jvbCache('settings');
		this.cache.loadFromCache();
		this.findSettings();

		this.debouncer = window.debouncer;

		this.isLoggedIn = window.auth.getUser() !== null;

		this.initListeners();
		this.loadSettings();
		this.subscribers = new Set();
	}
	findSettings() {
		this.settings = document.querySelectorAll('[data-setting]')??[];
	}
	addSetting(element, name = '', value = null) {
		name = name === '' ? element.name : name;
		element.dataset.setting = name;
		let cached = this.cache.get(name);
		if (cached) {
			if (element.tagName === 'INPUT' && ['checkbox', 'radio'].includes(element.type)) {
				element.checked = (cached === element.value);
			} else if (element.tagName === 'DETAILS') {
				element.open = (cached === 'on');
			}

		}
		this.debouncer.schedule(
			'add-setting',
			() => {
				this.findSettings.bind(this);
			},
			300
		);
	}
	loadSettings()
	{
		for (const input of this.settings) {
			let setting = input.name;
			if (Object.hasOwn(input.dataset, 'theme')) {
				this.checkTheme(input);
			} else {
				let stored = this.cache.get(setting);

				if (stored) {
					if (input.value === 'on') {
						input.checked = stored === 'on';
					} else if (['checkbox', 'radio'].includes(input.tagName)) {
						input.checked = input.value === stored;
					} else {
						input.value = stored;
					}
				}
			}
		}
	}

	checkTheme(themeSwitch)
	{
		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
		let stored = this.cache.get('dark-mode');
		if (prefersDark && (!stored || stored !== 'off')) {
			themeSwitch.checked = true;
		} else if (stored === 'on') {
			themeSwitch.checked = true;
		}
	}

	initListeners() {
		this.changeHandler = this.handleChange.bind(this);
		document.addEventListener('change', this.changeHandler);
	}

	handleChange(e) {
		if (!Object.hasOwn(e.target.dataset, 'setting')) {
			return;
		}
		let value = e.target.value;
		if (e.target.value === 'on') {
			value = e.target.checked ? 'on' : 'off';
		}
		this.saveSetting(e.target.name, value);

	}

	saveSetting(name, value) {
		let old;
		if (this.isLoggedIn){
			old = this.cache.get(name);
		}

		this.cache.set(name, value);
		if (this.isLoggedIn && old && old !== value) {
			this.saveToServer(name, value);
		}
	}

	async saveToServer(name, value)
	{
		if (!this.isLoggedIn || !['dark-mode'].includes(name)){
			return;
		}
		const headers = {
			'X-WP-Nonce': window.auth.getNonce(),
			'Content-Type': 'application/json'
		};
		const body = {
			user: window.auth.getUser(),
			setting: name,
			value: value
		};
		const response = await fetch(
			`${jvbSettings.api}settings`,
		{
				method:	'POST',
				headers: headers,
				body: JSON.stringify(body)
			}
		);
		const result = await response.json();

	}

	loadSetting(name) {
		return this.cache.get(name);
	}

	loadUserSetting(name) {

	}

	/**
	 * Event system
	 */
	subscribe(callback) {
		this.subscribers.add(callback);
		return () => this.subscribers.delete(callback);
	}

	notify(event, data) {
		this.subscribers.forEach(cb => cb(event, data));
	}

	/***************************************************
	 CLEANUP
	***************************************************/
	destroy() {
		document.removeEventListener('change', this.changeHandler);
		this.subscribers.clear();
	}
}

document.addEventListener('DOMContentLoaded', async function() {
	window.auth.subscribe((event) => {
		if (event === 'auth-loaded') {
			window.jvbUserSettings = new UserSettings();
		}
	});
});
//
// // Theme switching functionality
// document.addEventListener('DOMContentLoaded', function() {
// 	console.log('Theme switch initiated');
// 	const themeSwitch = document.getElementById('theme-switch');
//
// 	if (!themeSwitch) return;
//
// 	// Initialize theme from localStorage or system preference
// 	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
// 	const storedTheme = localStorage.getItem('theme');
//
// 	if (storedTheme) {
// 		document.documentElement.classList.toggle('dark', storedTheme === 'dark');
// 		themeSwitch.checked = storedTheme === 'dark';
// 	} else {
// 		document.documentElement.classList.toggle('dark', prefersDark.matches);
// 		themeSwitch.checked = prefersDark.matches;
// 	}
//
// 	// Handle theme switch changes
// 	themeSwitch.addEventListener('change', async function () {
// 		const isDark = this.checked;
// 		document.documentElement.classList.toggle('dark', isDark);
// 		localStorage.setItem('theme', isDark ? 'dark' : 'light');
//
// 		// If user is logged in, save preference
// 		if (window.auth.getUser() !== null) {
// 			try {
// 				await fetch(`${jvbSettings.api}settings`, {
// 					method: 'POST',
// 					headers: {
// 						'Content-Type': 'application/json',
// 						'X-WP-Nonce': window.auth.getNonce(),
// 						'X-Action-Nonce': window.auth.getNonce('dash'),
// 					},
// 					body: JSON.stringify({
// 						dark_mode: isDark,
// 						user: window.auth.getUser()
// 					})
// 				});
// 			} catch (error) {
// 				console.error('Failed to save theme preference:', error);
// 			}
// 		}
//
// 		// Update label
// 		const label = document.getElementById('theme-switch');
// 		if (label) {
// 			label.title = isDark ? 'Toggle Light Mode' : 'Toggle Dark Mode';
// 		}
// 	});
//
// 	// Handle system theme changes
// 	prefersDark.addEventListener('change', (e) => {
// 		if (!localStorage.getItem('theme')) {
// 			const isDark = e.matches;
// 			document.documentElement.classList.toggle('dark', isDark);
// 			themeSwitch.checked = isDark;
// 		}
// 	});
// });