<template>
	<section
		:class="[
			'relative overflow-hidden',
			rounded ? 'rounded-2xl' : 'rounded-none',
			paddingClasses,
			bgColorClasses,
		]"
	>
		<!-- Background Pattern -->
		<XMarkPatternBg
			v-if="resolvedBg.pattern"
			:pattern="resolvedBg.pattern"
			:opacity="resolvedBg.patternOpacity"
			class="absolute inset-0 pointer-events-none"
		/>

		<!-- Background Image -->
		<div v-if="resolvedBg.image" class="absolute inset-0">
			<img
				:src="resolvedBg.image"
				:alt="resolvedBg.imageAlt"
				class="w-full h-full object-cover"
				:class="resolvedBg.imagePosition"
			/>
			<div
				v-if="resolvedBg.imageOverlay"
				class="absolute inset-0"
				:class="bgImageOverlayClass"
			/>
		</div>

		<!-- Content -->
		<div :class="['relative z-10', containerClasses]">
			<!-- Icon -->
			<div v-if="icon" :class="iconContainerClasses">
				<UIcon :name="icon" :class="iconClasses" />
			</div>

			<!-- Content -->
			<div :class="contentClasses">
				<!-- Eyebrow -->
				<p v-if="eyebrow" :class="eyebrowClasses">
					{{ eyebrow }}
				</p>

				<!-- Title -->
				<h3 :class="titleClasses">
					{{ title }}
				</h3>

				<!-- Description -->
				<p v-if="description" :class="descriptionClasses">
					{{ description }}
				</p>
			</div>

			<!-- Buttons -->
			<div v-if="buttons?.length" :class="buttonsClasses">
				<UButton
					v-for="(button, index) in buttons"
					:key="index"
					:label="button.label"
					:to="button.to"
					:color="getButtonColor(button, index)"
					:variant="button.variant || (index === 0 ? 'solid' : 'outline')"
					:icon="button.icon"
					:size="size === 'lg' ? 'lg' : 'md'"
					:class="getButtonClass(button, index)"
				/>
			</div>
		</div>
	</section>
</template>

<script setup>
const props = defineProps({
	/** Eyebrow text above title */
	eyebrow: {
		type: String,
		default: "",
	},
	/** CTA title */
	title: {
		type: String,
		default: "Ready to get started?",
	},
	/** CTA description */
	description: {
		type: String,
		default: "",
	},
	/** Optional icon */
	icon: {
		type: String,
		default: "",
	},
	/** Action buttons */
	buttons: {
		type: Array,
		default: () => [],
		// [{ label, to?, color?, variant?, icon? }]
	},
	/** Layout variant */
	variant: {
		type: String,
		default: "default",
		validator: (v) => ["default", "centered", "inline", "stacked"].includes(v),
	},
	/**
	 * Background configuration object or string shorthand
	 * @property {string} variant - 'subtle' | 'bold' | 'gradient' | 'none'
	 * @property {string} color - Custom Tailwind classes (overrides variant)
	 * @property {string} image - Background image URL
	 * @property {string} imageAlt - Background image alt text
	 * @property {string} imageOverlay - 'light' | 'heavy' | 'gradient'
	 * @property {string} imagePosition - Tailwind object-position class
	 * @property {string} pattern - 'dots' | 'grid' | 'diagonal' | 'topography' | 'circuit' | 'waves'
	 * @property {number} patternOpacity - Pattern opacity (0-1)
	 */
	bg: {
		type: [Object, String],
		default: "subtle",
	},
	/** Size */
	size: {
		type: String,
		default: "md",
		validator: (v) => ["sm", "md", "lg"].includes(v),
	},
	/** Card corners. Set false for full-bleed pre-footer CTAs. */
	rounded: {
		type: Boolean,
		default: true,
	},
});

// Default bg values
const bgDefaults = {
	variant: "subtle",
	color: "",
	image: "",
	imageAlt: "",
	imageOverlay: "",
	imagePosition: "object-center",
	pattern: "",
	patternOpacity: 0.05,
};

// Resolve bg prop (supports string shorthand for variant or full object)
const resolvedBg = computed(() => {
	if (typeof props.bg === "string") {
		return { ...bgDefaults, variant: props.bg };
	}
	return { ...bgDefaults, ...props.bg };
});

// Check if background is "bold" (dark background requiring light text)
const isBoldBg = computed(() => {
	return (
		["bold", "gradient"].includes(resolvedBg.value.variant) ||
		resolvedBg.value.image
	);
});

const paddingClasses = computed(() => {
	const sizes = {
		sm: "p-6",
		md: "p-8 md:p-12",
		lg: "p-12 md:p-16",
	};
	return sizes[props.size];
});

const bgColorClasses = computed(() => {
	// Custom color class takes priority
	if (resolvedBg.value.color) return resolvedBg.value.color;

	const variants = {
		subtle: "bg-neutral-100 dark:bg-neutral-900",
		bold: "bg-primary-600 dark:bg-primary-700",
		gradient: "bg-gradient-to-br from-primary-600 to-primary-800",
		none: "",
	};
	return variants[resolvedBg.value.variant] || variants.subtle;
});

const bgImageOverlayClass = computed(() => {
	const overlays = {
		light: "bg-black/30",
		heavy: "bg-black/60",
		gradient: "bg-gradient-to-t from-black/80 via-black/40 to-transparent",
	};
	return overlays[resolvedBg.value.imageOverlay] || "";
});

const containerClasses = computed(() => {
	const layouts = {
		default:
			"flex flex-col md:flex-row md:items-center md:justify-between gap-6",
		centered: "text-center max-w-2xl mx-auto",
		inline:
			"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4",
		stacked: "flex flex-col items-center text-center gap-6",
	};
	return layouts[props.variant];
});

const iconContainerClasses = computed(() => {
	// Keep the badge square: flex parents (inline/default column layout)
	// default to stretch on the cross axis and can squash fixed width/height.
	const centered = ["stacked", "centered"].includes(props.variant);
	return [
		"flex shrink-0 items-center justify-center rounded-xl aspect-square",
		centered ? "self-center" : "self-start",
		props.size === "lg"
			? "size-16 min-w-16 min-h-16"
			: "size-12 min-w-12 min-h-12",
		isBoldBg.value ? "bg-white/20" : "bg-primary-100 dark:bg-primary-900/50",
	];
});

const iconClasses = computed(() => {
	return [
		"shrink-0 block",
		props.size === "lg" ? "size-8" : "size-6",
		isBoldBg.value ? "text-white" : "text-primary-500",
	];
});

const contentClasses = computed(() => {
	if (props.variant === "default" || props.variant === "inline") {
		return "flex-1 min-w-0";
	}
	return "";
});

const eyebrowClasses = computed(() => {
	return [
		"xText-eyebrow mb-2",
		isBoldBg.value ? "text-white/70" : "text-primary-600 dark:text-primary-400",
	];
});

const titleClasses = computed(() => {
	const sizeClasses = {
		sm: "text-lg font-semibold",
		md: "text-xl font-semibold",
		lg: "xText-headline",
	};
	return [
		sizeClasses[props.size],
		isBoldBg.value ? "text-white" : "text-neutral-900 dark:text-white",
	];
});

const descriptionClasses = computed(() => {
	return [
		"mt-2",
		props.size === "sm" ? "text-sm" : "text-base",
		isBoldBg.value ? "text-white/80" : "text-neutral-600 dark:text-neutral-400",
	];
});

const buttonsClasses = computed(() => {
	const layouts = {
		default: "flex flex-wrap gap-3",
		centered: "flex flex-wrap justify-center gap-3 mt-6",
		inline: "flex flex-wrap gap-3",
		stacked: "flex flex-wrap justify-center gap-3",
	};
	return layouts[props.variant];
});

const getButtonColor = (button, index) => {
	// Allow explicit color override
	if (button.color && button.color !== "white") return button.color;
	if (index === 0) {
		// Use neutral instead of white (not a valid Nuxt UI v4 color)
		// Custom classes handle the actual styling
		return isBoldBg.value ? "neutral" : "primary";
	}
	return "neutral";
};

const getButtonClass = (button, index) => {
	const isOutline =
		button.variant === "outline" || (index > 0 && !button.variant);
	const isGhost = button.variant === "ghost";
	const isSolid =
		button.variant === "solid" || (index === 0 && !button.variant);

	// Solid buttons on bold/gradient backgrounds - white bg with dark text
	if (isBoldBg.value && isSolid) {
		return "bg-white text-neutral-900 hover:bg-white/90";
	}
	// Outline buttons on bold/gradient backgrounds - transparent with white border
	if (isBoldBg.value && isOutline) {
		return "bg-white/10 backdrop-blur-sm border-white/40 hover:bg-white/20 hover:border-white/60 text-white";
	}
	// Ghost buttons on bold/gradient backgrounds - transparent with white text
	if (isBoldBg.value && isGhost) {
		return "text-white hover:bg-white/10";
	}
	// Outline buttons on subtle backgrounds
	if (!isBoldBg.value && isOutline) {
		return "border-neutral-400 dark:border-neutral-600 hover:border-neutral-500 dark:hover:border-neutral-500";
	}
	return "";
};
</script>
