<template>
	<aside class="space-y-8">
		<!-- Search -->
		<section v-if="hasSearch">
			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Search</h4>
			<UInput
				v-model="search"
				placeholder="Search posts..."
				icon="i-lucide-search"
				@keyup.enter="$emit('search', search)"
			/>
		</section>

		<!-- Categories -->
		<section v-if="categories?.length">
			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Categories</h4>
			<nav class="space-y-1">
				<NuxtLink
					v-for="category in categories"
					:key="category.slug"
					:to="categoryPath(category.slug)"
					class="flex justify-between items-center py-2 px-3 rounded-lg text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
					:class="{
						'bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400': isActiveCategory(category.slug)
					}"
				>
					<span>{{ category.name }}</span>
					<span class="text-neutral-400 text-xs">{{ category.count }}</span>
				</NuxtLink>
			</nav>
		</section>

		<!-- Tags -->
		<section v-if="tags?.length">
			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Tags</h4>
			<div class="flex flex-wrap gap-2">
				<NuxtLink
					v-for="tag in tags"
					:key="tag.slug"
					:to="tagPath(tag.slug)"
					class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
				>
					{{ tag.name }}
				</NuxtLink>
			</div>
		</section>

		<!-- Recent Posts -->
		<section v-if="recentPosts?.length">
			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Recent Posts</h4>
			<div class="space-y-4">
				<NuxtLink
					v-for="post in recentPosts"
					:key="post.slug"
					:to="`/blog/${post.slug}`"
					class="flex gap-3 group"
				>
					<figure class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
						<img
							v-if="post.img?.src"
							:src="post.img.src"
							:alt="post.img.alt || post.title"
							class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
						/>
						<div
							v-else
							class="w-full h-full bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center"
						>
							<UIcon name="i-lucide-file-text" class="w-6 h-6 text-neutral-400" />
						</div>
					</figure>
					<div class="flex-1 min-w-0">
						<h5 class="text-sm font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-2">
							{{ post.title }}
						</h5>
						<time
							v-if="post.date"
							:datetime="post.date"
							class="text-xs text-neutral-500 mt-1 block"
						>
							{{ formatDate(post.date) }}
						</time>
					</div>
				</NuxtLink>
			</div>
		</section>

		<!-- Newsletter CTA -->
		<slot name="cta">
			<XMarkBlogCTANewsletter v-if="hasCta" variant="compact" />
		</slot>

		<!-- Custom Content -->
		<slot />
	</aside>
</template>

<script setup>
const props = defineProps({
	/** Has search input */
	hasSearch: {
		type: Boolean,
		default: true,
	},
	/** Categories list */
	categories: {
		type: Array,
		default: () => [],
		// Each: { name, slug, count }
	},
	/** Tags list */
	tags: {
		type: Array,
		default: () => [],
		// Each: { name, slug }
	},
	/** Recent posts */
	recentPosts: {
		type: Array,
		default: () => [],
		// Each: { title, slug, img?: { src, alt? }, date? }
	},
	/** Base path for categories */
	categoryBasePath: {
		type: String,
		default: '/blog/category',
	},
	/** Base path for tags */
	tagBasePath: {
		type: String,
		default: '/blog/tag',
	},
	/** Has newsletter CTA */
	hasCta: {
		type: Boolean,
		default: true,
	},
});

defineEmits(['search']);

const route = useRoute();
const search = ref('');

const categoryPath = (slug) => `${props.categoryBasePath}/${slug}`;
const tagPath = (slug) => `${props.tagBasePath}/${slug}`;

const isActiveCategory = (slug) => {
	return route.params.category === slug || route.query.category === slug;
};

const formatDate = (dateStr) => {
	const date = new Date(dateStr);
	return date.toLocaleDateString('en-US', {
		month: 'short',
		day: 'numeric',
		year: 'numeric',
	});
};
</script>
