/**
 * WebWizard Frontend Logic
 */

const App = {
	state: {
		userId: localStorage.getItem('ww_user_id'),
		currentStep: 1,
		totalSteps: 8,
		project: null
	},

	async init() {
		console.log('Initializing WebWizard...');
		
		if (!this.state.userId) {
			await this.initSession();
		}

		this.bindEvents();
		this.showStep(this.state.currentStep);
	},

	async initSession() {
		try {
			const response = await this.apiCall('initSession');
			if (response.success) {
				this.state.userId = response.data.user_id;
				localStorage.setItem('ww_user_id', this.state.userId);
				console.log('Session initialized:', this.state.userId);
			}
		} catch (error) {
			console.error('Failed to initialize session:', error);
			alert('Chyba pri inicializácii session. Skontrolujte pripojenie.');
		}
	},

	async apiCall(action, payload = {}, projectId = null) {
		const body = {
			action,
			project_id: projectId,
			payload
		};

		const headers = {
			'Content-Type': 'application/json'
		};

		if (this.state.userId) {
			headers['X-User-ID'] = this.state.userId;
		}

		const response = await fetch('/ajax.php', {
			method: 'POST',
			headers,
			body: JSON.stringify(body)
		});

		const result = await response.json();
		if (!result.success) {
			throw new Error(result.error.message || 'API Error');
		}

		return result;
	},

	bindEvents() {
		document.getElementById('btn-next').addEventListener('click', () => this.nextStep());
		document.getElementById('btn-prev').addEventListener('click', () => this.prevStep());
	},

	showStep(n) {
		const steps = document.querySelectorAll('.step');
		steps.forEach(step => step.classList.remove('active'));

		const activeStep = document.querySelector(`.step[data-step="${n}"]`);
		if (activeStep) {
			activeStep.classList.add('active');
		}

		this.state.currentStep = n;
		this.updateUI();
	},

	nextStep() {
		if (this.state.currentStep < this.state.totalSteps) {
			this.showStep(this.state.currentStep + 1);
		}
	},

	prevStep() {
		if (this.state.currentStep > 1) {
			this.showStep(this.state.currentStep - 1);
		}
	},

	updateUI() {
		// Update buttons
		const btnPrev = document.getElementById('btn-prev');
		const btnNext = document.getElementById('btn-next');

		btnPrev.disabled = this.state.currentStep === 1;
		
		if (this.state.currentStep === this.state.totalSteps) {
			btnNext.textContent = 'Dokončiť';
		} else {
			btnNext.textContent = 'Pokračovať';
		}

		// Update progress bar
		const progressFill = document.querySelector('.progress-fill');
		const percent = ((this.state.currentStep - 1) / (this.state.totalSteps - 1)) * 100;
		progressFill.style.width = `${percent}%`;
	}
};

document.addEventListener('DOMContentLoaded', () => App.init());