<template>
	<div>
		<!-- Billing Toggle -->
		<div v-if="hasBillingToggle" class="flex justify-center mb-12">
			<div
				class="inline-flex items-center gap-4 rounded-full bg-neutral-100 dark:bg-neutral-900 p-1"
			>
				<button
					class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
					:class="
						billingPeriod === 'monthly'
							? 'bg-white dark:bg-neutral-800 shadow-sm'
							: 'text-neutral-600 dark:text-neutral-400'
					"
					@click="billingPeriod = 'monthly'"
				>
					Monthly
				</button>
				<button
					class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
					:class="
						billingPeriod === 'yearly'
							? 'bg-white dark:bg-neutral-800 shadow-sm'
							: 'text-neutral-600 dark:text-neutral-400'
					"
					@click="billingPeriod = 'yearly'"
				>
					Yearly
					<span v-if="yearlyDiscount" class="ml-1 text-xs text-primary-500">
						Save {{ yearlyDiscount }}%
					</span>
				</button>
			</div>
		</div>

		<!-- Badges (top position) -->
		<div
			v-if="badges?.length && badgesPosition === 'top'"
			class="flex flex-wrap gap-4 mb-8"
			:class="badgesAlignClasses"
		>
			<XMarkSocialProofBadge
				v-for="badge in badges"
				:key="typeof badge === 'string' ? badge : badge.preset || badge.label"
				v-bind="getBadgeProps(badge)"
				variant="text-muted"
			/>
		</div>

		<!-- Pricing Plans -->
		<!-- Note: compact and scale on container are mutually exclusive -->
		<UPricingPlans
			:plans="mappedPlans"
			:scale="scale && !compact"
			:compact="compact && !scale"
		>
			<slot />
		</UPricingPlans>

		<!-- Badges (bottom position) -->
		<div
			v-if="badges?.length && badgesPosition === 'bottom'"
			class="flex flex-wrap gap-4 mt-8"
			:class="badgesAlignClasses"
		>
			<XMarkSocialProofBadge
				v-for="badge in badges"
				:key="typeof badge === 'string' ? badge : badge.preset || badge.label"
				v-bind="getBadgeProps(badge)"
				variant="text-muted"
			/>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	/** Array of pricing plans [{ name, price, period?, description?, features, button?, popular? }] */
	plans: {
		type: Array,
		default: () => [
			{
				name: "Starter",
				price: "$9",
				period: "/month",
				description: "Perfect for individuals and small projects.",
				features: ["5 projects", "10GB storage", "Email support"],
				button: { label: "Get Started" },
			},
			{
				name: "Pro",
				price: "$29",
				period: "/month",
				description: "For growing teams that need more power.",
				features: [
					"Unlimited projects",
					"100GB storage",
					"Priority support",
					"Advanced analytics",
				],
				button: { label: "Get Pro" },
				popular: true,
			},
			{
				name: "Enterprise",
				price: "$99",
				period: "/month",
				description: "For large organizations with custom needs.",
				features: [
					"Unlimited everything",
					"1TB storage",
					"Dedicated support",
					"Custom integrations",
					"SLA guarantee",
				],
				button: { label: "Contact Sales" },
			},
		],
	},
	/** Plan name to highlight (alternative to setting popular: true on plan) */
	highlighted: {
		type: String,
		default: "",
	},
	/** Has monthly/yearly billing toggle */
	hasBillingToggle: {
		type: Boolean,
		default: false,
	},
	/** Yearly discount percentage to display */
	yearlyDiscount: {
		type: Number,
		default: 10,
	},
	/** Scale effect - enlarges plans with highlight */
	scale: {
		type: Boolean,
		default: false,
	},
	/** Compact mode - no gap between plans */
	compact: {
		type: Boolean,
		default: true,
	},
	/** Variant for all plans */
	variant: {
		type: String,
		default: undefined,
		validator: (v) => ["soft", "solid", "outline", "subtle"].includes(v),
	},
	/** Social proof badge presets or custom badges */
	badges: {
		type: Array,
		default: () => [],
	},
	/** Position of badges */
	badgesPosition: {
		type: String,
		default: "bottom",
		validator: (v) => ["top", "bottom"].includes(v),
	},
	/** Alignment of badges */
	badgesAlign: {
		type: String,
		default: "center",
		validator: (v) => ["left", "center", "right"].includes(v),
	},
});

const emit = defineEmits(["select"]);

const billingPeriod = ref("monthly");

// Map XMark plan format to Nuxt UI format
const mappedPlans = computed(() => {
	return props.plans.map((plan) => {
		// Get the price based on billing period
		let price = plan.price;
		let billingCycle = plan.period || "";

		if (typeof plan.price === "object") {
			price =
				billingPeriod.value === "yearly"
					? plan.price.yearly
					: plan.price.monthly;
			billingCycle = billingPeriod.value === "yearly" ? "/year" : "/month";
		} else if (props.hasBillingToggle && !plan.period) {
			billingCycle = billingPeriod.value === "yearly" ? "/year" : "/month";
		}

		// Determine if this plan should be highlighted
		const isHighlighted = plan.popular || plan.name === props.highlighted;

		// Determine if this plan should be scaled (only if scale prop is true on container)
		const shouldScale = props.scale && isHighlighted;

		return {
			title: plan.name,
			description: plan.description,
			price: price,
			billingCycle: billingCycle,
			features: plan.features,
			highlight: isHighlighted,
			scale: shouldScale,
			badge: isHighlighted ? "Most Popular" : undefined,
			button: {
				label: plan.button?.label || "Get Started",
				onClick: () => emit("select", plan),
			},
		};
	});
});

// Badge alignment classes
const badgesAlignClasses = computed(() => {
	const alignments = {
		left: "justify-start",
		center: "justify-center",
		right: "justify-end",
	};
	return alignments[props.badgesAlign];
});

// Get badge props (handles string presets and object configs)
const getBadgeProps = (badge) => {
	if (typeof badge === "string") {
		return { preset: badge };
	}
	return badge;
};
</script>
