document.addEventListener("DOMContentLoaded", function(e) {
	// Tabs functionality for settings pages
	let tabs = document.querySelectorAll('.jvb-settings-tab');

	tabs.forEach(tab => {
		tab.addEventListener('click', (e) => {
			removeActiveTab(tabs);
			tab.classList.add('active');
			setActiveSection(tab);
		});
	});

	// Check for hash in URL and activate corresponding tab
	if (window.location.hash) {
		var hash = window.location.hash.substring(1);
		document.querySelector('.jvb-settings-tab[data-tab="' + hash + '"]')?.click();
	} else {
		// Activate first tab by default
		document.querySelector('.jvb-settings-tab')?.click();
	}

	let confirm = document.querySelector('.jvb-confirm-action');
	if (confirm) {
		confirm.addEventListener('click', (e) => {
			if (!window.confirm(confirm.dataset.confirm || 'Are you sure?')) {
				e.preventDefault();
				return false;
			}
		});
	}

	// Initialize admin actions
	initAdminActions();
	initCacheActions();
	initIconActions();
});

function removeActiveTab(tabs) {
	let active = document.querySelectorAll('.active');
	active.forEach(tab => {
		tab.classList.remove('active');
		if (tab.dataset.tab) {
			setActiveSection(tab, false);
			window.location.hash = tab.dataset.tab;
		}
	});
}

function setActiveSection(tab, set = true) {
	let id = tab.dataset.tab;
	if (!id) return;

	let section = document.querySelector('#' + id);
	if (!section) return;

	if (set) {
		section.classList.add('active');
	} else {
		section.classList.remove('active');
	}
}

/**
 * Initialize admin action buttons (dashboard quick actions)
 */
function initAdminActions() {
	document.querySelectorAll('a[data-action]').forEach(action => {
		action.addEventListener('click', (e) => {
			e.preventDefault();
			let loader = action.querySelector('.loader');
			loader.classList.add('loading');

			let a = action.dataset.action;

			makeAdminRequest('admin-action', { action: a })
				.then(data => {
					if (data.success === true) {
						loader.classList.remove('loading');
						loader.classList.add('loaded');
						setTimeout(() => {
							loader.classList.remove('loaded');
						}, 3000);
					} else {
						throw new Error(data.message || 'Action failed');
					}
				})
				.catch(error => {
					console.error('Error:', error);
					loader.classList.remove('loading');
					alert('Error: ' + error.message);
				});
		});
	});
}

/**
 * Initialize cache management actions
 */
function initCacheActions() {
	const flushAllBtn = document.querySelector('[data-cache-action="flush-all"]');
	if (flushAllBtn) {
		flushAllBtn.addEventListener('click', function() {
			const originalText = this.innerHTML;
			this.disabled = true;
			this.innerHTML = 'Flushing...';

			makeAdminRequest('admin-cache', { action: 'flush-all' })
				.then(data => handleActionResponse(data, this, originalText))
				.catch(error => handleActionError(error, this, originalText));
		});
	}

	document.querySelectorAll('[data-cache-action="flush-cache"]').forEach(btn => {
		btn.addEventListener('click', function() {
			const group = this.getAttribute('data-group');
			const originalText = this.innerHTML;
			this.disabled = true;
			this.innerHTML = 'Flushing...';

			makeAdminRequest('admin-cache', { action: 'flush-cache', group: group })
				.then(data => handleActionResponse(data, this, originalText))
				.catch(error => handleActionError(error, this, originalText));
		});
	});
}

/**
 * Initialize icon management actions
 */
function initIconActions() {
	const currentSource = document.getElementById('icon-source-select')?.value || 'icons';

	// Select all checkbox
	const selectAll = document.getElementById('select-all-versions');
	if (selectAll) {
		selectAll.addEventListener('change', function() {
			document.querySelectorAll('.version-checkbox').forEach(checkbox => {
				checkbox.checked = this.checked;
				checkbox.dispatchEvent(new Event('change'));
			});
		});
	}

	// Enable/disable merge button based on selection
	document.querySelectorAll('.version-checkbox').forEach(checkbox => {
		checkbox.addEventListener('change', updateMergeButtonState);
	});

	// Toggle icon list view
	document.querySelectorAll('.view-icon-list-btn').forEach(btn => {
		btn.addEventListener('click', function() {
			const timestamp = this.getAttribute('data-timestamp');
			const row = document.getElementById('icon-list-' + timestamp);
			if (row) {
				row.style.display = row.style.display === 'none' ? '' : 'none';
				this.textContent = row.style.display === 'none' ? '(view)' : '(hide)';
			}
		});
	});

	// Force refresh button
	const refreshBtn = document.querySelector('[data-icon-action="refresh-icons"]');
	if (refreshBtn) {
		refreshBtn.addEventListener('click', function() {
			const originalText = this.innerHTML;
			this.disabled = true;
			this.innerHTML = 'Regenerating...';

			const source = this.getAttribute('data-source') || currentSource;
			makeAdminRequest('admin-icons', { action: 'refresh-icons', source: source })
				.then(data => {
					handleActionResponse(data, this, originalText);
				})
				.catch(error => {
					handleActionError(error, this, originalText);
				});

		});
	}

	// Merge versions button
	const mergeBtn = document.getElementById('merge-versions-btn');
	if (mergeBtn) {
		mergeBtn.addEventListener('click', function() {
			const checkboxes = document.querySelectorAll('.version-checkbox:checked');
			const timestamps = Array.from(checkboxes).map(cb => parseInt(cb.value));

			if (timestamps.length < 2) {
				alert('Please select at least 2 versions to merge');
				return;
			}

			if (confirm(`Merge ${timestamps.length} versions? This will create a new CSS file with all unique icons.`)) {
				const originalText = this.innerHTML;
				this.disabled = true;
				this.innerHTML = 'Merging...';

				const source = this.getAttribute('data-source') || currentSource;
				makeAdminRequest('admin-icons', {
					action: 'merge-icon-versions',
					source: source,
					timestamps: timestamps
				})
					.then(data => {
						handleActionResponse(data, this, originalText);
					})
					.catch(error => {
						handleActionError(error, this, originalText);
					});
			}
		});
	}

	// Restore version buttons
	document.querySelectorAll('[data-icon-action="restore-icon-version"]').forEach(btn => {
		btn.addEventListener('click', function() {
			const timestamp = parseInt(this.getAttribute('data-timestamp'));
			const source = this.getAttribute('data-source') || currentSource;

			if (confirm('Restore this icon version? This will reload the page.')) {
				const originalText = this.innerHTML;
				this.disabled = true;
				this.innerHTML = 'Restoring...';

				makeAdminRequest('admin-icons', {
					action: 'restore-icon-version',
					source: source,
					timestamp: timestamp
				})
					.then(data => {
						handleActionResponse(data, this, originalText);
					})
					.catch(error => {
						handleActionError(error, this, originalText);
					});
			}
		});
	});
}

/**
 * Update merge button state based on selected checkboxes
 */
function updateMergeButtonState() {
	const checkedCount = document.querySelectorAll('.version-checkbox:checked').length;
	const mergeBtn = document.getElementById('merge-versions-btn');
	if (mergeBtn) {
		mergeBtn.disabled = checkedCount < 2;
	}
}

/**
 * Make an admin API request
 * @param {string} endpoint - The API endpoint (without 'jvb/v1/')
 * @param {object} data - The data to send
 * @returns {Promise}
 */
function makeAdminRequest(endpoint, data = {}) {
	if (typeof jvbSettings === 'undefined') {
		console.error('jvbSettings is not defined');
		return Promise.reject(new Error('jvbSettings is not defined. Scripts may not be loaded correctly.'));
	}

	console.log('Making request to:', jvbSettings.api + endpoint, 'with data:', data);

	return fetch(jvbSettings.api + endpoint, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
			'X-WP-Nonce': jvbSettings.nonce,
			'X-Action-Nonce': jvbSettings.action
		},
		body: JSON.stringify(data)
	})
		.then(response => {
			console.log('Response status:', response.status);
			if (!response.ok) {
				return response.json().then(err => {
					throw new Error(err.message || 'Network response was not ok');
				});
			}
			return response.json();
		})
		.then(data => {
			console.log('Response data:', data);
			return data;
		});
}

/**
 * Handle successful action response
 */
function handleActionResponse(data, button = null, originalText = null) {
	if (!data.success) {
		throw new Error(data.message || 'Unknown error');
	}

	if (button && originalText) {
		button.innerHTML = '✓ Success!';
		setTimeout(() => {
			button.disabled = false;
			button.innerHTML = originalText;
		}, 1500);
	}
}

/**
 * Handle action error
 */
function handleActionError(error, button = null, originalText = null) {
	console.error('Error:', error);

	if (button && originalText) {
		button.innerHTML = '✗ ' + (error.message || 'Error');
		setTimeout(() => {
			button.disabled = false;
			button.innerHTML = originalText;
		}, 2000);
	}
}