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

		// Load additional data for logged-in users
		if (this.isLoggedIn()) {
			this.loadStats();
			this.loadRecentReferrals();
		}
	}

	initElements() {
		this.selectors = {
			copyBtn: '.copy-btn',
			checkCode: '.check-code-btn',
			submit: '[type=submit]',
		};

		this.forms = this.container.querySelectorAll('form');
		this.popup = new window.jvbPopup({
			toggle: this.toggle,
			popup: this.container,
			name: 'Referral Box',
			onOpen: () => {
				this.bindEventListeners(true);
			},
			onClose: () => {
				this.bindEventListeners(false);
			}
		});

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

	bindEventListeners(bind) {
		const method = bind ? 'addEventListener' : 'removeEventListener';

		this.forms.forEach(form => {
			form[method]('submit', this.submitHandler);
		});

		this.container[method]('click', this.clickHandler);
		this.container[method]('input', this.inputHandler);
	}

	isLoggedIn() {
		return Boolean(jvbSettings.currentUser);
	}

	handleClick(e) {
		const target = e.target.closest('.copy-btn, .check-code-btn, .attn');
		if (!target) return;

		if (target.classList.contains('copy-btn')) {
			this.handleCopyClick(target);
		} else if (target.classList.contains('check-code-btn')) {
			this.handleCheckCode(e);
		} else if (target.classList.contains('attn')) {
			target.classList.remove('attn');
		}
	}

	/**
	 * Handle copy button click with fallback
	 */
	handleCopyClick(button) {
		const targetId = button.dataset.target;
		const codeElement = this.container.querySelector(`#${targetId}`);

		if (!codeElement) return;

		const text = codeElement.textContent.trim();

		// Try clipboard API first
		if (navigator.clipboard && navigator.clipboard.writeText) {
			navigator.clipboard.writeText(text).then(() => {
				this.showCopySuccess(button);
			}).catch(() => {
				// Fallback to selection
				this.selectText(codeElement);
				this.showCopyFallback(button);
			});
		} else {
			// Fallback to selection
			this.selectText(codeElement);
			this.showCopyFallback(button);
		}
	}

	/**
	 * Select text in element
	 */
	selectText(element) {
		if (window.getSelection && document.createRange) {
			const selection = window.getSelection();
			const range = document.createRange();
			range.selectNodeContents(element);
			selection.removeAllRanges();
			selection.addRange(range);
		} else if (document.body.createTextRange) {
			// IE fallback
			const range = document.body.createTextRange();
			range.moveToElementText(element);
			range.select();
		}
	}

	/**
	 * Show copy success feedback
	 */
	showCopySuccess(button) {
		const originalHTML = button.innerHTML;
		button.innerHTML = window.jvbIcon('check', {size: 16}) + ' Copied!';
		button.classList.add('success');

		setTimeout(() => {
			button.innerHTML = originalHTML;
			button.classList.remove('success');
		}, 2000);
	}

	/**
	 * Show fallback message
	 */
	showCopyFallback(button) {
		const originalHTML = button.innerHTML;
		button.innerHTML = '✓ Selected - Press Ctrl+C';
		button.classList.add('selected');

		setTimeout(() => {
			button.innerHTML = originalHTML;
			button.classList.remove('selected');
		}, 3000);
	}

	handleInput(e) {
		if (e.target.id === 'referral_code' || e.target.name === 'referral_code') {
			e.target.value = e.target.value.toUpperCase();
		}
	}

	/**
	 * Handle code verification
	 */
	async handleCheckCode(e) {
		e.preventDefault();

		const form = e.target.closest('form');
		const codeInput = form.querySelector('[name="referral_code"]');
		const statusDiv = form.querySelector('.code-status');

		if (!codeInput || !statusDiv) return;

		const code = codeInput.value.trim();

		if (!code) {
			this.showCodeStatus(statusDiv, 'Please enter a code', 'error');
			return;
		}

		// Show loading
		statusDiv.hidden = false;
		statusDiv.className = 'code-status loading';
		statusDiv.innerHTML = '<span class="spinner"></span> Checking...';

		try {
			const result = await this.validateCodeOnly(code);

			if (result.success) {
				this.showCodeStatus(
					statusDiv,
					`✓ Valid! Referred by ${result.referrer_name}`,
					'success'
				);
			} else {
				this.showCodeStatus(statusDiv, result.message || 'Invalid code', 'error');
			}
		} catch (error) {
			console.error('Error checking code:', error);
			this.showCodeStatus(statusDiv, 'Error checking code', 'error');
		}
	}

	/**
	 * Show code verification status
	 */
	showCodeStatus(statusDiv, message, type) {
		statusDiv.hidden = false;
		statusDiv.className = `code-status ${type}`;
		statusDiv.textContent = message;

		if (type === 'error') {
			setTimeout(() => {
				statusDiv.hidden = true;
			}, 5000);
		}
	}

	/**
	 * 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('[name="referral_code"]');
		if (!codeInput) return;

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

		// Pre-fill the code input
		codeInput.value = code;
		codeInput.readOnly = true;

		this.popup.togglePopup();

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

			if (referrer.success) {
				const statusDiv = codeInput.closest('form').querySelector('.code-status');
				if (statusDiv) {
					this.showCodeStatus(
						statusDiv,
						`✓ ${referrer.referrer_name} invited you!`,
						'success'
					);
				}

				// Focus on name input
				const nameInput = this.container.querySelector('[name="referral_name"]');
				if (nameInput) {
					nameInput.focus();
				}
			} else {
				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
		this.removeUrlParameter('ref');
	}

	getUrlParameter(name) {
		const urlParams = new URLSearchParams(window.location.search);
		return urlParams.get(name);
	}

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

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

		return await response.json();
	}

	/**
	 * Load user stats
	 */
	async loadStats() {
		const statsContainer = this.container.querySelector('.stats-summary');
		if (!statsContainer) return;

		try {
			const response = await fetch(`${jvbSettings.api}referrals/my-stats?user=${jvbSettings.currentUser}`, {
				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);
		}
	}

	/**
	 * Load recent referrals (last 5)
	 */
	async loadRecentReferrals() {
		const container = this.container.querySelector('.recent-referrals-list');
		if (!container) return;

		try {
			const response = await fetch(`${jvbSettings.api}referrals/my-referrals?limit=5&user=${jvbSettings.currentUser}`, {
				headers: { 'X-WP-Nonce': jvbSettings.nonce }
			});

			const data = await response.json();
			if (data.success && data.referrals) {
				this.renderRecentReferrals(container, data.referrals);
			} else {
				container.innerHTML = '<p class="no-referrals">No referrals yet</p>';
			}
		} catch (error) {
			console.error('Error loading referrals:', error);
			container.innerHTML = '<p class="error">Failed to load referrals</p>';
		}
	}

	/**
	 * Render recent referrals list
	 */
	renderRecentReferrals(container, referrals) {
		if (!referrals || referrals.length === 0) {
			container.innerHTML = '<p class="no-referrals">Share your code to get started!</p>';
			return;
		}

		const html = referrals.map(ref => `
			<div class="referral-item">
				<div class="referral-info">
					<strong>${window.escapeHtml(ref.referee_name)}</strong>
					<span class="status-badge ${ref.status}">${ref.status}</span>
				</div>
				<div class="referral-date">${this.formatDate(ref.referred_at)}</div>
			</div>
		`).join('');

		container.innerHTML = html;
	}

	/**
	 * Format date nicely
	 */
	formatDate(dateString) {
		const date = new Date(dateString);
		const now = new Date();
		const diffTime = Math.abs(now - date);
		const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

		if (diffDays === 0) return 'Today';
		if (diffDays === 1) return 'Yesterday';
		if (diffDays < 7) return `${diffDays} days ago`;

		return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
	}

	/**
	 * Handle form submission
	 */
	async handleFormSubmit(event) {
		event.preventDefault();

		const form = event.target;
		const formData = new FormData(form);

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

		try {
			let result = { success: false, message: '' };

			if (form.id === 'referral-code-form') {
				const data = {
					name: formData.get('referral_name'),
					email: formData.get('referral_email'),
					code: formData.get('referral_code')
				};

				if (!data.name || !data.email || !data.code) {
					result.message = 'Please fill in all fields';
				} else {
					result = await this.makeRequest('referrals/register', data);
				}
			} else if (form.id === 'login-form') {
				const data = {
					type: 'login',
					email: formData.get('login_email'),
					context: {
						redirect_to: window.location.href + '?seeReferral=1'
					}
				};
				result = await this.makeRequest('magic', data);
			}

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

	async makeRequest(endpoint, data) {
		const validEndpoints = [
			'magic',
			'referrals/register',
			'referrals/check-code'
		];

		if (!validEndpoints.includes(endpoint)) {
			return { success: false, message: 'Invalid endpoint' };
		}

		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(form, result) {
		// Hide form
		form.style.display = 'none';

		// Show success message
		const successDiv = form.nextElementSibling;
		if (successDiv && successDiv.classList.contains('success-content')) {
			successDiv.hidden = false;

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

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

	/**
	 * Show message in form status area
	 */
	showFormMessage(form, text, type = 'error') {
		const status = form.querySelector('.status');
		if (!status) return;

		const message = status.querySelector('.message');
		if (message) {
			message.textContent = text;
		}

		status.hidden = false;
		status.className = `status ${type}`;

		if (type === 'error') {
			setTimeout(() => {
				status.hidden = true;
			}, 5000);
		}
	}

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

		const status = form.querySelector('.status');
		if (status) {
			status.classList.toggle('loading', loading);

			if (loading) {
				status.hidden = false;
				const message = status.querySelector('.message');
				if (message) {
					message.textContent = 'Sending...';
				}
			}
		}
	}

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