/**
 * Referral Widget Manager
 * Handles both logged-in share widget and public code validation widget
 *
 */

class Referral {
	constructor() {
		this.container = document.querySelector('.jvb-referral');
		if (!this.container) {
			return;
		}

		this.a11y = window.jvbA11y;

		this.toggle = document.querySelector('button[data-action="toggle-referral"]');

		this.initElements();
		this.initListeners();
		this.checkForReferral();
	}

	initElements()
	{
		this.selectors = {
			copy: 'button.copy',
			login: '.login',
			submit: '[type=submit]',
		};

		this.forms = this.container.querySelectorAll('form');
		console.log(this.forms);
		this.popup = new window.jvbPopup({
			toggle: this.toggle,
			popup: this.container,
			name: 'Referral Box',
			onOpen: () => {
				this.forms.forEach(form => {
					form.addEventListener('submit', this.submitHandler);
				});
				this.container.addEventListener('click', this.clickHandler);
				this.container.addEventListener('input', this.inputHandler);
			},
			onClose: () => {
				this.forms.forEach(form => {
					form.removeEventListener('submit', this.submitHandler);
				});
				this.container.removeEventListener('click', this.clickHandler);
				this.container.removeEventListener('input', this.inputHandler);
			}
		});

		this.tabs = null;
		if (this.container.querySelector('nav.tabs')) {
			this.tabs = new window.jvbTabs(this.container, {updateURL: false});
		}

		this.ui = window.uiFromSelectors(this.selectors, this.container);
	}

	initListeners() {
		this.clickHandler = this.handleClick.bind(this);
		this.inputHandler = this.handleInput.bind(this);
		this.submitHandler = this.handleFormSubmit.bind(this);
		this.changeHandler = this.handleChange.bind(this);

	}

	handleClick(e) {
		if (e.target.classList.contains('.copy')) {
			let target = e.target.dataset.target;
			let value = this.container.querySelector(`#${target}`);
			value = (value) ? value.textContent : false;
			if (value) {
				this.handleCopy(e.target, value);
			}
		}
	}

	handleChange(e) {
		if (e.target.id === 'referral-code') {
			window.debouncer.schedule(
				'check-referral',
				()=> this.makeRequest('referrals/check-code', {code: e.target.value})),
				150
		}
	}

	handleInput(e) {
		if (e.target.id === 'referral-code') {
			e.target.value = e.target.value.toUpperCase();
		}
	}

	// ==========================================
	// SHARE WIDGET (Logged-In Users)
	// ==========================================

	initShareWidget() {
		this.initCopyButton();
		this.loadStats();
	}

	/**
	 * Check for ?ref parameter in URL and pre-fill code
	 */
	async checkForReferral() {
		const isLoggedIn = this.getUrlParameter('seeReferral');
		const refCode = this.getUrlParameter('ref');
		if (!isLoggedIn && !refCode) {
			return;
		}
		if (!refCode) {
			this.popup.openPopup();
			return;
		}

		const codeInput = this.container.querySelector('#referral-code-input');
		if (!codeInput) return;

		// Convert to uppercase
		const code = refCode.toUpperCase();

		// Pre-fill the code input
		codeInput.value = code;
		codeInput.readOnly = true; // Make it read-only since it came from link

		this.popup.togglePopup();

		// Validate the code immediately to show referrer info
		try {
			const referrer = await this.validateCodeOnly(code);

			if (referrer.success) {
				// Show referrer info banner
				this.showReferrerBanner(referrer.referrer_name, code);

				// Focus on name input (first empty field)
				const nameInput = this.container.querySelector('#referral-name');
				if (nameInput) {
					nameInput.focus();
				}
			} else {
				// Invalid code - make input editable and show error
				codeInput.readOnly = false;
				this.showMessage('This referral link is invalid. Please enter a valid code.', 'error');
			}
		} catch (error) {
			console.error('Error validating code:', error);
			codeInput.readOnly = false;
		}

		// Clean up URL (remove ?ref parameter)
		this.removeUrlParameter('ref');
	}

	/**
	 * Get URL parameter value
	 */
	getUrlParameter(name) {
		const urlParams = new URLSearchParams(window.location.search);
		return urlParams.get(name);
	}

	/**
	 * Remove URL parameter (clean URL)
	 */
	removeUrlParameter(name) {
		const url = new URL(window.location);
		url.searchParams.delete(name);
		window.history.replaceState({}, document.title, url.toString());
	}

	/**
	 * Validate code without registering (just check if valid)
	 */
	async validateCodeOnly(code) {
		const response = await fetch(`${jvbSettings.api}/referrals/check-code`, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({ code: code })
		});

		return await response.json();
	}

	/**
	 * Show banner with referrer info
	 */
	showReferrerBanner(referrerName, code) {
		const header = this.container.querySelector('.referral-header');
		if (!header) return;

		// Create banner
		const banner = document.createElement('div');
		banner.className = 'referrer-banner';
		banner.innerHTML = `
            <div class="banner-icon">🎉</div>
            <div class="banner-content">
                <strong>${window.escapeHtml(referrerName)}</strong> referred you!
                <div class="banner-code">Code: <code>${window.escapeHtml(code)}</code></div>
            </div>
        `;

		// Insert after header
		header.parentNode.insertBefore(banner, header.nextSibling);

		// Update header text
		const headerTitle = header.querySelector('h3');
		if (headerTitle) {
			headerTitle.textContent = 'Complete Your Registration';
		}

		const headerDesc = header.querySelector('p');
		if (headerDesc) {
			headerDesc.textContent = 'Enter your details below to claim your welcome reward!';
		}
	}

	/**
	 * Copy referral link to clipboard
	 */
	handleCopy(button, text = '') {
		if (text === '' || typeof text !== 'string') {
			return;
		}
		let originalText = button.textContent;
		if (navigator.clipboard || navigator.clipboard.writeText) {
			navigator.clipboard.writeText(text).then(() => {
				button.textContent = 'Copied!';
				button.style.background = '#00a32a';

				setTimeout(() => {
					button.textContent = originalText;
					button.style.background = '';
				}, 2000);
			})
		}
	}

	async loadStats() {
		const statsContainer = this.container.querySelector('.referral-stats');
		if (!statsContainer) return;

		try {
			const response = await fetch(`${jvbSettings.api}/referrals/stats`, {
				headers: { 'X-WP-Nonce': jvbSettings.nonce }
			});

			const data = await response.json();
			if (data.success && data.stats) {
				this.updateStats(data.stats);
			}
		} catch (error) {
			console.error('Error loading stats:', error);
		}
	}

	/**
	 * Update stats display
	 */
	updateStats(stats) {
		const elements = {
			total: this.container.querySelector('[data-stat="total"]'),
			treated: this.container.querySelector('[data-stat="treated"]'),
			pending: this.container.querySelector('[data-stat="pending"]'),
			rewards: this.container.querySelector('[data-stat="rewards"]')
		};

		if (elements.total) elements.total.textContent = stats.total_referrals || 0;
		if (elements.treated) elements.treated.textContent = stats.treated_count || 0;
		if (elements.pending) elements.pending.textContent = stats.pending_count || 0;
		if (elements.rewards) {
			elements.rewards.textContent = '$' + parseFloat(stats.available_rewards || 0).toFixed(2);
		}
	}

	/**
	 * Handle form submission
	 */
	async handleFormSubmit(event) {
		console.log('Form Submission!');
		window.debouncer.cancel('check-referral');
		event.preventDefault();
		console.log('Still working?');

		const form = event.target;

		// Get form data
		const formData = new FormData(form);

		let data = {};

		// Disable form
		this.setFormLoading(true, form);

		try {

			let result = {success: false, message: ''};
			console.log(form);
			console.log(form.id);
			if (form.id === 'referral-code-form') {
				if (!formData.get('name')) {
					result.message += 'We need your name to know who you are.';
				}
				if (!formData.get('email')) {
					result.message += 'We need your email to confirm you have access to it.';
				}
				if (!formData.get('referral_code')) {
					result.message += 'We need the referral code to know who sent you.';
				}
				if (formData.get('name') && formData.get('email') && formData.get('referral_code')) {
					data.name = formData.get('name');
					data.email = formData.get('email');
					data.code = formData.get('referral_code');
					result = await this.makeRequest('referrals/register', data);
				}
			} else if (form.id === 'login-form' && formData.get('login-email')) {
				data.type = 'login';
				data.email = formData.get('login-email');
				data.context = {};
				data.context['redirect_to'] = window.location.href+'?seeReferral=1';
				console.log('Making Request with: ', data);
				result = await this.makeRequest('magic', data);
			}


			if (result.success) {
				this.handleSuccess(result);
			} else {
				this.showMessage(result.message || 'Something went wrong. Please try again.', 'error');
				this.setFormLoading(false, form);
			}
		} catch (error) {
			console.error('Error registering:', error);
			this.showMessage('Something went wrong. Please try again.', 'error');
			this.setFormLoading(false, form);
		} finally {
			this.setFormLoading(false, form);
		}
	}

	async makeRequest(endpoint, data) {
		if (![
			'magic',
			'referrals/register',
			'referrals/check-code'
		].includes(endpoint)) {
			return {success:false, message: 'Something went wrong (Invalid endpoint).'}
		}
		console.log('Endpoint: ', endpoint);
		console.log('Data: ', data);
		const response = await fetch(`${jvbSettings.api}${endpoint}`, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
				'X-WP-Nonce': jvbSettings.nonce,
			},
			body: JSON.stringify(data)
		});

		return await response.json();
	}

	/**
	 * Show success state
	 */
	handleSuccess(result) {
		//Hide forms
		this.container.querySelectorAll('form').forEach(form => {
			window.fade(form, false);
		});

		const successState = this.container.querySelector('.success-message');
		if (!successState) return;

		// Show success message
		successState.hidden = false;

		// Scroll to message
		successState.scrollIntoView({
			behavior: 'smooth',
			block: 'center'
		});

		// Fire custom event
		this.dispatchEvent('emailSent', {
			email: result.email
		});
	}

	/**
	 * Set form loading state
	 */
	setFormLoading(loading, form) {
		const inputs = form.querySelectorAll('input');

		inputs.forEach(input => input.disabled = loading);
		let status = form.querySelector('.status');
		let message = status.querySelector('.message');
		status.hidden = loading;
		status.classList.toggle('loading', loading);
		if (loading) {
			message.textContent = 'Checking with server...';
		} else {
			message.textContent = '';
		}
	}

	/**
	 * Show message
	 */
	showMessage(text, type = 'success') {
		const messageDiv = this.container.querySelector('#referral-message');
		if (!messageDiv) return;

		messageDiv.textContent = text;
		messageDiv.className = 'message ' + type;
		messageDiv.style.display = 'block';

		if (type === 'error') {
			setTimeout(() => {
				messageDiv.style.display = 'none';
			}, 5000);
		}
	}

	/**
	 * Dispatch custom event
	 */
	dispatchEvent(eventName, detail) {
		const event = new CustomEvent('referralWidget:' + eventName, {
			detail: detail,
			bubbles: true
		});
		this.container.dispatchEvent(event);
	}
}


document.addEventListener('DOMContentLoaded', () => {
	window.jvbReferral = new Referral();
});