/**
 * WebWizard Frontend Logic
 */

const App = {
	state: {
		userId: localStorage.getItem('ww_user_id'),
		currentStep: 1,
		totalSteps: 8,
		project: null,
		categories: [],
		selection: {
			category: null,
			subcategory: null,
			customDescription: ''
		}
	},

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

		await this.loadCategories();
		this.bindEvents();
		
		// If we don't have a project, try to load existing or create one
		if (!this.state.project) {
			await this.loadLastProject();
		}

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

	async loadLastProject() {
		try {
			const response = await this.apiCall('listProjects');
			if (response.success && response.data.length > 0) {
				// Load the most recent project
				const lastProject = response.data[0];
				const statusResponse = await this.apiCall('getProjectStatus', {}, lastProject.project_id);
				if (statusResponse.success) {
					this.state.project = statusResponse.data;
					this.state.currentStep = this.state.project.current_step || 1;
					console.log('Loaded existing project:', this.state.project.project_id);
					this.syncSelectionWithProject();
				}
			} else {
				await this.createProject();
			}
		} catch (error) {
			console.error('Failed to load projects:', error);
			await this.createProject();
		}
	},

	syncSelectionWithProject() {
		if (this.state.project && this.state.project.wizard_data) {
			const wd = this.state.project.wizard_data;
			
			// Step 1
			if (wd.business_category) {
				const bc = wd.business_category;
				this.state.selection.category = bc.group;
				this.state.selection.subcategory = bc.subcategory;
				this.state.selection.customDescription = bc.custom_description || '';
				
				if (this.state.selection.category) {
					this.selectCategory(this.state.selection.category);
					this.state.selection.subcategory = bc.subcategory;
					this.renderSubcategories(this.state.selection.category);
				}
			}

			// Step 2
			if (wd.identity) {
				document.getElementById('business-name').value = wd.identity.business_name || '';
				document.getElementById('business-tagline').value = wd.identity.tagline || '';
				document.getElementById('business-description').value = wd.identity.description || '';
			}
			if (wd.contact) {
				document.getElementById('contact-email').value = wd.contact.email || '';
				document.getElementById('contact-phone').value = wd.contact.phone || '';
				document.getElementById('contact-address').value = wd.contact.address || '';
				document.getElementById('contact-city').value = wd.contact.city || '';
				document.getElementById('contact-facebook').value = wd.contact.socials?.facebook || '';
				document.getElementById('contact-instagram').value = wd.contact.socials?.instagram || '';
			}

			// Step 3
			if (wd.services && wd.services.items) {
				const list = document.getElementById('services-list');
				list.innerHTML = '';
				wd.services.items.forEach(item => this.addServiceItem(item));
				document.getElementById('pricing-note').value = wd.services.pricing_note || '';
			} else {
				this.addServiceItem();
			}
		}
	},

	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.');
		}
	},

	async createProject() {
		try {
			const response = await this.apiCall('createProject');
			if (response.success) {
				this.state.project = response.data;
				console.log('Project created:', this.state.project.project_id);
			}
		} catch (error) {
			console.error('Failed to create project:', error);
		}
	},

	async loadCategories() {
		try {
			const response = await this.apiCall('getCategories');
			if (response.success) {
				this.state.categories = response.data.categories;
				this.renderCategories();
			}
		} catch (error) {
			console.error('Failed to load categories:', error);
		}
	},

	async apiCall(action, payload = {}, projectId = null) {
		const body = {
			action,
			project_id: projectId || (this.state.project ? this.state.project.project_id : null),
			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());
		
		document.getElementById('custom-description').addEventListener('input', (e) => {
			this.state.selection.customDescription = e.target.value;
		});

		// Step 2 validation listeners
		['business-name', 'gdpr-consent', 'contact-email', 'contact-phone'].forEach(id => {
			const el = document.getElementById(id);
			if (el) {
				el.addEventListener('input', () => this.updateUI());
				el.addEventListener('change', () => this.updateUI());
			}
		});

		// Step 3 events
		document.getElementById('btn-add-service').addEventListener('click', () => this.addServiceItem());
	},

	renderCategories() {
		const container = document.getElementById('category-list');
		container.innerHTML = '';

		const icons = {
			gastro: '🍕',
			beauty: '✨',
			crafts: '🛠️',
			professional: '💼',
			other: '❓'
		};

		this.state.categories.forEach(cat => {
			const card = document.createElement('div');
			card.className = 'category-card';
			if (this.state.selection.category === cat.id) card.classList.add('selected');
			
			card.innerHTML = `
				<div class="category-icon">${icons[cat.id] || '📁'}</div>
				<div class="category-name">${cat.name}</div>
			`;

			card.addEventListener('click', () => this.selectCategory(cat.id));
			container.appendChild(card);
		});
	},

	selectCategory(categoryId) {
		this.state.selection.category = categoryId;
		this.state.selection.subcategory = null;
		
		this.renderCategories();
		this.renderSubcategories(categoryId);
		this.renderSmartQuestions(categoryId);

		document.getElementById('subcategory-container').classList.remove('hidden');
		
		if (categoryId === 'other') {
			document.getElementById('custom-category-group').classList.remove('hidden');
		} else {
			document.getElementById('custom-category-group').classList.add('hidden');
		}
	},

	renderSubcategories(categoryId) {
		const container = document.getElementById('subcategory-list');
		container.innerHTML = '';

		const category = this.state.categories.find(c => c.id === categoryId);
		if (!category) return;

		category.subcategories.forEach(sub => {
			const chip = document.createElement('div');
			chip.className = 'chip';
			if (this.state.selection.subcategory === sub.id) chip.classList.add('selected');
			chip.textContent = sub.name;

			chip.addEventListener('click', () => {
				this.state.selection.subcategory = sub.id;
				this.renderSubcategories(categoryId);
			});

			container.appendChild(chip);
		});
	},

	addServiceItem(data = {}) {
		const container = document.getElementById('services-list');
		const itemDiv = document.createElement('div');
		itemDiv.className = 'service-item';
		
		itemDiv.innerHTML = `
			<div class="service-item-header">
				<span class="service-number">Služba</span>
				<button class="btn-remove-service" title="Odstrániť">×</button>
			</div>
			<div class="form-group">
				<label>Názov služby *</label>
				<input type="text" class="service-name" placeholder="Napr. Klasická masáž" value="${data.name || ''}" required>
			</div>
			<div class="form-grid">
				<div class="form-group">
					<label>Cena od (€)</label>
					<input type="text" class="service-price" placeholder="25" value="${data.price_from || ''}">
				</div>
				<div class="form-group">
					<label>Stručný popis</label>
					<input type="text" class="service-desc" placeholder="Trvanie 45 minút..." value="${data.description || ''}">
				</div>
			</div>
		`;

		itemDiv.querySelector('.btn-remove-service').addEventListener('click', () => {
			if (container.querySelectorAll('.service-item').length > 1) {
				itemDiv.remove();
			} else {
				alert('Zadajte aspoň jednu službu.');
			}
		});

		container.appendChild(itemDiv);
	},

	renderSmartQuestions(categoryId) {
		const container = document.getElementById('smart-questions-list');
		container.innerHTML = '';

		const category = this.state.categories.find(c => c.id === categoryId);
		if (!category || !category.smart_questions) {
			document.getElementById('smart-questions-container').classList.add('hidden');
			return;
		}

		document.getElementById('smart-questions-container').classList.remove('hidden');

		category.smart_questions.forEach(q => {
			const qDiv = document.createElement('div');
			qDiv.className = 'smart-question-item';

			if (q.type === 'boolean') {
				qDiv.innerHTML = `
					<div class="checkbox-group">
						<input type="checkbox" id="sq-${q.id}" data-id="${q.id}">
						<label for="sq-${q.id}">${q.name}</label>
					</div>
				`;
			} else {
				qDiv.innerHTML = `
					<div class="form-group">
						<label for="sq-${q.id}">${q.name}</label>
						<input type="text" id="sq-${q.id}" data-id="${q.id}" placeholder="Vaša odpoveď...">
					</div>
				`;
			}

			container.appendChild(qDiv);

			// Apply existing answer if available
			if (this.state.project && this.state.project.wizard_data.smart_answers) {
				const answer = this.state.project.wizard_data.smart_answers[q.id];
				if (answer !== undefined) {
					const input = qDiv.querySelector(`#sq-${q.id}`);
					if (q.type === 'boolean') {
						input.checked = !!answer;
					} else {
						input.value = answer;
					}
				}
			}
		});
	},

	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();
	},

	async nextStep() {
		if (this.state.currentStep === 1) {
			if (!this.state.selection.category || !this.state.selection.subcategory) {
				alert('Prosím, vyberte kategóriu aj podkategóriu.');
				return;
			}

			try {
				await this.apiCall('saveStep', {
					step: 1,
					data: {
						business_category: {
							group: this.state.selection.category,
							subcategory: this.state.selection.subcategory,
							custom_description: this.state.selection.category === 'other' ? this.state.selection.customDescription : null
						}
					}
				});
			} catch (error) {
				console.error('Save step failed:', error);
				alert('Nepodarilo sa uložiť dáta.');
				return;
			}
		} else if (this.state.currentStep === 2) {
			const businessName = document.getElementById('business-name').value;
			const tagline = document.getElementById('business-tagline').value;
			const description = document.getElementById('business-description').value;
			const email = document.getElementById('contact-email').value;
			const phone = document.getElementById('contact-phone').value;
			const address = document.getElementById('contact-address').value;
			const city = document.getElementById('contact-city').value;
			const gdpr = document.getElementById('gdpr-consent').checked;

			if (!businessName || !gdpr || (!email && !phone)) {
				alert('Prosím, vyplňte povinné údaje a zaškrtnite GDPR súhlas.');
				return;
			}

			try {
				// 1. Save Consent
				await this.apiCall('saveConsent', {
					consent_text: document.querySelector('label[for="gdpr-consent"]').textContent
				});

				// 2. Save Step 2
				await this.apiCall('saveStep', {
					step: 2,
					data: {
						identity: {
							business_name: businessName,
							tagline: tagline,
							description: description
						},
						contact: {
							email: email,
							phone: phone,
							address: address,
							city: city,
							socials: {
								facebook: document.getElementById('contact-facebook').value,
								instagram: document.getElementById('contact-instagram').value
							}
						}
					}
				});
			} catch (error) {
				console.error('Save step 2 failed:', error);
				alert('Nepodarilo sa uložiť dáta: ' + error.message);
				return;
			}
		} else if (this.state.currentStep === 3) {
			const serviceItems = [];
			document.querySelectorAll('.service-item').forEach(item => {
				const name = item.querySelector('.service-name').value;
				if (name) {
					serviceItems.push({
						name: name,
						price_from: item.querySelector('.service-price').value,
						description: item.querySelector('.service-desc').value
					});
				}
			});

			const smartAnswers = {};
			document.querySelectorAll('.smart-question-item input').forEach(input => {
				const id = input.getAttribute('data-id');
				if (input.type === 'checkbox') {
					smartAnswers[id] = input.checked;
				} else {
					smartAnswers[id] = input.value;
				}
			});

			try {
				await this.apiCall('saveStep', {
					step: 3,
					data: {
						services: {
							items: serviceItems,
							pricing_note: document.getElementById('pricing-note').value
						},
						smart_answers: smartAnswers
					}
				});
			} catch (error) {
				console.error('Save step 3 failed:', error);
				alert('Nepodarilo sa uložiť dáta: ' + error.message);
				return;
			}
		}

		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() {
		const btnPrev = document.getElementById('btn-prev');
		const btnNext = document.getElementById('btn-next');

		btnPrev.disabled = this.state.currentStep === 1;
		
		// Validation for Next button
		let nextDisabled = false;
		if (this.state.currentStep === 1) {
			nextDisabled = !this.state.selection.category || !this.state.selection.subcategory;
		} else if (this.state.currentStep === 2) {
			const name = document.getElementById('business-name').value;
			const email = document.getElementById('contact-email').value;
			const phone = document.getElementById('contact-phone').value;
			const gdpr = document.getElementById('gdpr-consent').checked;
			nextDisabled = !name || !gdpr || (!email && !phone);
		}

		btnNext.disabled = nextDisabled;

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

		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());