/**
 * The base CRUD manager: helps reduce code duplication between managing different content types
 */

class CRUD {
	/**
	 * @param config
	 */
	constructor(config) {
		console.log('Initializing Crud.js');
		this.config = {
			content: '',
			type: 'post',

			api: 'content',
			batchSize: 10,
			upload: {
				mode: 'direct',
				allowMultiple: true,
				allowedTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
			},
			selectors: {
				container: '.replace',
				gridWrap: '.items-list',
				grid: '.items-list .item-grid',
				view: '.radio-options.view',
				columnsSelect: 'details.multi-select',
				bulk: '.bulk-controls',
				bulkActions: '.bulk-action-select',
				selectAll: 'input.select-all',
				count: '.bulk-controls .selected-count',
				search: 'input[type="search"]',
				scroll: '.scroll-sentinel',
				add: '.create-item',
				dateRange: 'dialog.date-range',
				filters: '.items-list .all-filters',
				clearButton: '.clear-filters',
				uploader: 'details.uploader'
			},
			filters: {},
			modals: {},
			tabs: {},
			...config
		};


		this.editing = false;

		this.api = this.config.api;
		this.content = this.config.content;

		this.plural = jvbSettings.labels[this.content.replace('-', '_')].plural ?? this.content + 's';
		this.single = jvbSettings.labels[this.content.replace('-', '_')].single ?? this.content;

		this.batchSize = this.config.batchSize; // for renderItems document fragment
		this.tabs = window.isEmptyObject(this.config.tabs) ? false : this.config.tabs;
		this.tabNav = false;
		this.editModal = document.querySelector('dialog.edit-modal').firstElementChild.cloneNode(true).cloneNode(true);
		this.bulkEditModal = document.querySelector('dialog.bulk-edit-modal').firstElementChild.cloneNode(true).cloneNode(true);
		this.createModal = document.querySelector('dialog.create-modal').firstElementChild.cloneNode(true).cloneNode(true);

		this.config.modals = {
			create: {
				open: '.create-item',
				selector: '.create-modal',
				openMessage: 'Opened Create New ' + this.single + ' Modal',
				closeMessage: 'Closed Create New ' + this.single + ' Modal',
				onOpen: () => this.openCreateModal(),
				onRender: () => this.renderCreateModal(),
				onClose: () => this.closeCreateModal(),
				onSave: (changes) => this.handleCreateModalSave(changes),
			},
			edit: {
				selector: '.edit-modal',
				open: 'button[data-action="edit"]',
				openMessage: 'Opened Edit ' + this.single + ' Modal',
				closeMessage: 'Closed Edit ' + this.single + ' Modal',
				// onOpen: (e, modal) => this.openEditModal(e, modal),
				onRender: (e, modal) => this.renderEditModal(e, modal),
				onClose: (e, changes) => this.closeEditModal(e, changes),
				onSave: (changes) => this.handleEditModalSave(changes),
			},
			bulkEdit: {
				selector: '.bulk-edit-modal',
				openMessage: 'Opened Bulk Edit ' + this.plural + ' Modal',
				closeMessage: 'Closed Bulk Edit ' + this.plural + ' Modal',
				onOpen: (e, modal) => this.openBulkEditModal(e, modal),
				onRender: () => this.renderBulkEditModal(),
				onClose: (e, changes) => this.closeBulkEditModal(e, changes),
				onSave: (changes) => this.handleBulkEditModalSave(changes),
			},
			dateRange: {
				selector: '.date-range',
				openMessage: 'Opened Date Range selection',
				closeMessage: 'Closed Date Range selection',
				onOpen: () => this.handleDateRangeOpen(),
				onClose: () => this.handleDateRangeClose(),
			}
			,
			...this.config.modals
		};

		//Core components
		this.a11y = window.jvbA11y;
		this.errors = window.jvbError;
		this.cache = window.jvbCache;
		this.queue = window.jvbQueue;
		this.loading = window.jvbLoading;

		window.jvbLoading.setContent(this.content);

		//Filters Management
		this.filters = {};
		this.resetFilters();
		this.isLoading = false;
		this.hasMore = true;
		this.totalItems = null;
		this.pages = 1;

		//View Management
		this.view = null;
		this.views = new Map();
		this.viewSettings = {};

		//Stores fetched posts
		this.posts = new Map();
		//Stores selected items in a map
		this.selected = new Set();

		this.initElements();
		this.initListeners();

		this.table = null;
		this.isTable = false;

		this.initView();

		this.handleEscape = (e) => {
			if (e.key === 'Escape' && this.selected.size > 0) {
				this.clearSelection();
				this.elements.selectAll.nextElementSibling.firstElementChild.innerText = 'Select All';
				this.a11y.announce('Selection cleared');
			}
		}

		this.lastSelectedItem = null; // Track last selected item for range selection
		this.selectionMode = false;

	}

	async initView() {
		this.views.set('grid', {
			name: 'grid',
			type: 'visual',
			template: 'gridView',
			containerClass: 'grid-view',
			init: () => this.initVisualView('grid'),
			activate: () => this.activateVisualView('grid'),
			deactivate: () => this.deactivateVisualView('grid'),
			render: (items, append) => this.renderVisualItems(items, 'grid', append)
		});

		this.views.set('list', {
			name: 'list',
			type: 'visual',
			template: 'listView',
			containerClass: 'list-view',
			init: () => this.initVisualView('list'),
			activate: () => this.activateVisualView('list'),
			deactivate: () => this.deactivateVisualView('list'),
			render: (items, append) => this.renderVisualItems(items, 'list', append)
		});

		this.views.set('table', {
			name: 'table',
			type: 'editable',
			template: 'tableView',
			containerClass: 'table-view',
			tableContainer: null,
			tableForm: null,
			init: () => this.initTableView(),
			activate: () => this.activateTableView(),
			deactivate: () => this.deactivateTableView(),
			render: (items, append) => this.renderTableItems(items, append),
			cleanup: () => this.cleanupTableView()
		});
		let view = await this.loadViewSettings();
		await this.switchView(view);
		await this.loadContent(true);
	}

	clearSelection() {
		if (this.selected.size === 0) {
			return;
		}

		this.selected.clear();

		let checkboxes;
		if (this.isTable) {
			checkboxes = document.querySelectorAll('table .select-checkbox:checked');
		} else {
			checkboxes = this.elements.grid.querySelectorAll('.select-checkbox:checked');
		}
		checkboxes.forEach((check) => {
			check.checked = false;
		});
		this.elements.selectAll.checked = false;
		this.lastSelectedItem = null; // Reset last selected item
		this.selectionMode = false;   // Exit selection mode
		this.updateBulkControls();
	}

	initElements() {
		this.elements = {};

		// Cache all configured selectors
		Object.entries(this.config.selectors).forEach(([key, selector]) => {
			if (typeof selector === 'object') {
				this.elements[key] = {};
				Object.entries(selector).forEach(([subKey, subSelector]) => {
					this.elements[key][subKey] = document.querySelector(subSelector);
				});
			} else {
				this.elements[key] = document.querySelector(selector);
			}
		});

		// Ensure required elements exist
		if (!this.elements.container) {
			throw new Error(`CRUD Manager: Container element not found for ${this.config.content}`);
		}

		if (!this.elements.grid) {
			throw new Error(`CRUD Manager: Grid element not found for ${this.config.content}`);
		}
	}

	initListeners() {
		this.clickHandler = this.handleClick.bind(this);
		this.changeHandler = this.handleChange.bind(this);
		this.keyHandler = this.handleKeydown.bind(this);
		document.addEventListener('click', this.clickHandler);
		document.addEventListener('change', this.changeHandler);
		document.addEventListener('keydown', this.keyHandler);
		this.initInfiniteScroll();
		this.initUploader();
		this.initModals();
		this.initTabs();
		this.initFilters();
	}

	handleClick(e) {
		if (window.targetCheck(e, '.item-select') && e.shiftKey) {
			e.preventDefault();
			this.handleRangeSelection(e.target);
		} else if (window.targetCheck(e, '.item-select')) {
			const checkbox = e.target.closest('.item-select').querySelector('.select-checkbox');
			if (checkbox) {
				this.lastSelectedItem = checkbox.closest('.item');
				this.selectionMode = this.selected.size > 0;
			}
		} else if (window.targetCheck(e, '.action') && window.targetCheck(e, '.item')) {

			let action = window.targetCheck(e, '.action');
			let item = window.targetCheck(e, '.item');
			this.handleItemAction(action.dataset.action, item);
		} else if (this.isTable && window.targetCheck(e, '.create-item')) {
			this.addEmptyRow();
		} else if (window.targetCheck(e, '.apply-bulk')) {
			this.handleBulkControl();
		} else if (window.targetCheck(e, '.cancel-bulk')) {
			this.clearSelection();
		} else if (window.targetCheck(e, this.config.selectors.clearButton)) {
			this.handleClearFilters();
		} else if (window.targetCheck(e, 'details.uploader summary')) {
			this.saveViewSettings();
		}

	}

	handleRangeSelection(target) {
		if (!this.lastSelectedItem) {
			// If no last selected item, treat as normal selection
			this.updateSelected(target.closest('.item-select').querySelector('.select-checkbox'));
			return;
		}

		if (this.isTable) {

		}
		let container = (this.isTable) ? document.querySelector('table') : this.elements.grid;

		const currentItem = target.closest('.item');
		const allItems = Array.from(container.querySelectorAll('.item'));

		const lastIndex = allItems.indexOf(this.lastSelectedItem);
		const currentIndex = allItems.indexOf(currentItem);

		if (lastIndex === -1 || currentIndex === -1) {
			// Fallback to normal selection if items not found
			this.updateSelected(target.closest('.item-select').querySelector('.select-checkbox'));
			return;
		}

		// Determine range
		const startIndex = Math.min(lastIndex, currentIndex);
		const endIndex = Math.max(lastIndex, currentIndex);

		// Select all items in range
		let newSelections = 0;
		for (let i = startIndex; i <= endIndex; i++) {
			const item = allItems[i];
			const checkbox = item.querySelector('.select-checkbox');

			if (checkbox && !checkbox.checked) {
				checkbox.checked = true;
				this.selected.add(checkbox.value);
				newSelections++;
			}
		}

		this.updateBulkControls();
		this.selectionMode = this.selected.size > 0;

		// Announce to screen readers
		if (window.jvbA11y) {
			const rangeSize = endIndex - startIndex + 1;
			window.jvbA11y.announce(`Selected range of ${rangeSize} items. ${newSelections} new selections. ${this.selected.size} total selected.`);
		}
	}

	handleKeydown(e) {
		if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
			e.preventDefault();
			this.elements.selectAll.checked = true;
			this.selectAll();
		}
	}

	handleChange(e) {

		if (this.isTable && window.targetCheck(e, 'input#vertical')) {
			e.preventDefault();
			this.viewSettings.tabNav = e.target.checked;
			// Save preference
			localStorage.setItem('jvbTabNav', e.target.checked ? 'vertical' : 'horizontal');

			// Announce change
			window.jvbA11y.announce(
				this.viewSettings.tabNav ? 'Changed to vertical navigation' : 'Changed to horizontal navigation'
			);

			// Save view settings
			this.saveViewSettings();
			return;
		} else if (this.isTable && window.targetCheck(e, '.multi-select')) {
			this.handleColumnVisibility(e);
		}
		if (window.targetCheck('select.date-filter')) {
			let value = e.target.value;
			if (value !== 'custom') {
				if (this.elements.dateRange.open) {
					this.modals.dateRange.handleClose();
				}

				const monthSelect = this.elements.dateRange.querySelector('.month-select');
				if (monthSelect) {
					monthSelect.value = '';
				}
				this.setDateFilter(value);

			}
		}
		switch (true) {
			case e.target.value === 'custom':
				this.openModal('dateRange');
				break;
			case 'action' in e.target.dataset:

				break;
			case 'taxonomy' in e.target.dataset:
				this.updateFilters(e.target.dataset.filter, e.target.value, e.target.dataset.taxonomy);
				break;
			case 'filter' in e.target.dataset:
				this.updateFilters(e.target.dataset.filter, e.target.value);
				break;
			case 'view' in e.target.dataset:
				this.switchView(e.target.dataset.view);
				break;
		}
		if (window.targetCheck(e, '.item-select')) {
			this.updateSelected(e.target);
		} else if (window.targetCheck(e, this.config.selectors.selectAll)) {
			this.selectAll();
		} else if (window.targetCheck(e, '.date-range .month-select')) {
			this.handleMonthSelect(e);
		} else if (window.targetCheck(e, '.date-range .date-start') || window.targetCheck(e, '.date-range .date-end')) {
			let start = e.target.closest('.date-range').querySelector('.date-start').value;
			let end = e.target.closest('.date-range').querySelector('.date-end').value;

			if (start && end) {
				let startDate = new Date(start);
				let endDate = new Date(end);
				endDate.setHours(23, 59, 59, 999);
				this.setDateFilter('custom', startDate, endDate);
				this.modals.dateRange.handleClose();
			}
		}
	}


	selectAll() {
		if (this.elements.selectAll.checked) {
			this.elements.selectAll.nextElementSibling.firstElementChild.innerText = 'Clear Selection';
			let container = (this.isTable) ? document.querySelector('table') : this.elements.grid;
			container.querySelectorAll('.select-checkbox:not(:checked)').forEach((check) => {
				check.checked = true;
				this.selected.add(check.value);
			});
			this.updateBulkControls();
		} else {
			this.elements.selectAll.nextElementSibling.firstElementChild.innerText = 'Select All';
			this.clearSelection();
		}

	}

	openModal(modal) {
		if (this.modals[modal]) {
			this.modals[modal].handleOpen();
		}
	}

	initInfiniteScroll() {
		if (!this.elements.scroll) return;
		const observer = new IntersectionObserver(entries => {
			entries.forEach(entry => {
				if (entry.isIntersecting && this.hasMore) {
					this.loadContent();
				}
			})
		});

		observer.observe(this.elements.scroll);
	}

	initModals() {
		this.modals = {};
		for (let [modal, config] of Object.entries(this.config.modals)) {
			let m = document.querySelector(config.selector);
			if (m) {
				this.modals[modal] = new window.jvbModal(m, config);
			}
		}
	}

	initUploader() {
		const uploader = document.querySelector('details.uploader .field.image');
		if (!uploader) {
			return;
		}

		// Register with centralized UploadManager instead of creating new instance
		// Store reference for later use
		this.uploaderFieldId = window.jvbUploadManager.registerUploader(uploader, {
			content: this.content,
			onUploadComplete: (result) => this.handleUploadComplete(result),
			onGroupingComplete: (result) => this.loadContent(true)
		});

	}

	handleUploadComplete(result) {

		if (result.success && result.data) {
			location.reload();
		}
	}

	showPreview(e) {
		console.log(e);
	}

	initTabs() {
	}

	initFilters() {
	}

	createContent() {
	}

	editContent() {
	}

	bulkEditContent() {
	}

	updateSelected(element) {
		if (element.checked) {
			this.selected.add(element.value);
			this.lastSelectedItem = element.closest('.item'); // Update last selected
		} else if (this.selected.has(element.value)) {
			this.selected.delete(element.value);
			this.lastSelectedItem = null;
		}

		this.selectionMode = this.selected.size > 0;
		this.updateBulkControls();
	}

	updateBulkControls() {
		const selecting = this.selected.size > 0;
		this.elements.grid.classList.toggle('selecting', selecting);
		this.elements.bulk.querySelector('.bulk-actions').hidden = !selecting;

		if (selecting) {
			document.addEventListener('keydown', this.handleEscape);
		} else {
			document.removeEventListener('keydown', this.handleEscape);
		}

		if (this.elements.count) {
			this.elements.count.textContent = selecting ? `( ${this.selected.size} selected )` : '';
		}

		window.removeChildren(this.elements.bulkActions);
		let options;
		if (this.filters.status === 'trash') {
			options = window.getTemplate('trashOptions');
		} else {
			options = window.getTemplate('notTrashOptions');
		}
		options.querySelectorAll('option').forEach((option) => {
			this.elements.bulkActions.append(option);
		});
		this.elements.bulkActions.firstElementChild.checked = true;
		this.elements.bulkActions.firstElementChild.selected = true;
		options.remove();

	}

	handleBulkControl() {
		let action = this.elements.bulkActions.value;
		switch (action) {
			case 'delete':
				if (confirm(`Hold up! Are you sure you want to permanently delete these ${this.selected.size} ${this.plural}?\n\nThis is a forever kind of deal - no takebacks!`)) {
					this.handleBulkEdit('delete');
				}
				break;
			case 'edit':
				this.modals['bulkEdit'].handleOpen();
				break;
			case 'restore':
				this.handleBulkEdit('draft');
				break;
			case 'trash':
			case 'publish':
			case 'draft':
				this.handleBulkEdit(action);
				break;

		}
	}

	handleItemAction(action, item) {
		const ID = item.dataset.id;
		this.clearSelection();
		switch (action) {
			case 'restore':
			case 'trash':
				this.selected.add(ID);
				this.handleBulkEdit(action);
				break;
			case 'delete':
				if (confirm(`Hold up! Are you sure you want to permanently delete this ${this.single}?\n\nThis is a forever kind of deal - no taking it back.`)) {
					this.selected.add(ID);
					this.handleBulkEdit(action);
				}
				break;
			case 'toggle-status':
				const current = item.dataset.status;
				const newStatus = current === 'publish' ? 'draft' : 'publish';
				this.selected.add(ID);
				this.handleBulkEdit(newStatus);
				item.dataset.status = newStatus;
				window.removeChildren(item.querySelector('[data-action="toggle-status"]'));
				item.querySelector('[data-action="toggle-status"]').append(window.getIcon(newStatus));
				break;

		}
	}

	resetFilters(elements = false) {
		this.filters = {
			content: this.content,
			status: 'all',
			taxonomies: {},
			page: 1,
			order: 'DESC',
			orderby: 'date',
			...this.config.filters //additional filters can be added in constructor
		}



		if (elements) {
			let checks = [this.filters.status, this.filters.order, this.filters.orderby];
			checks.forEach((check) => {
				let item = this.elements.filters.querySelector(`[data-filter][value="${check}"]`);
				if (item) {
					item.checked = true;
				}
			});

			this.elements.filters.querySelectorAll('select').forEach(select => {
				select.value = '';
			});

			this.updateClearFiltersButton();
			this.hasMore = true;
			this.loadContent(true);
		}

	}

	async switchView(view) {
		if (!this.views.has(view)) {
			console.error(`View "${view}" not registered`);
			return;
		}

		// Don't switch if already in this view
		if (this.view === view) {
			return;
		}

		try {
			// Store current data if we have any
			const hasData = this.posts.size > 0;

			// Deactivate current view
			if (this.view) {
				const currentViewObj = this.views.get(this.view);
				await currentViewObj.deactivate();
			}

			// Activate new view
			const newView = this.views.get(view);
			await newView.activate();

			this.view = view;
			this.elements.view.querySelector(`[data-view="${view}"]`).checked = true;

			// Save view preference
			this.saveViewSettings();

			// If we already have data, just re-render it in the new view
			if (hasData) {
				// Convert Map to array for rendering
				const items = Array.from(this.posts.values());

				// Clear the display area first
				this.clearContent();

				// Render existing data in new view format
				this.renderItems(items, false);

				// Show loading state briefly for UX
				window.jvbA11y?.announce(`Switched to ${view} view`);
			} else {
				// Only load data if we don't have any
				this.hasMore = true;
				this.loadContent(true);
			}

		} catch (error) {
			console.error('Error switching view:', error);
			window.showToast?.(`Failed to switch to ${view} view`, 'error');
		}
	}


	/**
	 * Updates the filters from the node element
	 * HTML element MUST have: data-filter-by and data-filter
	 * @param {string} filter
	 * @param {string} value
	 * @param {?string} taxonomy
	 */
	updateFilters(filter, value, taxonomy = null) {

		// If the filter isn't defined in the filter object, we won't be able to filter by it
		if (Object.hasOwn(this.filters, filter)) {
			if (taxonomy !== null) {
				if (!Object.hasOwn(this.filters[filter], taxonomy)) {
					this.filters[filter][taxonomy] = [];
				}
				this.filters[filter][taxonomy].push(value);
			} else {
				this.filters[filter] = value;
			}

			this.saveViewSettings();
			this.updateClearFiltersButton();
		}
		this.hasMore = true;
		this.loadContent(true);
	}

	buildFilters() {
		const temp = {};
		for (const [name, value] of Object.entries(this.filters)) {
			if (value) {
				if (typeof value === 'object' && window.isEmptyObject(value)) {

				} else if (typeof value === 'object') {
					temp[name] = {};
					for (let [key, v] of Object.entries(value)) {
						temp[name][key] = v.join(',');
					}

					temp[name] = JSON.stringify(temp[name]);
				} else {
					temp[name] = value;
				}
			}
		}
		temp.user = jvbSettings.currentUser;

		return new URLSearchParams(temp);
	}

	async loadContent(reset = false, force = false) {
		if (this.isLoading || !this.hasMore) return;

		try {
			this.isLoading = true;
			this.loading.showLoading();
			if (reset) {
				this.filters.page = 1;
				this.clearContent();
			}

			const filters = this.buildFilters();
			const data = await this.cache.fetchWithCache(
				`${jvbSettings.api}${this.api}?${filters.toString()}`,
				{
					method: 'GET',
					headers: {
						'X-WP-Nonce': jvbSettings.nonce,
						'action_nonce': jvbSettings.dash,
					}
				},
				{
					context: this.content,
					forceRefresh: force,
				}
			);

			console.log('Fetched data: ', data);

			if (data.pagination) {
				this.hasMore = data['has_more'];
				this.totalItems = data.items;
				this.pages = data.pages;
			} else {
				this.hasMore = false;
				this.totalItems = 0;
				this.pages = 0;
			}

			if (data.items && data.items.length > 0) {
				this.renderItems(data.items, this.filters.page >1);
				this.cacheItems(data.items);
			} else if (reset) {
				this.showEmptyState();
			}

			if (this.hasMore) {
				this.filters.page++;
			}
		} catch (error) {
			this.handleError(
				error,
				'loadContent'
			);
			throw error;
		} finally {
			this.isLoading = false;
			this.loading.hideLoading();
		}
	}

	clearContent() {
		if (this.view === 'table') {
			const tbody = document.querySelector('form.table tbody');
			if (tbody) {
				window.removeChildren(tbody);
			}
		} else {
			const grid = document.querySelector(this.config.selectors.grid);
			if (grid) {
				window.removeChildren(grid);
			}
		}
	}

	/**
	 * Cache items for later reference
	 */
	cacheItems(items) {
		items.forEach(item => {
			this.posts.set(item.id, item);
		});
	}

	showEmptyState() {

		if (this.view === 'table') {
			const template = window.getTemplate('emptyState');
			const table = document.querySelector('form.table tbody');
			if (table) {
				table.appendChild(template);
			}
		} else {
			const template = window.getTemplate('emptyState');
			const grid = document.querySelector(this.config.selectors.grid);
			if (grid) {
				grid.appendChild(template);
			}
		}
	}

	hideEmptyState() {
		if (this.isTable) {
			this.table.classList.remove('empty');
		} else {
			this.elements.grid.classList.remove('empty');
		}

		this.elements.container.querySelector('.empty-state')?.remove();
	}

	/**
	 * Handle errors
	 * @param {Error} error - Error object
	 * @param {string} action - Action being performed when error occurred
	 */
	handleError(error, action) {
		console.error(`CRUD error (${action}):`, error);

		// Show toast notification
		showToast(
			`Error ${action}: ${error.message || 'Something went wrong'}`,
			'error'
		);

		// Log with error handler if available
		if (window.jvbError) {
			window.jvbError.log(error, {
				component: 'CRUD',
				action: action
			});
		}

		// Announce to screen readers
		if (window.jvbA11y) {
			window.jvbA11y.announce(`Error ${action}. ${error.message || 'Please try again.'}`);
		}
	}

	/**
	 * Modal Handlers
	 */
	renderEditModal(e, modal) {
		let item = e.target.closest('.item');
		this.editing = item.dataset.id;
		let fields = JSON.parse(item.dataset.fields);
		let images = JSON.parse(item.dataset.images);

		modal.querySelector('h2').textContent = (fields['post_title'] !== '') ? `Editing "${fields['post_title']}"` : `Editing ${this.single}`;

		if (item.dataset.status) {
			modal.querySelector(`[name="status"][value="${item.dataset.status}"]`).checked = true;
		}

		window.jvbForm.removeChangeListener();
		window.jvbForm.populateFormFields(modal.querySelector('form'), fields, images);
		// window.jvbForm.processChanges(modal.form, {processSave: false});
		window.jvbForm.addChangeListener();
	}

	closeEditModal() {
		let modal = document.querySelector('dialog.edit-modal');
		window.removeChildren(modal);
		let inside = this.editModal.cloneNode(true);
		modal.append(inside);
	}

	handleEditModalSave(changes) {
		let data = {};
		data[this.editing] = changes;

		this.saveData(data);
	}

	openBulkEditModal(e, modal) {
		let selected = modal.querySelector('.selected');
		for (let item of this.selected) {
			item = parseInt(item);
			if (!this.posts.has(item)) {
				let element = document.querySelector(`.item-grid .item[data-id="${item}"]`);
				item = {
					fields: JSON.parse(element.dataset.fields),
					images: JSON.parse(element.dataset.images)
				}

			} else {
				item = this.posts.get(item);
			}

			let img = window.getTemplate('bulkItem');
			let check = img.querySelector('input[type=checkbox]');
			let image = img.querySelector('img');
			[
				img.htmlFor,
				check.name,
				check.id,
				check.checked,
				image.src,
				image.alt,
			] = [
				item.id,
				item.id,
				item.id,
				true,
				item.images[item.fields['post_thumbnail']].medium,
				item.images[item.fields['post_thumbnail']].alt,
			];
			selected.append(img);
		}
	}

	renderBulkEditModal(modal) {

	}

	closeBulkEditModal(e, changes) {
		for (let id of this.selected) {
			//Remove any selected that are not selected from the bulk editor
			if (!changes[id])  {
				this.selected.delete(id);
			}
			//Remove the selected from the changes, because we don't need to send that to the server
			delete changes[id];
		}
		if (window.isEmptyObject(changes) || this.selected.size === 0) {
			return;
		}
		let temp = {};
		for (let key in changes) {

			let value = changes[key];
			key = key.replace('bulk-edit-', '');
			temp[key] = value;
		}

		let data = {};
		for (let id of this.selected){
			data[id] = temp;
		}
		this.saveData(data);


		let modal = document.querySelector('dialog.bulk-edit-modal');
		window.removeChildren(modal);
		modal.append(this.bulkEditModal);
	}

	handleBulkEditModalSave(changes) {

	}

	openCreateModal(modal) {
		if (this.isTable) {
			this.modals['create'].handleClose();
		}
	}

	renderCreateModal(modal) {

	}

	closeCreateModal() {

		let modal = document.querySelector('dialog.create-modal');
		window.removeChildren(modal);
		modal.append(this.createModal);
	}

	handleCreateModalSave(changes) {

		let id = this.modals.create.modal.querySelector('input[name="form-id"]').value;
		let data = {};
		if (!Object.hasOwn(data, id)) {
			data[id] = {content: this.content};
		}

		for (let [field, value] of Object.entries(changes)) {
			if (field === 'image_temp') {
				continue;
			}
			data[id][field] = value;
		}

		this.saveData(data);
	}

	saveData(data) {
		if (data.length === 0 || window.isEmptyObject(data)) {
			return;
		}

		for (var [id, value] of Object.entries(data)) {
			data[id].content = this.content;
		}
		let title = (data.length > 1) ? this.plural : this.single;
		let operation = {
			endpoint: 'content',
			headers: {
				'action_nonce': jvbSettings.dash,
			},
			title: `Adding ${data.length} ${title} to Queue`,
			popup: `Queuing ${title}...`,
			data: {
				posts: data,
			}
		};

		this.queue.addToQueue(operation);
	}

	handleBulkEdit(status) {
		this.loading.showLoading('Processing bulk changes...');
		try {
			let posts = {};
			this.selected.forEach(postID => {

				posts[postID] = {
					content: this.content,
					status: status
				};
				if (['delete', 'trash', 'restore'].includes(status)) {
					this.elements.grid.querySelector(`[data-id="${postID}"]`).remove();
				}
			});
			this.saveData(posts);
			this.clearSelection();
		} catch (error) {
			console.error('Bulk operation failed: ', error);
		} finally {
			this.loading.hideLoading();
		}
	}

	handleDateRangeOpen() {

	}

	handleDateRangeClose() {
		let start = this.elements.dateRange.querySelector('.date-start');
		let end = this.elements.dateRange.querySelector('.date-end');
		let select = this.elements.dateRange.querySelector('.month-select');
	}


	handleMonthSelect(e) {
		const [year, month] = e.target.value.split('-');
		if (year && month) {
			const start = new Date(year, month - 1, 1);
			const end = new Date(year, month, 0);
			end.setHours(23, 59, 59, 999);

			this.setDateFilter('custom', start, end);
			this.modals.dateRange.handleClose();
		}
	}

	setDateFilter(type, startDate = null, endDate = null) {
		const now = new Date();
		now.setHours(23, 59, 59, 999);

		let start = startDate;
		let end = endDate || now;

		if (!startDate && type !== '') {
			start = new Date();
			switch (type) {
				case 'today':
					start.setHours(0, 0, 0, 0);
					break;
				case 'week':
					start.setDate(now.getDate() - 7);
					break;
				case 'month':
					start.setMonth(now.getMonth() - 1);
					break;
				case 'year':
					start.setFullYear(now.getFullYear() - 1);
					break;
			}
		}

		this.filters.date = type ? {
			range: {
				after: start.toISOString(),
				before: end.toISOString()
			},
			custom: type === 'custom'
		} : {
			range: null,
			custom: false
		};

		this.updateClearFiltersButton();
		this.page = 1;
		this.loadContent(true);
	}

	updateClearFiltersButton() {
		const hasFilters =
			Object.keys(this.filters.taxonomies).length > 0 ||
			this.filters.date.range !== null;

		this.elements.clearButton.hidden = !hasFilters;
	}

	handleClearFilters() {
		this.resetFilters(true);
	}

	/*****************************************************
	 *
	 * VIEW CONTROLS
	 *
	 *****************************************************/
	/**
	 * Initialize visual view (grid/list)
	 */
	initVisualView(viewName) {
		// Visual views are initialized on first load
		const view = this.views.get(viewName);
		view.initialized = true;
	}

	/**
	 * Activate visual view
	 */
	activateVisualView(viewName) {
		const view = this.views.get(viewName);

		// Remove all view classes
		this.elements.grid.classList.remove('grid-view', 'list-view', 'table');

		// Add specific view class
		this.elements.grid.classList.add(view.containerClass);

		// Hide table-specific controls
		if (this.elements.columnsSelect) {
			this.elements.columnsSelect.hidden = true;
		}

		return Promise.resolve();
	}

	/**
	 * Deactivate visual view
	 */
	deactivateVisualView(viewName) {
		// Clear rendered items if needed
		return Promise.resolve();
	}

	/**
	 * Initialize table view
	 */
	initTableView() {
		const view = this.views.get('table');

		if (view.initialized) {
			return;
		}

		// Create table container structure
		const tableTemplate = window.getTemplate('contentTable');
		if (!tableTemplate) {
			throw new Error('Table template not found');
		}

		view.tableContainer = tableTemplate;
		view.initialized = true;
	}

	/**
	 * Activate table view
	 */
	async activateTableView() {
		const view = this.views.get('table');

		// Initialize if needed
		if (!view.initialized) {
			this.initTableView();
		}

		// Remove visual view classes
		this.elements.grid.classList.remove('grid-view', 'list-view');
		this.elements.grid.classList.add('table');

		// Insert table before grid
		if (!this.elements.gridWrap.querySelector('form.table')) {
			this.elements.gridWrap.insertBefore(
				view.tableContainer.cloneNode(true),
				this.elements.grid
			);
		}

		// Get table reference
		const table = this.elements.gridWrap.querySelector('form.table');

		// Initialize the vertical navigation checkbox
		const verticalCheckbox = table.querySelector('input#vertical');
		if (verticalCheckbox) {
			// Load saved preference
			const savedPref = localStorage.getItem('jvbTabNav');
			this.viewSettings.tabNav = savedPref === 'vertical';
			verticalCheckbox.checked = this.viewSettings.tabNav;
		}

		// Register form with jvbForm
		if (window.jvbForm && !view.tableForm) {
			view.tableForm = window.jvbForm.registerForm(table, {
				onSave: (data) => this.handleTableSave(data),
				isRow: true,
				content: this.config.content,
				autoSave: true,
				saveDelay: 3000
			});
		}

		// Show column controls
		if (this.elements.columnsSelect) {
			this.elements.columnsSelect.hidden = false;
		}

		// Load saved column preferences
		await this.loadTableColumns();

		// Add keyboard navigation listeners
		this.addTableListeners();

		// Mark table view as active
		this.isTable = true;
	}


	/**
	 * Deactivate table view
	 */
	async deactivateTableView() {
		const view = this.views.get('table');

		// Remove table listeners
		this.removeTableListeners();

		// Unregister form
		if (view.tableForm && window.jvbForm) {
			window.jvbForm.removeForm(view.tableForm.id);
			view.tableForm = null;
		}

		// Remove table from DOM
		const table = this.elements.gridWrap.querySelector('form.table');
		if (table) {
			table.remove();
		}

		// Hide column controls
		if (this.elements.columnsSelect) {
			this.elements.columnsSelect.hidden = true;
		}

		// Remove table class
		this.elements.grid.classList.remove('table');

		// Mark table view as inactive
		this.isTable = false;
	}

	/**
	 * Cleanup table view (full cleanup)
	 */
	cleanupTableView() {
		const view = this.views.get('table');
		view.initialized = false;
		view.tableContainer = null;
		view.tableForm = null;
	}

	/**
	 * Render items for visual views
	 */
	renderVisualItems(items, viewName, append) {
		const view = this.views.get(viewName);
		const template = view.template;

		if (!append){
			// Clear existing items
			window.removeChildren(this.elements.grid);
		}

		// Batch render items
		const fragment = document.createDocumentFragment();

		items.forEach(item => {
			const element = this.createVisualElement(item, template);
			fragment.appendChild(element);
		});

		this.elements.grid.appendChild(fragment);

		// Make items keyboard navigable
		if (window.jvbA11y) {
			window.jvbA11y.makeNavigable(
				this.elements.grid.querySelectorAll('.item:not([data-keyboard-nav])')
			);
		}
	}

	/**
	 * Render items for table view
	 */
	renderTableItems(items, append) {
		const table = this.elements.gridWrap.querySelector('form.table tbody');
		if (!table) return;

		if (!append) {
			// Clear existing rows
			window.removeChildren(table);
		}

		// Batch render rows
		const fragment = document.createDocumentFragment();

		items.forEach(item => {
			const row = this.createTableRow(item);
			fragment.appendChild(row);
		});

		table.appendChild(fragment);

		window.loadTemplates();

		// Process form changes
		const view = this.views.get('table');
		if (view.tableForm && window.jvbForm) {
			window.jvbForm.processChanges(view.tableForm, {processChanges: false});

			// Scan for selectors and uploaders
			window.jvbSelector?.scanExistingFields();
			window.jvbUploadManager?.scanExistingFields();
		}
	}

	/**
	 * Create visual element (grid/list item)
	 */
	createVisualElement(item, templateName) {
		const template = window.getTemplate(templateName);

		// Set basic attributes
		template.dataset.id = item.id;
		template.dataset.img = item.thumbnail || '';

		if (item.fields) {
			template.dataset.fields = JSON.stringify(item.fields);
		}

		if (item.images) {
			template.dataset.images = JSON.stringify(item.images);
		}

		if (item.status) {
			template.classList.add(item.status);
			template.dataset.status = item.status;
		}

		// Populate fields
		this.populateItemFields(template, item);

		return template;
	}

	/**
	 * Create table row
	 */
	createTableRow(item) {
		const row = window.getTemplate('tableView');

		row.dataset.id = item.id;

		// Update IDs for form handling
		row.querySelectorAll('[id]').forEach(element => {
			const label = element.nextElementSibling?.tagName === 'LABEL'
				? element.nextElementSibling
				: element.previousElementSibling?.tagName === 'LABEL'
					? element.previousElementSibling
					: null;

			element.id = `${item.id}|${element.id}`;
			element.name = `${item.id}|${element.name}`;

			// let templates = element.querySelectorAll('template');
			// if (templates) {
			// 	templates.forEach(template => {
			// 		template.className = template.className+item.id;
			// 	})
			// }

			if (label) {
				label.htmlFor = element.id;
			}
		});

		// Set status
		if (item.status) {
			const statusRadio = row.querySelector(`[name="status"][value="${item.status}"]`);
			if (statusRadio) {
				statusRadio.checked = true;
			}
		}

		// Populate field values
		if (item.fields) {
			row.querySelectorAll('.field').forEach(field => {
				const fieldName = field.dataset.field;
				if (fieldName && item.fields[fieldName] !== undefined) {
					window.jvbForm?.populateFieldValue(
						field,
						`${item.id}|${fieldName}`,
						item.fields[fieldName],
						item.images
					);
				}
			});
		}

		return row;
	}

	/**
	 * Populate item fields for visual views
	 */
	populateItemFields(element, item) {
		// Populate image
		const img = element.querySelector('img');
		if (img && item.thumbnail) {
			img.src = item.thumbnail;
			img.alt = item.fields?.post_title || `${this.config.content} image`;
		}

		// Populate field values
		if (item.fields) {
			Object.entries(item.fields).forEach(([fieldName, value]) => {
				const fieldElement = element.querySelector(`.${fieldName}`);
				if (fieldElement) {
					if (fieldElement.classList.contains('images')) {
						window.handleGalleryField?.(fieldElement, value);
					} else if (fieldElement.querySelector('li')) {
						window.handleListField?.(fieldElement, value);
					} else {
						window.handleTextField?.(fieldElement, value);
					}
				}
			});
		}

		// Set checkbox values
		const checkbox = element.querySelector('.select-checkbox');
		if (checkbox) {
			checkbox.id = `select-${item.id}`;
			checkbox.name = `select-${item.id}`;
			checkbox.value = item.id;

			const label = checkbox.nextElementSibling;
			if (label) {
				label.htmlFor = checkbox.id;
			}
		}
	}

	/**
	 * Handle column visibility changes
	 */
	handleColumnVisibility(event) {
		const columnClass = event.target.id;
		const table = this.elements.gridWrap.querySelector('form.table');

		if (table) {
			table.querySelectorAll(`.${columnClass}`).forEach(cell => {
				cell.hidden = !event.target.checked;
			});
		}

		this.saveViewSettings();
	}

	/**
	 * Add table-specific listeners
	 */
	addTableListeners() {


		// Tab navigation listener
		this.tabListener = (e) => {
			// Only handle tab in table view
			if (this.view !== 'table') return;
			// Check if we're in a table input/select/textarea
			const isInTable = e.target.closest('form.table tbody');
			if (!isInTable) return;

			if (e.key === 'Tab' && this.viewSettings.tabNav) {
				this.handleTableTabNavigation(e);
			} else if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowUp') {
				e.preventDefault();
				this.toggleTableNavDirection();
			}
		};

		document.addEventListener('keydown', this.tabListener);
	}

	/**
	 * Remove table-specific listeners
	 */
	removeTableListeners() {
		if (this.tabListener) {
			document.removeEventListener('keydown', this.tabListener);
			this.tabListener = null;
		}
	}

	/**
	 * Handle table tab navigation
	 */
	handleTableTabNavigation(event) {
		const table = this.elements.gridWrap.querySelector('form.table');
		if (!table) return;

		const currentElement = document.activeElement;
		const currentCell = currentElement.closest('td');
		if (!currentCell) return;

		const currentRow = currentCell.closest('tr');
		const rows = Array.from(table.querySelectorAll('tbody tr'));
		const currentRowIndex = rows.indexOf(currentRow);

		if (currentRowIndex === -1) return;

		// Determine next row (up or down based on shift key)
		const nextRowIndex = event.shiftKey ? currentRowIndex - 1 : currentRowIndex + 1;

		// Check bounds
		if (nextRowIndex < 0 || nextRowIndex >= rows.length) {
			// Optionally, you could wrap around or stop
			return;
		}

		const nextRow = rows[nextRowIndex];
		if (!nextRow) return;

		// Find the corresponding cell in the next row
		const cells = Array.from(currentRow.querySelectorAll('td'));
		const currentCellIndex = cells.indexOf(currentCell);

		const nextRowCells = Array.from(nextRow.querySelectorAll('td'));
		const nextCell = nextRowCells[currentCellIndex - 1];

		if (!nextCell) return;

		// Find the first focusable element in the next cell
		const focusable = nextCell.querySelector('input, select, textarea, button');

		if (focusable) {
			// Smooth scroll to the next row
			nextRow.scrollIntoView({
				behavior: 'smooth',
				block: 'nearest',
				inline: 'nearest'
			});

			// Focus the element
			focusable.focus();

			// If it's a text input, select all text for easy editing
			if (focusable.type === 'text' || focusable.type === 'number') {
				focusable.select();
			}
		}
	}

	/**
	 * Toggle table navigation direction
	 */
	toggleTableNavDirection() {
		this.viewSettings.tabNav = !this.viewSettings.tabNav;

		const message = this.viewSettings.tabNav
			? 'Changed to vertical navigation'
			: 'Changed to horizontal navigation';

		window.jvbA11y?.announce(message);
		this.saveViewSettings();
	}

	/**
	 * Save view settings to cache
	 */
	async saveViewSettings() {
		const settings = {
			view: this.view,
			tabNav: this.viewSettings.tabNav || false,
			columns: []
		};

		// Save column visibility for table view
		if (this.view === 'table') {
			const checkedColumns = document.querySelectorAll('.multi-select input:checked');
			settings.columns = Array.from(checkedColumns).map(input => input.id);
		}

		// Save to cache
		if (window.jvbCache) {
			await window.jvbCache.setItem(`${this.config.content}_view_settings`, settings);
		}

		// Also save to localStorage for quick access
		localStorage.setItem(`${this.config.content}_view`, this.view);
	}

	/**
	 * Load view settings from cache
	 */
	async loadViewSettings() {
		// Try cache first
		if (window.jvbCache) {
			const cached = await window.jvbCache.getItem(`${this.config.content}_view_settings`);
			if (cached) {
				this.viewSettings = cached;
				return cached.view || 'grid';
			}
		}

		// Fallback to localStorage
		const savedView = localStorage.getItem(`${this.config.content}_view`);
		return savedView || 'grid';
	}

	/**
	 * Load table column preferences
	 */
	async loadTableColumns() {
		if (!this.viewSettings.columns || !this.viewSettings.columns.length) {
			return;
		}

		const table = this.elements.gridWrap.querySelector('form.table');
		if (!table) return;

		// Apply saved column visibility
		document.querySelectorAll('.multi-select input[type="checkbox"]').forEach(input => {
			const isVisible = this.viewSettings.columns.includes(input.id);
			input.checked = isVisible;

			// Update column visibility
			table.querySelectorAll(`.${input.id}`).forEach(cell => {
				cell.hidden = !isVisible;
			});
		});
	}

	/**
	 * Handle table save
	 */
	handleTableSave(changes) {
		this.saveData(changes);
	}

	/**
	 * Callback for view changes
	 */
	onViewChange(viewName) {
		if (this.config.onViewChange) {
			this.config.onViewChange(viewName);
		}
	}

	/**
	 * Get current view
	 */
	getCurrentView() {
		return this.view;
	}

	/**
	 * Get view object
	 */
	getView(viewName) {
		return this.views.get(viewName);
	}

	/**
	 * Check if current view is editable
	 */
	isEditableView() {
		const view = this.views.get(this.view);
		return view && view.type === 'editable';
	}

	/**
	 * Render items based on current view
	 */
	renderItems(items, append = false) {
		const view = this.views.get(this.view);
		if (view && view.render) {
			view.render(items, append);
		}
	}

	/**
	 * Add empty row (for table view)
	 */
	addEmptyRow() {
		if (this.view !== 'table') {
			return;
		}

		const table = this.elements.gridWrap.querySelector('form.table tbody');
		if (!table) return;

		// Remove empty state if present
		this.elements.container.querySelector('.empty-state')?.remove();

		// Create new row
		const template = window.getTemplate('tableView');
		const timestamp = new Date().getTime().toString(36);

		template.dataset.id = `new-${timestamp}`;

		// Update IDs for new row
		template.querySelectorAll('[id]').forEach(element => {
			const label = element.nextElementSibling?.tagName === 'LABEL'
				? element.nextElementSibling
				: element.previousElementSibling?.tagName === 'LABEL'
					? element.previousElementSibling
					: null;

			element.id = `${timestamp}|${element.id}`;
			element.name = `${timestamp}|${element.name}`;

			if (label) {
				label.htmlFor = element.id;
			}
		});

		// Handle selectors
		template.querySelectorAll('.jvb-selector')?.forEach(selector => {
			selector.id = `${timestamp}-${selector.id}`;
			const toggle = selector.querySelector('.taxonomy-toggle');
			if (toggle && window.jvbSelector) {
				window.jvbSelector.handleToggleClick(toggle, false);
			}
		});

		table.appendChild(template);

		// Focus first input
		const firstInput = template.querySelector('input:not([type="checkbox"]), select, textarea');
		if (firstInput) {
			firstInput.focus();
		}
	}

	cleanup() {
		// Remove listeners
		this.removeTableListeners();

		// Cleanup views
		this.views.forEach((view, name) => {
			if (view.cleanup) {
				view.cleanup();
			}
		});

		// Clear references
		this.views.clear();
		this.elements = null;
		this.config = null;


		this.posts.clear();
		this.selected.clear();

		document.removeEventListener('click', this.clickHandler);
		document.removeEventListener('change', this.changeHandler);
		document.removeEventListener('keydown', this.keyHandler);
		document.removeEventListener('keydown', this.handleEscape);
		document.removeEventListener('keydown', this.tabListener);
	}
}

window.crud = CRUD;
window.addEventListener('beforeunload', () => window.crud?.cleanup());