<template>
	<div>
		<!-- Filter/Search -->
		<div v-if="hasFilters" class="flex flex-wrap gap-4 mb-8">
			<UInput
				v-model="search"
				placeholder="Search posts..."
				icon="i-lucide-search"
				class="w-full sm:w-64"
			/>
			<USelectMenu
				v-if="categories.length"
				v-model="selectedCategory"
				:options="categoryOptions"
				placeholder="All Categories"
				class="w-40"
			/>
		</div>

		<!-- Grid -->
		<div :class="gridClasses">
			<XMarkBlogCard
				v-for="(post, index) in paginatedPosts"
				:key="post.slug"
				:post="post"
				:has-category="hasCategories"
				:has-author="hasAuthors"
				:button="cardButton"
				class="xFadeUp"
				:style="{ transitionDelay: `${index * 50}ms` }"
			/>
		</div>

		<!-- Empty State -->
		<div v-if="!paginatedPosts.length" class="text-center py-16">
			<UIcon
				name="i-lucide-file-text"
				class="w-12 h-12 text-neutral-300 dark:text-neutral-700 mx-auto mb-4"
			/>
			<p class="text-neutral-600 dark:text-neutral-400">No posts found</p>
		</div>

		<!-- Pagination -->
		<div v-if="totalPages > 1" class="mt-12 flex justify-center">
			<UPagination
				v-model="currentPage"
				:total="filteredPosts.length"
				:page-count="perPage"
			/>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	/** Array of blog posts [{ title, slug, img?, excerpt?, date?, category?, author?, tags? }] */
	posts: {
		type: Array,
		default: () => [],
	},
	/** Grid columns */
	columns: {
		type: Number,
		default: 3,
		validator: (v) => [1, 2, 3].includes(v),
	},
	/** Posts per page */
	perPage: {
		type: Number,
		default: 9,
	},
	/** Has search/filter */
	hasFilters: {
		type: Boolean,
		default: false,
	},
	/** Has category badges */
	hasCategories: {
		type: Boolean,
		default: true,
	},
	/** Has author info */
	hasAuthors: {
		type: Boolean,
		default: true,
	},
	/** Available categories */
	categories: {
		type: Array,
		default: () => [],
	},
	/** Optional button for all cards { label, color?, variant?, icon? } */
	cardButton: {
		type: Object,
		default: null,
	},
});

const search = ref("");
const selectedCategory = ref("");
const currentPage = ref(1);

const categoryOptions = computed(() => {
	return [
		{ label: "All Categories", value: "" },
		...props.categories.map((cat) => ({
			label: cat,
			value: cat,
		})),
	];
});

const filteredPosts = computed(() => {
	let result = props.posts;

	// Filter by search
	if (search.value) {
		const searchLower = search.value.toLowerCase();
		result = result.filter(
			(post) =>
				post.title.toLowerCase().includes(searchLower) ||
				post.description?.toLowerCase().includes(searchLower)
		);
	}

	// Filter by category
	if (selectedCategory.value) {
		result = result.filter((post) => post.category === selectedCategory.value);
	}

	return result;
});

const totalPages = computed(() => {
	return Math.ceil(filteredPosts.value.length / props.perPage);
});

const paginatedPosts = computed(() => {
	const start = (currentPage.value - 1) * props.perPage;
	const end = start + props.perPage;
	return filteredPosts.value.slice(start, end);
});

const gridClasses = computed(() => {
	const cols = {
		1: "grid gap-8",
		2: "grid md:grid-cols-2 gap-8",
		3: "grid md:grid-cols-2 lg:grid-cols-3 gap-8",
	};
	return cols[props.columns];
});

// Reset pagination when filters change
watch([search, selectedCategory], () => {
	currentPage.value = 1;
});
</script>
