class LoadingManager {
    constructor() {
        this.quips = {
			logo: [
				"Fetching items...",
			],
			uploading: [
				"Sending to server..."
			],
			... JSON.parse(loadingQuips.quips),
		};

        this.isLoading = false;
		this.overlay = document.querySelector('.loading-overlay');
		if (!this.overlay) {
			return;
		}
		this.overlayMessage = this.overlay.querySelector('.message');
		this.overlayTitle = this.overlay.querySelector('h3');
		this.overlayIcon = this.overlay.querySelector('div.icon');
        this.quipInterval = null;
        this.activeLoads = 0;
        this.currentQuips = this.defaultQuips;
    }

    showLoading(message = '', title = 'Loading', customQuips = null) {
        this.isLoading = true;
        this.activeLoads++;
        this.overlayTitle.textContent = title;

        // Set custom or default quips
        this.currentQuips = customQuips || this.defaultQuips;

        if (message) {
            this.overlayMessage.textContent = message;
        }
        this.overlay.classList.add('active');
		document.body.classList.add('loading');
        document.body.style.overflow = 'hidden';
        this.startQuipCycle();
    }

    hideLoading() {
        this.activeLoads--;
        if (this.activeLoads <= 0) {
            this.activeLoads = 0;
            this.overlay.classList.remove('active');
            document.body.style.overflow = '';
			document.body.classList.remove('loading');
            this.stopQuipCycle();
        }
        this.isLoading = false;
        // if(window.formManager.pendingChanges){
        //     window.formManager.handleFormChange();
        // }
    }

	setContent(content) {
		console.log(content);
		let keys = Object.keys(this.quips);
		content = keys.map((c) => {
			return (keys.includes(content)) ? content : false;
		}).filter(Boolean);
		content = (content.length === 0) ? ['logo'] : content;
		this.currentContent = content;
	}

    startQuipCycle() {
        if (this.quipInterval) {
            clearInterval(this.quipInterval);
        }

		let quips = {};
		this.currentContent.forEach(content => {
			this.quips[content].forEach((c) => {
				quips[c] = content;
			});
		});
		let keys = this.shuffleArray(Object.keys(quips));

        let currentIndex = 0;
        // Set initial message
        this.overlayMessage.textContent = keys[0];
        this.overlayMessage.classList.remove('changing');
		let content = '';
		let lastContent = '';
        this.quipInterval = setInterval(() => {
            this.overlayMessage.classList.add('changing');

            setTimeout(() => {
                currentIndex = (currentIndex + 1) % keys.length;

				content = quips[keys[currentIndex]];
				if (content !== lastContent) {
					window.removeChildren(this.overlayIcon);
					this.overlayIcon.append(window.getIcon(content));
				}
				window.typeText(this.overlayMessage, keys[currentIndex]);
                this.overlayMessage.classList.remove('changing');
				lastContent = content;
            }, 300);
        }, 2000);
    }

    stopQuipCycle() {
        if (this.quipInterval) {
            clearInterval(this.quipInterval);
            this.quipInterval = null;
        }
    }

    shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    startAutosaving() {
        document.body.classList.add('autosaving');
    }

    stopAutosaving(message = 'Saved!') {
        document.body.classList.remove('autosaving');
        // Show the save popup
        const popup = document.querySelector('.save-popup');
        popup.classList.add('show');
        if(message !== 'Saved!'){
            popup.innerText = message;
        }

        setTimeout(() => {
            popup.classList.remove('show');
        }, 1500);
    }
    showError(message) {
        // Update overlay to show error state
        this.overlayTitle.textContent = 'Error';
        this.overlayMessage.textContent = message;
        this.overlay.classList.add('active', 'error');
        document.body.style.overflow = 'hidden';

        // Auto-hide after delay
        setTimeout(() => {
            this.overlay.classList.remove('active', 'error');
            document.body.style.overflow = '';
        }, 3000);
    }
}


document.addEventListener('DOMContentLoaded', () => {
	window.jvbLoading = new LoadingManager();
});