<template>
	<article class="blog-detail">
		<!-- Hero -->
		<header class="mb-16 lg:mb-20">
			<div class="max-w-3xl mx-auto text-center mb-10">
				<UBadge
					v-if="post.category"
					:label="post.category"
					color="primary"
					variant="subtle"
					class="mb-6"
				/>
				<h1
					class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight tracking-tight text-neutral-900 dark:text-white"
				>
					{{ post.title }}
				</h1>
				<p
					v-if="post.description"
					class="mt-6 text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-2xl mx-auto"
				>
					{{ post.description }}
				</p>

				<!-- Meta -->
				<div
					class="mt-8 flex items-center justify-center gap-3 sm:gap-4 flex-wrap text-sm"
				>
					<!-- Author -->
					<div v-if="post.author" class="flex items-center gap-2.5">
						<img
							v-if="post.author.avatar"
							:src="post.author.avatar"
							:alt="post.author.name"
							class="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800"
						/>
						<span class="font-medium text-neutral-900 dark:text-white">
							{{ post.author.name }}
						</span>
					</div>
					<span class="text-neutral-300 dark:text-neutral-600">•</span>
					<time
						class="text-neutral-500 dark:text-neutral-400"
						:datetime="post.date"
					>
						{{ formattedDate }}
					</time>
					<span class="text-neutral-300 dark:text-neutral-600">•</span>
					<span class="text-neutral-500 dark:text-neutral-400">{{
						post.readingTime
					}}</span>
				</div>
			</div>

			<!-- Featured Image -->
			<figure
				v-if="post.img?.src"
				class="aspect-2/1 sm:aspect-21/9 rounded-2xl lg:rounded-3xl overflow-hidden shadow-xl"
			>
				<img
					:src="post.img.src"
					:alt="post.img.alt || post.title"
					class="w-full h-full object-cover"
				/>
			</figure>
		</header>

		<!-- Content Grid -->
		<div class="grid lg:grid-cols-[1fr_300px] gap-12 lg:gap-16">
			<!-- Main Content -->
			<div class="min-w-0">
				<!-- Prose Content -->
				<div
					class="prose prose-lg prose-neutral dark:prose-invert max-w-none prose-headings:scroll-mt-20 prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline prose-pre:bg-neutral-900 dark:prose-pre:bg-neutral-950 prose-pre:border prose-pre:border-neutral-800 prose-img:rounded-xl"
				>
					<slot />
				</div>

				<!-- Tags -->
				<div
					v-if="post.tags?.length"
					class="mt-16 pt-10 border-t border-neutral-200 dark:border-neutral-800"
				>
					<h4
						class="text-xs font-semibold uppercase tracking-wider text-neutral-500 mb-4"
					>
						Tags
					</h4>
					<div class="flex flex-wrap gap-2">
						<UBadge
							v-for="tag in post.tags"
							:key="tag"
							:label="tag"
							variant="subtle"
							color="neutral"
							size="md"
						/>
					</div>
				</div>

				<!-- Author Bio -->
				<XMarkBlogAuthor
					v-if="post.author"
					:author="post.author"
					variant="full"
					class="mt-12"
				/>

				<!-- Navigation -->
				<XMarkBlogNavigation
					v-if="previousPost || nextPost"
					:previous="previousPost"
					:next="nextPost"
					class="mt-12"
				/>
			</div>

			<!-- Sidebar -->
			<aside class="hidden lg:block">
				<div class="sticky top-24 space-y-8">
					<!-- Table of Contents -->
					<div
						v-if="toc?.length"
						class="p-5 rounded-xl bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200/60 dark:border-neutral-800"
					>
						<h4
							class="font-semibold text-neutral-900 dark:text-white mb-4 text-sm"
						>
							On this page
						</h4>
						<nav class="space-y-1">
							<a
								v-for="item in toc"
								:key="item.id"
								:href="`#${item.id}`"
								class="block py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors leading-snug"
								:class="{ 'pl-4 text-[13px]': item.depth > 2 }"
							>
								{{ item.text }}
							</a>
						</nav>
					</div>

					<!-- Newsletter CTA -->
					<slot name="sidebar">
						<XMarkNewsletterForm
							variant="compact"
							title="Subscribe to our newsletter"
							description="Get the latest posts and insights directly to your inbox."
						/>
					</slot>
				</div>
			</aside>
		</div>
	</article>
</template>

<script setup>
const props = defineProps({
	/** Blog post object { title, slug, img?, excerpt?, date?, category?, author?, body? } */
	post: {
		type: Object,
		default: () => ({
			title: "Blog Post Title",
			slug: "#",
			excerpt: "A short description of this blog post.",
			date: new Date().toISOString(),
			category: "General",
			body: "",
		}),
	},
	previousPost: {
		type: Object,
		default: null,
	},
	nextPost: {
		type: Object,
		default: null,
	},
	toc: {
		type: Array,
		default: () => [],
	},
});

const formattedDate = computed(() => {
	if (!props.post.date) return "";
	const date = new Date(props.post.date);
	return date.toLocaleDateString("en-US", {
		year: "numeric",
		month: "long",
		day: "numeric",
	});
});
</script>
