class JVBAdmin {
    constructor(){
        this.queue = window.jvbQueue;
        this.loading = window.jvbLoading;
        this.cache = window.jvbCache;
        this.a11y = window.jvbA11y;
        this.error = window.jvbError;
        this.activeTab = 'artist';
        this.reset = false;
        this.observer = null;

        this.form = {};
        this.isSaving = false;


        this.hasChanges = false;
        this.trackedChanges = new Map();
        this.items = new Map();

        this.isLoading = false;

        this.tabNav = localStorage.getItem('jvbTabNav') === 'vertical';

        this.template = new Map();

        this.endpoints = 'myster';

        this.resetFilters();
        this.hasMore = true;
        this.maxPages = 1;
        this.totalItems = 0;

        this.initElements();
        this.initEvents();

        this.firstLoad = false;
        if(!this.firstLoad){
            this.resetTable();
            this.firstLoad = true;
        }

        // Define all your tabs in an array
		let tabs = document.querySelectorAll('button.tab');

        let tabsConfig = {};
        this.modals = {};
        tabs.forEach(tab =>{
            let name = tab.dataset.tab;
            tabsConfig[name] = () => {
				if (tab.classList.contains('active')) {
					this.activeTab = name;
				}
				this.loading.setContent([this.activeTab]);
                this.resetTable();
                this.resetFilters();
                this.filters.content = name;
                localStorage.setItem('jvbAdminTab', name);
                this.loadItems(true).then(()=>{});
            }

            this.modals[name] = new window.jvbModal(document.querySelector(`dialog.edit-modal.${name}`, {
                open: false,
                onSave: () => this.saveEditModal.bind(this)
            }));

            this.items.set(name, new Map());
        });

        // Initialize tabs with the generated config
        this.tabs = new window.jvbTabs(document.querySelector('.replace'), tabsConfig);

		this.loading.setContent([this.activeTab]);
        this.tabs.switchTab(this.activeTab);
        this.loadItems();

        this.saveTimeout = null;
        this.SAVE_DELAY = 5000; // 5 seconds

        // Bind the method to preserve 'this' context
        this.debouncedSave = this.debouncedSave.bind(this);
    }

    resetFilters(){
        this.filters = {
            page: 1,
            order: 'DESC',
            orderby: 'name',
            content: this.activeTab
        }
    }

    resetTable(){
        removeChildren(this.grid);
        let table = window.getTemplate(`${this.activeTab}Table`).cloneNode(true);

        this.row = `${this.activeTab}Row`;

        let head = table.querySelector('thead').cloneNode(true);
        let foot = table.querySelector('tfoot');
        Array.from(head.children).forEach(child => {
            foot.appendChild(child.cloneNode(true));
        });
        this.grid.append(table);
        this.body = this.grid.querySelector('tbody');

        this.grid.removeEventListener('change', this.boundChanges);
        this.boundChanges = this.trackChanges.bind(this);
        this.grid.addEventListener('change', this.boundChanges);
    }

    initElements(){
        this.container = document.querySelector('.replace');
        this.grid = this.container.querySelector('.items-container');
        this.tabToggle = this.container.querySelector('input#vertical');
        this.tabToggle.checked = this.tabNav;

        // this.filterForm = this.container.querySelector('form');
        // this.dateRangeFilter = new window.jvbModal(
        //     this.container.querySelector('dialog.date-range'),
        //     {
        //         open: false,
        //     });
        // this.clearFilters = this.container.querySelector('.clear-filters');
        //
        // this.replyModal = new window.jvbModal(
        //     this.container.querySelector('.create-response'),
        //     {
        //         open: false,
        //         content: 'response',
        //         openMessage: 'Opened Response modal',
        //         onSave: this.saveCreatedResponse.bind(this)
        //     });
    }
    trackChanges(e) {
        this.hasChanges = true;
        let id = e.target.closest('tr').id;
        if(!this.trackedChanges.has(id)){
            this.trackedChanges.set(id, new Map());
        }
        let name = e.target.name;
        let value = e.target.value;
        this.trackedChanges.get(id).set(name, value);

        // Schedule the save with debouncing
        this.debouncedSave();
    }

    // Add this method to handle the debounced save
    debouncedSave() {
        // Clear any existing timeout
        if (this.saveTimeout) {
            clearTimeout(this.saveTimeout);
        }

        // Set a new timeout
        this.saveTimeout = setTimeout(() => {
            this.processChanges();
        }, this.SAVE_DELAY);
    }

    async processChanges(){
        if (this.trackedChanges.size === 0) return;

        try {

                this.loading.showLoading();

            let changes = mapToObj(this.trackedChanges);

            console.log("Saving changes:", changes);

            // Send to server
            const response = await fetch(`${jvbSettings.api}${this.endpoints}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': jvbSettings.nonce,
                    'action_nonce': jvbAdmin.nonce
                },
                body: JSON.stringify({
                    user: jvbSettings.currentUser,
                    data: changes,
                    content: this.activeTab
                })
            });

            if (!response.ok) {
                throw new Error(`Server returned ${response.status}`);
            }

            const data = await response.json();


            if (data.success) {
                this.reset = true;
                // Clear tracked changes after successful save
                this.trackedChanges = new Map();
                this.hasChanges = false;

                this.loadItems();

                // Notify user of successful save
                this.a11y.announce(`Changes saved successfully`);

            } else {
                throw new Error(data.message || 'Unknown error');
            }
        } catch (error) {
            this.handleError(error, 'saving changes');
        } finally {
                this.loading.hideLoading();
        }
    }

    initEvents(){
        this.tabToggle.addEventListener('change', (e)=>{
            this.tabNav = e.target.checked;
            let value = e.target.checked ? 'vertical' : 'horizontal';
            localStorage.setItem('jvbTabNav', value);
            window.jvbA11y.announce((this.tabNav)?'Changed to vertical navigation':'Changed to horizontal navigation');
        });
        this.grid.addEventListener('keydown', (e)=>{
            if (e.key === 'Tab' && this.tabNav) {
                let current = e.target.closest('td').dataset.id;
                let row = e.target.closest('tr');
                let rows = Array.from(this.body.querySelectorAll('tr'));
                let index = rows.indexOf(row);

                let total = rows.length;
                if (index !== -1 && index < total) {
                    e.preventDefault(); // Prevent default tab behavior

                    //down if just tab, up if shift key
                    let next = (e.shiftKey) ? index-1 : index+1;
                    rows[next].scrollIntoView({behavior: 'smooth',block: 'center', inline: 'center'});
                    rows[next].querySelector(`[data-id="${current}"] input`).focus();
                }
                if(index === total - 5 && this.hasMore){
                    this.loadItems(false);
                }
            }
        });

        this.clickListener = this.handleClick.bind(this);
        this.container.addEventListener('click', this.clickListener);
    }

    handleClick(e){
        if(e.target !== 'button' && !e.target.closest('button[data-action="edit"]')){
            return;
        }
        let id = (e.target === 'button') ? e.target.dataset.id : e.target.closest('button').dataset.id;

        let item = this.items.get(this.activeTab).get(parseInt(id));

        let modal = this.container.querySelector(`dialog.edit-modal.${this.activeTab}`);
        for(let[name, value] of Object.entries(item)){
            let field = modal.querySelector(`[name="${name}"]`);
            if(field){
                field.value =value;
            }
        }
        if(this.form.instance){
            this.form.instance = null;
        }
        this.form.instance = this.handleForm(modal.querySelector('form'), id);
        this.modals[this.activeTab].modal.dataset.id = item.id;
        this.modals[this.activeTab].handleOpen();
    }

    handleForm(form, id){
        return window.jvbForm.addForm(form, {
            onSave: this.saveEditModal.bind(this),
            itemID: id,
        });
    }

    async saveEditModal(){
        if(this.isSaving){
            return;
        }
        this.isSaving = true;
        let modal = this.modals[this.activeTab];
        let form = modal.modal.querySelector('form');
        let id = modal.modal.dataset.id;


        let original = this.items.get(this.activeTab).get(parseInt(id));
        let newData = new FormData(form);
        console.log(newData);

        let changes = {};
        for(const [name, value] of newData.entries()){
            if(name.includes(':')){
                let split = name.split(':');
                if(!changes[split[0]]){
                    changes[split[0]] = {};
                }
                changes[split[0]][split[1]] = value;
            }else{
                changes[name] = value;
            }

        }
        console.log(changes);
        newData = {};
        newData[id] = changes;

        try {
            const response = await fetch(`${jvbSettings.api}${this.endpoints}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': jvbSettings.nonce,
                    'action_nonce': jvbAdmin.nonce
                },
                body: JSON.stringify({
                    user: jvbSettings.currentUser,
                    data: newData,
                    content: this.activeTab
                })
            });

        } catch (error) {

        } finally {
            this.modals[this.activeTab].handleClose();
            this.isSaving = false;
        }

        form.reset();

    }

    setupInfiniteScroll() {
        // If we already have an observer, disconnect it first
        if (this.observer) {
            this.observer.disconnect();
        }

        // Find the last row in the tbody
        const lastRow = this.body.lastElementChild;
        if (!lastRow) return; // No rows to observe yet

        // Create and set up the observer
        this.observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && this.hasMore && !this.isLoading) {
                    console.log('Last row visible, loading more items');
                    this.loadItems(false);
                }
            });
        }, {
            rootMargin: '200px 0px', // Start loading when within 200px of the viewport
            threshold: 0.1 // Trigger when at least 10% of the element is visible
        });

        // Start observing the last row
        this.observer.observe(lastRow);
        console.log('Observing last row:', lastRow);
    }

    /**
     * Load favourites from the server
     * @returns {Promise<Object>} Response data
     */
    async loadItems(reset = true) {

        if(this.isLoading || !this.hasMore) return;

        try {
            this.isLoading = true;
            this.loading.showLoading();

            if(reset){
                this.filters.page = 1;
                this.grid.classList.remove('empty');
            }
            const params = this.buildFilters();
            console.log(this.filters);
            console.log('Reset? ',this.reset);
            const data = await this.cache.fetchWithCache(
                `${jvbSettings.api}${this.endpoints}?${params.toString()}`,
                {
                    method: 'GET',
                    headers: {
                        'X-WP-Nonce': jvbSettings.nonce,
                        'action_nonce': jvbAdmin.nonce,
                    }
                },{
                    context: 'admin',
                    forceRefresh: true
                }
            );

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

            // Process and render the favourites
			this.renderItems(data.items || [], this.filters.page > 1);
			[
				this.hasMore,
				this.totalItems,
				this.maxPages
			] = [
				data.has_more,
				data.total_items,
				data.total_pages
			];
			if(this.hasMore){
				this.filters.page++;
			}

			this.setupInfiniteScroll();

			return data;
		} catch (error) {
			this.handleError(error, 'loading news');
			throw error;
		} finally {
			this.isLoading = false;
			this.loading.hideLoading();
		}

	}


	buildFilters(){
		//Clone to avoid modifying original
		const filters = JSON.parse(JSON.stringify(this.filters));

		let temp = {};
		for(var[name, value] of Object.entries(filters)){
			if(value !== false && value !== null){
				temp[name] = value;
			}
		}

		return new URLSearchParams(temp);
	}

	renderItems(items, append = false){
		// if(!append && this.body.children.length>0){
		// 	removeChildren(this.body);
		// }

		// Use DocumentFragment for better performance
		const fragment = document.createDocumentFragment();

		// Process items in batches for better performance
		const batchSize = 10;
		const processBatch = (startIndex) => {
			const endIndex = Math.min(startIndex + batchSize, items.length);

			// Process this batch
			for (let i = startIndex; i < endIndex; i++) {
				const item = items[i];
				const element = this.createItemElement(item);
				this.items.get(this.activeTab).set(item.id, item);
				fragment.appendChild(element);
			}

			// If we have more items, process next batch in next frame
			if (endIndex < items.length) {
				requestAnimationFrame(() => {
					processBatch(endIndex);
				});
			} else {
				// All batches processed, append fragment
				this.body.appendChild(fragment);
				this.a11y.makeNavigable(this.grid.querySelectorAll('.item:not([data-keyboard-nav])'));
				this.a11y.announceItems(items.length, append, this.hasMore);

				// Set up the observer for the new last row
				this.setupInfiniteScroll();
			}
		};

		// Start processing the first batch
		if (items.length > 0) {
			processBatch(0);

		} else {
			this.a11y.announceItems(0, append);
		}
	}

	createItemElement(item){
		let row = window.getTemplate(this.row);
		row.id = item.id;

		let fields = row.querySelectorAll('td');
		fields.forEach(field => {
			let name = field.dataset.id;
			let input = field.querySelector('input[type="text"]');
			if(input){
				input.value = item[name];
				field.querySelector('label').remove();
				field.querySelector('.description').remove();
			}
		});

		let [
			input,
			inputLabel,
			editButton
		] = [
			row.querySelector('[data-id="actions"] input'),
			row.querySelector('[data-id="actions"] label'),
			row.querySelector('[data-id="actions"] button'),
		];

		[
			input.checked,
			input.id,
			inputLabel.htmlFor,
			editButton.dataset.id
		] = [
			item.public,
			`public-${item.id}`,
			`public-${item.id}`,
			item.id
		];

		return row;
	}
	createShopElement(item){
		let row = window.getTemplate(this.row);
		row.id = item.id;

		let [
			input,
			inputLabel,
			editButton,
			shopName,
			owner,
			managers,
			city,
			address,
			opened,
			phone,
			email,
			admin,
			publicContact,
			links,
			rate,
			languages,
			keywords,
			tagline,
			instagram,
			socialFollowers
		] = [
			row.querySelector('[data-id="actions"] input'),
			row.querySelector('[data-id="actions"] label'),
			row.querySelector('[data-id="actions"] button'),
			row.querySelector('[data-id="term_name"] input'),
			row.querySelector('[data-id="owner"] input'),
			row.querySelector('[data-id="managers"] input'),
			row.querySelector('[data-id="city"] input'),
			row.querySelector('[data-id="location"] input'),
			row.querySelector('[data-id="established"] input'),
			row.querySelector('[data-id="phone"] input'),
			row.querySelector('[data-id="email"] input'),
			row.querySelector('[data-id="admin_contact"] input'),
			row.querySelector('[data-id="public_contact"] input'),
			row.querySelector('[data-id="links"] input'),
			row.querySelector('[data-id="rate"] input'),
			row.querySelector('[data-id="languages"] input'),
			row.querySelector('[data-id="keywords"] input'),
			row.querySelector('[data-id="slogan"] input'),
			row.querySelector('[data-id="insta_handle"] input'),
			row.querySelector('[data-id="followers"] input'),
			];

		[
			input.checked,
			input.id,
			inputLabel.htmlFor,
			editButton.dataset.id,
			shopName.value,
			owner.value,
			managers.value,
			city.value,
			address.value,
			opened.value,
			phone.value,
			email.value,
			admin.value,
			publicContact.value,
			rate.value,
			tagline.value,
			instagram.value
		] = [
			item.public,
			`public-${item.id}`,
			`public-${item.id}`,
			item.id,
			item.term_name,
			item.owner,
			item.managers,
			item.city,
			item.location.address,
			item.established,
			item.phone,
			item.email,
			item.admin_contact,
			item.public_contact,
			item.rate,
			item.slogan,
			item.insta_handle,
		];

		if(item.links.length>0){
			let l = '';
			item.links.forEach(li => {
				l += `[${li.url}, ${li.title}, ${li.tracker}]`;
			});
			links.value = l.trim();
		}

		if(item.followers.length>0){
			let l = '';
			item.followers.forEach(f=>{
				l+= `[${f.count}, ${f.source}, ${formatDate(f.checked)}]`;
			});
			socialFollowers.value = l;
		}


		if(item.keywords.length > 0){
			let l = [];
			item.keywords.forEach(keyword => {
				l.push(keyword.keyword);
			});
			keywords.value =l.join(', ');
		}
		if(item.languages.length > 0){
			let l = [];
			item.languages.forEach(language => {
				l.push(language.language);
			});
			languages.value =l.join(', ');
		}

		return row;
	}

	createPartnerElement(item){
		let row = window.getTemplate(this.row);
		row.id = item.id;

		let [
			input,
			inputLabel,
			editButton
		] = [
			row.querySelector('[data-id="actions"] input'),
			row.querySelector('[data-id="actions"] label'),
			row.querySelector('[data-id="actions"] button'),
		];

		[
			input.checked,
			input.id,
			inputLabel.htmlFor,
			editButton.dataset.id
		] = [
			item.public,
			`public-${item.id}`,
			`public-${item.id}`,
			item.id
		];

		return row;
	}


	createStyleElement(item){
		let row = window.getTemplate(this.row);
		row.id = item.id;

		let fields = row.querySelectorAll('td');
		fields.forEach(field => {
			let name = field.dataset.id;
			// field.label.remove();
			// field.querySelector('.description').remove();
			let input = field.querySelector('input[type="text"]');
			if(input){
				input.value = item[name];
			}
		});

		let [
			input,
			inputLabel,
			editButton
		] = [
			row.querySelector('[data-id="actions"] input'),
			row.querySelector('[data-id="actions"] label'),
			row.querySelector('[data-id="actions"] button'),
		];

		[
			input.checked,
			input.id,
			inputLabel.htmlFor,
			editButton.dataset.id
		] = [
			item.public,
			`public-${item.id}`,
			`public-${item.id}`,
			item.id
		];

		return row;
	}
	createArtistElement(item){

		let row = window.getTemplate(this.row);
		row.id = item.id;
		let [
			input,
			inputLabel,
			editButton,
			display,
			first,
			phone,
			email,
			links,
			admin,
			publicContact,
			socialFollowers,
			instagram,
			type,
			city,
			shop,
			rate,
			language,
			keywords,
			credential
		] = [
			row.querySelector('[data-id="actions"] input'),
			row.querySelector('[data-id="actions"] label'),
			row.querySelector('[data-id="actions"] button'),
			row.querySelector('[data-id="display_name"] input'),
			row.querySelector('[data-id="first_name"] input'),
			row.querySelector('[data-id="phone"] input'),
			row.querySelector('[data-id="email"] input'),
			row.querySelector('[data-id="links"] input'),
			row.querySelector('[data-id="admin_contact"] input'),
			row.querySelector('[data-id="public_contact"] input'),
			row.querySelector('[data-id="followers"] input'),
			row.querySelector('[data-id="insta_handle"] input'),
			row.querySelector('[data-id="type"] input'),
			row.querySelector('[data-id="city"] input'),
			row.querySelector('[data-id="shop"] input'),
			row.querySelector('[data-id="rate"] input'),
			row.querySelector('[data-id="languages"] input'),
			row.querySelector('[data-id="keywords"] input'),
			row.querySelector('[data-id="credentials"] input')

		];

		[
			input.checked,
			input.id,
			inputLabel.htmlFor,
			editButton.dataset.id,
			display.value,
			first.value,
			phone.value,
			email.value,
			admin.value,
			publicContact.value,
			type.value,
			city.value,
			shop.value,
			instagram.value,
			rate.value,
		] = [
			item.public,
			`public-${item.id}`,
			`public-${item.id}`,
			item.id,
			item['display_name'],
			item['first_name'],
			item.phone,
			item.email,
			item.admin_contact,
			item.public_contact,
			item.type,
			item.city,
			item.shop,
			item['insta_handle'],
			item.rate,
		];

		if(item.links.length>0){
			let l = '';
			item.links.forEach(li => {
				l += `[${li.url}, ${li.title}, ${li.tracker}]`;
			});
			links.value = l.trim();
		}

		if(item.followers.length>0){
			let l = '';
			item.followers.forEach(f=>{
				l+= `[${f.count}, ${f.source}, ${formatDate(f.checked)}]`;
			});
			socialFollowers.value = l;
		}

		if(item.keywords.length > 0){
			let l = [];
			item.keywords.forEach(keyword => {
				l.push(keyword.keyword);
			});
			keywords.value =l.join(', ');
		}
		if(item.languages.length > 0){
			let l = [];
			item.languages.forEach(language => {
				l.push(language.language);
			});
			language.value =l.join(', ');
		}
		return row;
	}

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

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

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


}
// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
	new JVBAdmin();
});

function mapToObj(map){
	return Array.from(map).reduce((obj, [key, value]) => {
		if(value instanceof Map){
			value = mapToObj(value);
		}
		obj[key] = value;
		return obj;
	}, {});
}