<template>
	<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 Table -->
		<UPricingTable
			:tiers="mappedTiers"
			:sections="mappedSections"
			:caption="caption"
		/>

		<!-- 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 plans to compare [{ id, name, price?, highlighted?, button? }] */
	plans: {
		type: Array,
		default: () => [
			{
				id: "starter",
				name: "Starter",
				price: "$9/mo",
				button: { label: "Get Started" },
			},
			{
				id: "pro",
				name: "Pro",
				price: "$29/mo",
				highlighted: true,
				button: { label: "Get Pro" },
			},
			{
				id: "enterprise",
				name: "Enterprise",
				price: "$99/mo",
				button: { label: "Contact Sales" },
			},
		],
	},
	/** Feature groups with features [{ name?, features: [{ name, tooltip?, values: { [planId]: boolean|string } }] }] */
	featureGroups: {
		type: Array,
		default: () => [
			{
				name: "Core Features",
				features: [
					{
						name: "Projects",
						values: { starter: "5", pro: "Unlimited", enterprise: "Unlimited" },
					},
					{
						name: "Storage",
						values: { starter: "10GB", pro: "100GB", enterprise: "1TB" },
					},
					{
						name: "Team members",
						values: { starter: "1", pro: "10", enterprise: "Unlimited" },
					},
				],
			},
			{
				name: "Support",
				features: [
					{
						name: "Email support",
						values: { starter: true, pro: true, enterprise: true },
					},
					{
						name: "Priority support",
						values: { starter: false, pro: true, enterprise: true },
					},
					{
						name: "Dedicated manager",
						values: { starter: false, pro: false, enterprise: true },
					},
				],
			},
		],
	},
	/** Caption for the table */
	caption: {
		type: String,
		default: undefined,
	},
	/** 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"]);

// Map XMark plans to Nuxt UI tiers format
const mappedTiers = computed(() => {
	return props.plans.map((plan) => ({
		id: plan.id,
		title: plan.name,
		description: plan.description,
		price: plan.price,
		highlight: plan.highlighted,
		button: plan.button
			? {
					label: plan.button.label || "Get Started",
					color: plan.highlighted ? "primary" : "neutral",
					variant: plan.highlighted ? "solid" : "outline",
					onClick: () => emit("select", plan),
			  }
			: undefined,
	}));
});

// Map XMark featureGroups to Nuxt UI sections format
const mappedSections = computed(() => {
	return props.featureGroups.map((group, index) => ({
		id: `section-${index}`,
		title: group.name,
		features: group.features.map((feature) => ({
			title: feature.name,
			tiers: feature.values,
		})),
	}));
});

// 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>
