(function ($) {
	"use strict";

	const STW_Landing = {
		initialized: false,

		init: function () {
			if (this.initialized) return;

			loadConnectionStatus();
			loadPlanStatus();
			setupEventListeners();
			this.initialized = true;
		},
	};

	function setupEventListeners() {
		$(document)
			.off("click", "#go-to-dashboard-btn")
			.on("click", "#go-to-dashboard-btn", goToDashboard);
		$(document)
			.off("click", "#view-settings-btn, #go-to-settings-btn")
			.on("click", "#view-settings-btn, #go-to-settings-btn", goToSettings);
		$(document)
			.off("click", "#view-plans-btn")
			.on("click", "#view-plans-btn", viewPlans);
		$(document)
			.off("click", "#edit-product-template-btn")
			.on("click", "#edit-product-template-btn", editProductTemplate);
	}

	function loadConnectionStatus() {
		$.ajax({
			url: scanshowAdmin.restUrl + "connection",
			method: "GET",
			success: function (response) {
				if (response.connected) {
					$("#connection-status").html(`
						<div style="display: flex; align-items: center; gap: 10px; padding: 12px; background: #edfaef; border-radius: 4px; border-left: 4px solid #46b450;">
							<span class="dashicons dashicons-yes-alt" style="color: #46b450; font-size: 20px;"></span>
							<div>
								<strong style="color: #046b4a;">Connected to STW Platform</strong>
								<div style="font-size: 14px; color: #666; margin-top: 3px;">
									Logged in as: ${response.user_email}
								</div>
							</div>
						</div>
					`);
				} else {
					$("#connection-status").html(`
						<div style="padding: 12px; background: #fbeaea; border-radius: 4px; border-left: 4px solid #dc3232; margin-bottom: 15px;">
							<strong style="color: #dc3232;">Not connected to STW Platform</strong>
							<p style="margin: 8px 0; color: #666;">Login to your account to start using 3D models.</p>
						</div>
						<button class="button button-primary" id="login-now-btn">Login Now</button>
					`);
					$("#login-now-btn").on("click", goToSettings);
				}
			},
			error: function () {
				$("#connection-status").html(`
					<p style="color: #dc3232;">Error checking connection status</p>
				`);
			},
		});
	}

	function loadPlanStatus() {
		$.ajax({
			url: scanshowAdmin.restUrl + "quota",
			method: "GET",
			success: function (data) {
				if (data.error) {
					$("#plan-status").html(`
						<p style="color: #dc3232;">Please connect to view plan information</p>
					`);
					return;
				}

				const user = data.user || {};
				const subscription = user.subscription || {};
				const plan = subscription.plan || {};

				const planName = plan.name || "Free Plan";
				const scanQuota = plan.scan_quota || 0;
				const linkQuota = plan.link_quota || 0;
				const billingInterval =
					subscription.billing_interval.toLowerCase() || "monthly";

				$("#plan-status").html(`
					<div style="padding: 15px; background: #f9f9f9; border-radius: 4px; margin-top: 10px;">
						<div style="font-size: 18px; font-weight: 600; color: #2271b1; margin-bottom: 8px;">
							${planName}
						</div>
						<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;">
							<div>
								<strong>Scan Quota:</strong> ${scanQuota} / ${billingInterval}
							</div>
							<div>
								<strong>Link Quota:</strong> ${linkQuota} / ${billingInterval}
							</div>
						</div>
					</div>
				`);
			},
			error: function () {
				$("#plan-status").html(`
					<p style="color: #999;">Unable to load plan information</p>
				`);
			},
		});
	}

	function goToDashboard() {
		window.STW_CONFIG.navigateToRoute("/dashboard");
	}

	function goToSettings() {
		window.STW_CONFIG.navigateToRoute("/settings");
	}

	function viewPlans() {
		window.STW_CONFIG.openExternal(window.STW_CONFIG.EXTERNAL_URLS.STW_PRICING);
	}

	function editProductTemplate() {
		const editorUrl = window.STW_CONFIG.getSingleProductEditorUrl();
		window.open(editorUrl, "_blank");
	}

	window.STW_Landing = STW_Landing;
})(jQuery);
