---
import Layout from '@layouts/Layout.astro';
import { t } from '../../i18n';
import { getBlogPosts, getAllCategories } from '@/utils/blog';
import BlogCard from '@components/blog/BlogCard.astro';
import { localizePath } from '../../i18n';

const posts = await getBlogPosts();
const categories = getAllCategories();

// Pagination
const postsPerPage = 9;
const currentPage = 1;
const totalPages = Math.ceil(posts.length / postsPerPage);
const paginatedPosts = posts.slice(0, postsPerPage);
---

<Layout title={t('blog.title')} description={t('blog.description')}>
	<div class="min-h-screen bg-dark-bg py-24">
		<div class="container mx-auto px-4">
			<!-- Header -->
			<div class="mx-auto mb-16 max-w-3xl text-center">
				<div
					class="mb-6 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-4 py-2"
				>
					<span class="text-sm text-primary-300">{t('blog.badge')}</span>
				</div>
				<h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
					{t('blog.title')}
				</h1>
				<p class="text-xl text-gray-400">
					{t('blog.subtitle')}
				</p>
			</div>

			<!-- Category Filter -->
			<div class="mb-12 flex flex-wrap justify-center gap-3">
				<a
					href={localizePath('/blog')}
					class="rounded-lg bg-primary px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600"
				>
					{t('blog.all_posts')}
				</a>
				{
					categories.map((category) => (
						<a
							href={localizePath(`/blog/category/${category}`)}
							class="rounded-lg border border-dark-border bg-dark-elevated px-4 py-2 font-medium text-gray-300 transition-colors hover:bg-dark-surface hover:text-white"
						>
							{t(`blog.categories.${category}`)}
						</a>
					))
				}
			</div>

			<!-- Blog Grid -->
			<div class="mb-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
				{paginatedPosts.map((post) => <BlogCard post={post} />)}
			</div>

			<!-- Pagination -->
			{
				totalPages > 1 && (
					<div class="flex justify-center gap-2">
						{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
							<a
								href={localizePath(`/blog${page === 1 ? '' : `/page/${page}`}`)}
								class={`rounded-lg px-4 py-2 font-medium transition-colors ${
									page === currentPage
										? 'bg-primary text-white'
										: 'bg-dark-elevated text-gray-300 hover:bg-dark-surface'
								}`}
							>
								{page}
							</a>
						))}
					</div>
				)
			}

			<!-- No Posts -->
			{
				posts.length === 0 && (
					<div class="py-16 text-center">
						<p class="text-xl text-gray-400">{t('blog.no_posts')}</p>
					</div>
				)
			}
		</div>
	</div>
</Layout>
