---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import { formatDate, calculateReadingTime, getRelatedPosts } from '@/utils/blog';
import { t } from '../../i18n';
import i18next from '../../i18n';
import { localizePath } from '../../i18n';
import BlogCard from '@components/blog/BlogCard.astro';

export async function getStaticPaths() {
	const allPosts = await getCollection('blog');
	return allPosts.map((post) => ({
		params: { slug: post.id },
		props: { post },
	}));
}

interface Props {
	post: CollectionEntry<'blog'>;
}

const { post } = Astro.props;
const { Content } = await post.render();
const { title, description, publishedAt, updatedAt, coverImage, author, category, tags } =
	post.data;

const readingTime = calculateReadingTime(post.body);
const relatedPosts = await getRelatedPosts(post, 3);
---

<Layout title={title} description={description}>
	<article class="min-h-screen bg-dark-bg">
		<!-- Hero Section -->
		<div class="relative h-[60vh] overflow-hidden">
			<img src={coverImage} alt={title} class="h-full w-full object-cover" />
			<div class="absolute inset-0 bg-gradient-to-t from-dark-bg via-dark-bg/50 to-transparent">
			</div>

			<div class="container absolute bottom-0 left-0 right-0 mx-auto px-4 pb-12">
				<div class="mx-auto max-w-4xl">
					<!-- Category Badge -->
					<span
						class="mb-4 inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium capitalize text-white"
					>
						{t(`blog.categories.${category}`)}
					</span>

					<!-- Title -->
					<h1 class="mb-4 text-4xl font-bold text-white md:text-5xl lg:text-6xl">
						{title}
					</h1>

					<!-- Meta Info -->
					<div class="flex flex-wrap items-center gap-4 text-gray-300">
						<span class="flex items-center gap-2">
							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
							</svg>
							{author}
						</span>
						<span>•</span>
						<time datetime={publishedAt.toISOString()}>
							{formatDate(publishedAt, post.data.language)}
						</time>
						<span>•</span>
						<span>{readingTime} {t('blog.min_read')}</span>
					</div>
				</div>
			</div>
		</div>

		<!-- Content -->
		<div class="container mx-auto px-4 py-16">
			<div class="mx-auto max-w-4xl">
				<!-- Back Button -->
				<a
					href={localizePath('/blog')}
					class="mb-8 inline-flex items-center gap-2 text-primary transition-colors hover:text-primary-400"
				>
					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M15 19l-7-7 7-7"></path>
					</svg>
					<span>{t('blog.back_to_blog')}</span>
				</a>

				<!-- Article Content -->
				<div class="prose-primary prose prose-lg prose-invert mb-12 max-w-none">
					<Content />
				</div>

				<!-- Tags -->
				<div class="mb-12 flex flex-wrap gap-2 border-b border-dark-border pb-12">
					<span class="font-medium text-gray-400">{t('blog.tags')}:</span>
					{
						tags.map((tag) => (
							<a
								href={localizePath(`/blog/tag/${tag}`)}
								class="rounded-full bg-dark-elevated px-3 py-1 text-sm text-gray-300 transition-colors hover:bg-dark-surface hover:text-primary"
							>
								#{tag}
							</a>
						))
					}
				</div>

				<!-- Author Box -->
				<div class="mb-16 rounded-2xl border border-dark-border bg-dark-elevated p-8">
					<div class="flex items-start gap-4">
						<div
							class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-primary to-secondary text-2xl font-bold text-white"
						>
							{author.charAt(0)}
						</div>
						<div class="flex-1">
							<h3 class="mb-2 text-xl font-bold text-white">{author}</h3>
							<p class="text-gray-400">
								{t('blog.author_bio')}
							</p>
						</div>
					</div>
				</div>

				<!-- Related Posts -->
				{
					relatedPosts.length > 0 && (
						<div>
							<h2 class="mb-8 text-3xl font-bold text-white">{t('blog.related_posts')}</h2>
							<div class="grid gap-8 md:grid-cols-3">
								{relatedPosts.map((relatedPost) => (
									<BlogCard post={relatedPost} />
								))}
							</div>
						</div>
					)
				}
			</div>
		</div>
	</article>
</Layout>

<style is:global>
	/* Blog Post Styles */
	.prose {
		@apply text-gray-300;
	}

	.prose h2 {
		@apply mb-6 mt-12 text-3xl font-bold text-white;
	}

	.prose h3 {
		@apply mb-4 mt-8 text-2xl font-semibold text-white;
	}

	.prose p {
		@apply mb-6 leading-relaxed;
	}

	.prose ul,
	.prose ol {
		@apply mb-6 space-y-2;
	}

	.prose li {
		@apply text-gray-300;
	}

	.prose a {
		@apply text-primary underline transition-colors hover:text-primary-400;
	}

	.prose strong {
		@apply font-semibold text-white;
	}

	.prose code {
		@apply rounded bg-dark-elevated px-2 py-1 text-sm text-primary-300;
	}

	.prose pre {
		@apply mb-6 overflow-x-auto rounded-xl border border-dark-border bg-dark-elevated p-4;
	}

	.prose pre code {
		@apply bg-transparent p-0;
	}

	.prose blockquote {
		@apply my-6 border-l-4 border-primary pl-6 italic text-gray-400;
	}

	.prose img {
		@apply my-8 rounded-xl;
	}

	.prose table {
		@apply mb-6 w-full;
	}

	.prose th {
		@apply bg-dark-elevated p-3 text-left font-semibold text-white;
	}

	.prose td {
		@apply border-t border-dark-border p-3;
	}
</style>
