<template>
	<header
		class="fixed top-0 inset-x-0 z-50 transition-all duration-300"
		:class="[
			isScrolled
				? 'bg-white/90 dark:bg-neutral-950/90 backdrop-blur-lg shadow-sm'
				: transparent
					? 'bg-gradient-to-b from-black/90  to-transparent'
					: 'bg-white dark:bg-neutral-950',
			isScrolled ? 'py-3' : 'py-5'
		]"
	>
		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
			<nav class="flex items-center justify-between">
				<!-- Logo -->
				<slot name="logo">
					<NuxtLink to="/" class="flex-shrink-0">
						<img
							:src="isScrolled || !transparent ? resolvedLogoDark : resolvedLogoLight"
							:alt="resolvedLogoAlt"
							class="h-8 w-auto"
						/>
					</NuxtLink>
				</slot>

				<!-- Desktop Navigation -->
				<div class="hidden lg:flex items-center gap-8">
					<slot name="links">
						<NuxtLink
							v-for="link in resolvedLinks"
							:key="link.to"
							:to="link.to"
							class="relative text-sm font-medium transition-colors group"
							:class="linkColor"
						>
							{{ link.label }}

						</NuxtLink>
					</slot>
				</div>

				<!-- Actions -->
				<div class="hidden lg:flex items-center gap-4">
					<slot name="actions">
						<template v-if="resolvedButtons.length > 0">
							<UButton
								v-for="(button, index) in resolvedButtons"
								:key="index"
								:to="button.to"
								:icon="button.icon"
								:target="button.target || '_self'"
								:color="getButtonColor(button, index)"
								:variant="getButtonVariant(button, index)"
								:class="getButtonClass(button, index)"
							>
								{{ button.label }}
							</UButton>
						</template>
						<template v-else>
							<UButton
								variant="outline"
								color="neutral"
								:class="!isScrolled && transparent ? '!bg-transparent !text-white !border-white/60 hover:!bg-white/10' : ''"
							>
								Sign In
							</UButton>
							<UButton color="primary">
								Get Started
							</UButton>
						</template>
					</slot>
				</div>

				<!-- Mobile Menu Button -->
				<button
					class="lg:hidden p-2"
					@click="mobileOpen = true"
				>
					<UIcon name="i-lucide-menu" class="w-6 h-6" :class="linkColor" />
				</button>
			</nav>
		</div>

		<!-- Mobile Overlay -->
		<Teleport to="body">
			<Transition
				enter-active-class="transition-opacity duration-300"
				enter-from-class="opacity-0"
				leave-active-class="transition-opacity duration-300"
				leave-to-class="opacity-0"
			>
				<div
					v-if="mobileOpen"
					class="fixed inset-0 z-50 bg-white dark:bg-neutral-950 lg:hidden"
				>
					<div class="flex flex-col h-full p-6">
						<div class="flex justify-between items-center mb-8">
							<img :src="resolvedLogoDark" :alt="resolvedLogoAlt" class="h-8" />
							<button @click="mobileOpen = false">
								<UIcon name="i-lucide-x" class="w-6 h-6" />
							</button>
						</div>

						<nav class="flex-1 flex flex-col gap-2">
							<NuxtLink
								v-for="(link, index) in resolvedLinks"
								:key="link.to"
								:to="link.to"
								class="text-2xl font-medium py-3 border-b border-neutral-100 dark:border-neutral-800 transition-colors hover:text-primary-500"
								:style="{ transitionDelay: `${index * 50}ms` }"
								@click="mobileOpen = false"
							>
								{{ link.label }}
							</NuxtLink>
						</nav>

						<div class="flex flex-col gap-3">
							<slot name="mobile-actions">
								<template v-if="resolvedButtons.length > 0">
									<UButton
										v-for="(button, index) in resolvedButtons"
										:key="index"
										block
										:to="button.to"
										:icon="button.icon"
										:target="button.target || '_self'"
										:color="button.color || 'primary'"
										:variant="button.variant || (index === 0 ? 'outline' : 'solid')"
										@click="mobileOpen = false"
									>
										{{ button.label }}
									</UButton>
								</template>
								<template v-else>
									<UButton block variant="outline">Sign In</UButton>
									<UButton block color="primary">Get Started</UButton>
								</template>
							</slot>
						</div>
					</div>
				</div>
			</Transition>
		</Teleport>
	</header>
</template>

<script setup>
const appConfig = useAppConfig();
const header = appConfig?.xMarketing?.header;

const props = defineProps({
	/** Start transparent over hero */
	transparent: {
		type: Boolean,
		default: true,
	},
	/** Navigation links - falls back to appConfig.xMarketing.header.nav.links */
	links: {
		type: Array,
		default: null,
	},
	/** Logo object { src: string, srcDark?: string, alt?: string } - falls back to appConfig */
	logo: {
		type: Object,
		default: null,
		validator: (v) => !v || typeof v.src === 'string',
	},
	/** Pixels before transition */
	scrollThreshold: {
		type: Number,
		default: 100,
	},
	/** Action buttons - falls back to appConfig.xMarketing.header.nav.buttons */
	buttons: {
		type: Array,
		default: null,
	},
});

// Computed properties with appConfig fallbacks
const resolvedLinks = computed(() => {
	if (props.links && props.links.length > 0) return props.links;
	return header?.nav?.links || [];
});

const resolvedLogoLight = computed(() => {
	return props.logo?.src || header?.logo?.src || '';
});

const resolvedLogoDark = computed(() => {
	return props.logo?.srcDark || props.logo?.src || header?.logo?.srcDark || header?.logo?.src || '';
});

const resolvedLogoAlt = computed(() => {
	return props.logo?.alt || header?.logo?.alt || 'Logo';
});

const resolvedButtons = computed(() => {
	if (props.buttons && props.buttons.length > 0) return props.buttons;
	return header?.nav?.buttons || [];
});

const mobileOpen = ref(false);
const isScrolled = ref(false);

const linkColor = computed(() => {
	if (isScrolled.value || !props.transparent) {
		return 'text-neutral-900 dark:text-white';
	}
	return 'text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]';
});

// Button color/variant helpers for transparent vs scrolled states
const getButtonColor = (button, index) => {
	const isLastButton = index === resolvedButtons.value.length - 1;

	// Last button is always primary
	if (isLastButton || button.color === 'primary') return 'primary';

	// Non-last buttons use neutral (we'll override colors with classes in transparent state)
	if (button.color && button.color !== 'neutral') return button.color;
	return 'neutral';
};

// Custom classes for transparent state (Nuxt UI doesn't have 'white' color)
const getButtonClass = (button, index) => {
	const isLastButton = index === resolvedButtons.value.length - 1;

	// In transparent state, non-last buttons need white text/border on transparent bg
	if (!isScrolled.value && props.transparent && !isLastButton && button.color !== 'primary') {
		return '!bg-transparent !text-white !border-white/60 hover:!bg-white/10';
	}
	return '';
};

const getButtonVariant = (button, index) => {
	// If button has custom variant, respect it but convert ghost to outline for visibility
	if (button.variant) {
		// Ghost variant: always convert to outline for consistent text visibility
		if (button.variant === 'ghost') {
			return 'outline';
		}
		return button.variant;
	}

	const isLastButton = index === resolvedButtons.value.length - 1;

	// Last button is always solid
	if (isLastButton) return 'solid';

	// Non-last buttons: soft when transparent (visible bg), outline when scrolled
	return isScrolled.value || !props.transparent ? 'outline' : 'soft';
};

onMounted(() => {
	const handleScroll = () => {
		isScrolled.value = window.scrollY > props.scrollThreshold;
	};

	window.addEventListener('scroll', handleScroll, { passive: true });
	handleScroll();

	onUnmounted(() => {
		window.removeEventListener('scroll', handleScroll);
	});
});
</script>
